Narrative-Visualization/republican-mask.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
<!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">Republicans' willingness to wear masks</h1>
        <p>
            Republicans are quite unwilling to wear masks and several republican politicians
            have expressed that wearing masks are quite unnecessary. However, not wearing masks
            under any circumstances are quite extreme, so I have generated a customized parameter, passive
             users (percentage of never wear mask + rarely wear mask), to reflect mask wearing behavior.
        </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,100]).range([0,600]);
                var y = d3.scaleLinear().domain([0,0.4]).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(100-d.PercentDemocrat)})
                .attr("cy",function(d,i){return y(1*d.PassiveUser)})
                .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("Percent Republican");
                //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("Percent Passive User");
                //Line
                d3.select("svg").append("g")
                    .append('line')
                    .style("stroke", "lightgreen")
                    .style("stroke-width", 5)
                    .attr("x1", 250)
                    .attr("y1", 450)
                    .attr("x2", 550)
                    .attr("y2", 50);
                //Annotation
                const annotations = [
                {
                    note: {
                        label: "Explanation of Trend Line as seen below",
                        title: "Trend Line"
                    },
                    x: 400,
                    y: 250,
                    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, a positive relatoinship exists between the percentage of
        republican votes and the percentage of passive mask users.
     </p>
     <p align="center">
         <b>The more republican, the less people wear masks!
         </b>
     </p>
    <form>
        <button type="submit" formaction="mask-case.html">Previous</button>
    </form>
    <p> </p>
    <form>
        <button type="submit" formaction="democrat-mask.html">Next</button>
    </form>
</html>