VI-Project/line-plot.html at main · ritamf/VI-Project · 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
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no" />
    <meta name="description" content="" />
    <meta name="author" content="" />
    <title>VI Project - Visualize Covid Data</title>

    <link rel="icon" type="image/x-icon" href="assets/covid.ico" /> <!-- Favicon-->
    <link href="css/styles.css" rel="stylesheet"> <!-- Core theme CSS (includes Bootstrap) -->

    <style>
        .axis path {
            fill: none;
            stroke: black;
        }

        text {
            font-size: 10pt;
            font-family: sans-serif;
        }

        circle {
            stroke: black;
            stroke-width: 0.5px;
            opacity: 0.4;
        }

        circle.series2020 {
            stroke: black;
            stroke-width: 0.5px;
            fill: green;
            opacity: 0.4;
        }

        circle.series2021 {
            stroke: black;
            stroke-width: 0.5px;
            fill: blue;
            opacity: 0.4;
        }

        path {
            fill: none;
            stroke: black;
            stroke-width: 2px;
        }

        path.line {
            opacity: 0.9;
        }

        path.line.series2020 {
            stroke: green;
        }

        path.line.series2021 {
            stroke: blue;
        }
    </style>
</head>

<body class="d-flex flex-column min-vh-100">

    <!-- Responsive navbar-->
    <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container px-5">
            <a class="navbar-brand" href="index.html"> <img src="assets/covid.ico" width="25" height="25" alt=""> VI
                Project - Visualize Covid Data</a>
            <button class="navbar-toggler" type="button" data-bs-toggle="collapse"
                data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false"
                aria-label="Toggle navigation"><span class="navbar-toggler-icon"></span></button>
            <div class="collapse navbar-collapse" id="navbarSupportedContent">
                <ul class="navbar-nav ms-auto mb-2 mb-lg-0">
                    <li class="nav-item"><a class="nav-link" aria-current="" href="index.html">Map Plot</a></li>
                    <li class="nav-item"><a class="nav-link active" aria-current="" href="line-plot.html">Line Plot</a>
                    </li>
                    <li class="nav-item"><a class="nav-link" aria-current="" href="bar-plot.html">Bar Plot</a></li>
                    <li class="nav-item"><a class="nav-link" aria-current="" href="about.html">About</a></li>
                </ul>
            </div>
        </div>
    </nav>

    <!-- Page Content (mostly D3js content) -->
    <div class="container-fluid my-5">
        <h1>Line Plot</h1>

        Region: <select id="country-dropdown" name="locality" onchange="setSelectedCountry(this)">
        </select> &emsp; &emsp;

        Indicator: <select id="country-dropdownIndicator" name="locality" onchange="setSelectedIndicator(this)">
        </select> &emsp; &emsp;

        Type of processed data: <select id="country-dropdownCount" name="locality" onchange="setSelectedCount(this)">
            <option value="Normalized">Normalized</option>
            <option value="Raw" selected="selected">Raw</option>
        </select>

        <div class="div-line-plot"></div>

    </div>

    <!-- Footer-->
    <div class="wrapper flex-grow-1"></div>
    <footer class="py-5 bg-dark">
        <div class="container px-4 px-lg-5">
            <p class="m-0 text-center text-white">Copyright &copy; VI Project - Visualize Covid Data 2021/2022</p>
        </div>
    </footer>


    <script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script> <!--jQuery-->
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script> <!--popper-->
    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.1.3/dist/js/bootstrap.bundle.min.js"></script> <!--Bootstrap core JS-->
    <script src="http://d3js.org/d3.v6.js"></script> <!--D3js-->

    <script src="line-plot.js"></script> <!--D3js line plot script-->

</body>

</html>