Narrative-Visualization/mask-case.html at main · Ivan-Rocks/Narrative-Visualization · 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
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
<!DOCTYPE html>
<html>
    <body>
        <style>
            div.tooltip {
            position: absolute;
            text-align: center;
            width: 60px;
            height: 25px;
            padding: 2px;
            font: 12px sans-serif;
            background: rgb(222, 198, 176);
            border: 0px;
            border-radius: 8px;
            pointer-events: none;
            }
        </style>
    </body>
    <body>
        <h1 align="center">Mask vs Cases</h1>
        <p>
            First of all, lets see if mask wearing is really having an impact on covid cases:
        </p>
        <p>
            For the sake of simplicity, in this section, we shall investigate the relationship
            between COVID cases per 100k people and the percentage of people who never wear masks.
             If there is a positive relationship between COVID cases and the percentage of people
             who never wear masks, mask wearing can be used as a substitute indicator of COVID situations.
             Another reason for choosing mask wearing as a substitute indicator stems from the fact that
             mask wearing is one key factor democrats and republicans see differently on COVID.
        </p>
    </body>
    <script src='https://d3js.org/d3.v5.min.js'></script>
    <script src="https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js"></script>
    <style> circle {stroke: black;} </style>
    <body onload='init()' align="center">
        <svg width=800 height=500>
        </svg>
        <script>
            async function init() {
                var data = await d3.csv("https://raw.githubusercontent.com/Ivan-Rocks/Narrative-Visualization/main/mask-case-vote.csv")
                var x = d3.scaleLinear().domain([0,50]).range([0,600]);
                var y = d3.scaleLinear().domain([0,0.2]).range([400,0]);
                var div = d3.select("body").append("div")
                            .attr("class", "tooltip")
                            .style("opacity", 0);
                //Graph
                d3.select("svg").append("g")
                .attr("transform","translate(50,50)")
                .selectAll("circle")
                .data(data).enter().append("circle")
                .attr("cx",function(d,i){return x(1*d.CasesAvgPer100K)})
                .attr("cy",function(d,i){return y(1*d.Never)})
                .attr("r",function(d,i){return 5})
                .attr("fill",function(d,i){
                    if(1*d.PercentDemocrat>50.0) {
                        return "lightblue";
                    }
                    return "red"
                })
                .on("mouseover", function(d) {
                    div.transition()
                    .duration(200)
                    .style("opacity", .9);
                    div	.html(d.State)
                    .style("left", (d3.event.pageX) + "px")
                    .style("top", (d3.event.pageY - 28) + "px");
                })
                .on("mouseout", function(d) {
                    div.transition()
                    .duration(500)
                    .style("opacity", 0);
                })
                //Horizontal Axis and Label
                d3.select("svg").append("g")
                .attr("transform","translate(50,450)")
                .call(d3.axisBottom(x))
                d3.select("svg").append("g")
                    .append("text")
                    .attr("transform","translate(350,500)")
                    .style("text-anchor", "middle")
                    .text("COVID cases per 100k");
                //Vertical Axis and Label
                d3.select("svg").append("g")
                .attr("transform","translate(50,50)")
                .call(d3.axisLeft(y))
                d3.select("svg").append("g")
                    .append("text")
                    .attr("transform", "rotate(-90)")
                    .attr("y", 0)
                    .attr("x",-250)
                    .attr("dy", "1em")
                    .style("text-anchor", "middle")
                    .text("Never wear mask percentage");
                //Line
                d3.select("svg").append("g")
                    .append('line')
                    .style("stroke", "lightgreen")
                    .style("stroke-width", 5)
                    .attr("x1", 50)
                    .attr("y1", 450)
                    .attr("x2", 600)
                    .attr("y2", 150);
                //Annotation
                const annotations = [
                {
                    note: {
                    label: "Explanation of Trend Line as seen below",
                    title: "Trend Line"
                    },
                    x: 400,
                    y: 265,
                    dy: 100,
                    dx: 100
                }
                ]
                const makeAnnotations = d3.annotation()
                                        .annotations(annotations)
                                        d3.select("svg")
                                        .append("g")
                                        .call(makeAnnotations)
            }
        </script>
    </body>
    <p>
       As the trend line indicates, there is indeed a correlation betweeen mask wearing
       and COVID cases.
    </p>
    <p align="center">
        <b>Therefore, the more percentage of people who never wear masks, the more
            people get COVID!
        </b>
    </p>
    <form>
        <button type="submit" formaction="index.html">Previous</button>
    </form>
    <p> </p>
    <form>
        <button type="submit" formaction="republican-mask.html">Next</button>
    </form>
</html>