stephechung.github.io/migration.html at master · stephechung/stephechung.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Census Migration</title>
    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/css/bootstrap.min.css"
          rel="stylesheet"/>
    <link href="dmv.css" rel="stylesheet"/>
    <link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.4/css/all.min.css"
          rel="stylesheet"/>
</head>
<body>

<div class="container-fluid">
    <div class="row">
        <nav id="sidebarMenu" class="col-md-3 col-lg-2 d-md-block bg-light sidebar collapse">
            <div class="position-sticky pt-3">
                <ul class="nav flex-column">
                    <li class="nav-item">
                        <a class="nav-link" href="home.html">
                            <span data-feather="home"></span>
                            Home
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="migration.html">
                            <span data-feather="home"></span>
                            Census Migration
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="ranking.html">
                            <span data-feather="file"></span>
                            State Ranking
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="sales.html">
                            <span data-feather="file"></span>
                            County Sales
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="housing_stats.html">
                            <span data-feather="report"></span>
                            Housing Stats
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="finance.html">
                            <span data-feather="report"></span>
                            Financial Data
                        </a>
                    </li>
                    <li class="nav-item">
                        <a class="nav-link" href="zipcode.html">
                            <span data-feather="report"></span>
                            Zip Code Map
                        </a>
                    </li>
                </ul>

            </div>
        </nav>

        <main class="col-md-9 ms-sm-auto col-lg-10 px-md-4">
            <div class="d-flex justify-content-between flex-wrap flex-md-nowrap align-items-center pt-3 pb-2 mb-3 border-bottom">
                <h1 class="h2">DMV Migration Flow (2010-2019)</h1>
            </div>


            <div class="row g-4 py-5 row-cols-1 row-cols-lg-2">

                <div class="feature col note-pad">
                    <h5>DMV Population Flow</h5>
                    <p>More populous states as well as local southern states move in and out of the Maryland and
                        Virginia in greater numbers than central, heartland, or midwestern states. However the
                        overwhelming majority of traffic in and out of DC is locally to Maryland and Virginia.</p>
                </div>

                <div class="feature col note-pad">
                    <div class="my-4 w-100" id="myInput1"></div>
                    <div class="my-4 w-100" id="myInput2"></div>
                </div>
            </div>

            <div class="note-pad">
                <div class="my-4 w-100 map2" id="myChart1"></div>
            </div>


        </main>
    </div>
</div>


</body>

<script type="module">
    import {Runtime, Inspector} from "https://cdn.jsdelivr.net/npm/@observablehq/runtime@4/dist/runtime.js";
    import notebook from "https://api.observablehq.com/d/459af424840de3c8.js?v=3";

    const main = new Runtime().module(notebook, name => {
        if (name === "viewof region") return Inspector.into("#myInput1")();
        if (name === "viewof mYear") return Inspector.into("#myInput2")();
        if (name === "migration") return Inspector.into("#myChart1")();
    })
</script>
</html>