https://cse442-17s.github.io/Looking-Down-the-Barrel/final/js/car-terror.js

1"use strict";
2var executeCarTerror;
3var CAR_TERROR_WIDTH;
4var CAR_TERROR_HEIGHT;
5(function () {
6
7    var dataset;
8    var categories;
9    var CANVAS_HEIGHT;
10    var CANVAS_WIDTH;
11    var margin = { top: 20, right: 150, bottom: 30, left: 90 };
12    var RUN_ONCE = true;
13
14    executeCarTerror = function () {
15        if (RUN_ONCE) {
16            // call methods when window loads
17            loadData();
18            CANVAS_WIDTH = CAR_TERROR_WIDTH - margin.left - margin.right,
19                CANVAS_HEIGHT = CAR_TERROR_HEIGHT - margin.top - margin.bottom;
20            RUN_ONCE = false;
21        }
22    };
23
24    var loadData = function () {
25
26        d3.csv("../datasets/05-15_car_terrorism_gun.csv", function (error, data) {
27            if (error) {
28                console.log(error);
29            }
30            dataset = data;
31            categories = data.columns.slice(1).map(function (id) {
32                return {
33                    id: id,
34                    values: data.map(function (d) {
35                        return { year: d.year, quantity: d[id] };
36                    })
37                };
38            });
39            createChart(data);
40        });
41    };
42
43    var createChart = function (data) {
44
45        var svg = d3.select("#car-terror-wrapper").append("svg")
46            .attr("width", CAR_TERROR_WIDTH)
47            .attr("height", CAR_TERROR_HEIGHT);
48
49        var g = svg.append("g")
50            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
51
52
53
54
55        var x = d3.scaleLinear().range([0, CANVAS_WIDTH]);
56
57        var y = d3.scalePow().range([CANVAS_HEIGHT, 0]).exponent(0.4);
58
59        var z = d3.scaleOrdinal(d3.schemeCategory10);
60
61        var line = d3.line()
62            .curve(d3.curveLinear)
63            .x(function (d) { return x(d.year); })
64            .y(function (d) { return y(d.quantity); });
65
66        x.domain([2005, 2015]);
67        y.domain([0, 48000]);
68
69        var yAxis = d3.axisLeft(y).tickValues([500, 10000, 20000, 30000, 40000, 48000]);
70
71        z.domain(categories.map(function (d) { return d.id; }));
72
73        var trendLine = g.selectAll(".line")
74            .data(categories)
75            .enter().append("g")
76            .attr("class", "line");
77
78        var trendPath = trendLine.append("path")
79            .attr("d", function (d) { return line(d.values); })
80            .style("stroke", function (d) { return z(d.id); })
81            .attr("fill", "none");
82
83        // x Axis
84        g.append("g")
85            .attr("class", "x axis")
86            .attr("transform", "translate(0," + CANVAS_HEIGHT + ")")
87            .call(d3.axisBottom(x).tickFormat(d3.format("d")));
88
89        // y Axis
90        g.append("g")
91            .attr("class", "y axis")
92            .call(yAxis)
93            .append("text")
94            .attr("fill", "black")
95            .attr("x", 110)
96            .attr("dy", "-0.5em")
97            .attr("text-anchor", "end")
98            .text("Number of Deaths");
99
100        // line animation
101        var totalLength = trendPath.node().getTotalLength();
102        trendPath
103            .attr("stroke-dasharray", totalLength + " " + totalLength)
104            .attr("stroke-dashoffset", totalLength)
105            .transition()
106            .duration(3000)
107            .ease(d3.easeLinear)
108            .attr("stroke-dashoffset", 0)
109            .on("end", endTrendAnimation);
110    function endTrendAnimation() {
111
112            var legend = svg.selectAll(".legend")
113                .data(categories)
114                .enter()
115                .append('g')
116                .attr('class', 'legend');
117
118            legend.append('rect')
119                .attr('x', CAR_TERROR_WIDTH - 150)
120                .attr('y', function (d, i) {
121                    return i * 20 + CANVAS_HEIGHT / 2;
122                })
123                .attr('width', 10)
124                .attr('height', 10)
125                .style('fill', function (d) {
126                    return z(d.id);
127                });
128
129            legend.append('text')
130                .attr('x', CAR_TERROR_WIDTH - 130)
131                .attr('y', function (d, i) {
132                    return (i * 20) + CANVAS_HEIGHT / 2 + 10;
133                })
134                .text(function (d) {
135                    return d.id;
136                })
137                .attr("fill", "white");
138
139            var focus = g.append("g")
140                .attr("class", "mouse-over-effects");
141

142            var circles = focus.selectAll('.circle-per-line')
143                .data(categories)
144                .enter()
145                .append("g")
146                .attr("class", "circle-per-line");
147
148            circles.append("circle")
149                .attr("r", 7)
150                .style("stroke", function (d) {
151                    return z(d.id);
152                })
153                .style("fill", "white")
154                .style("stroke-width", "2px")
155                .style("opacity", "0");
156
157            circles.append("text")
158                .attr("id", function (d, i) { return "text" + i; })
159                .attr("transform", "translate(0, 0)");
160
161            g.append('rect')
162                .attr('class', 'overlay')
163                .attr('width', CANVAS_WIDTH)
164                .attr('height', CANVAS_HEIGHT)
165                .on('mouseover', function () { 
166                    for (var i = 0; i < 3; i++) {
167                        d3.select("#text" + i).style("display", null);
168                    }
169                    focus.style('display', null);
170                })
171                .on('mouseout', function () { 
172                    for (var i = 0; i < 3; i++) {
173                        d3.select("#text" + i).style("display", "none");
174                    }
175                    focus.style('display', 'none'); 
176                })
177                .on('mousemove', function () {
178
179                    var mouse = d3.mouse(this);
180                    var year = Math.ceil(x.invert(mouse[0]) - 0.5);
181
182                    var quantity = NaN;
183
184                    focus.selectAll("circle")
185                        .attr("cx", x(year))
186                        .attr("cy", function (c, i) {
187
188                            c.values.forEach(function (d) {
189
190                                if (d.year == year) {
191                                    quantity = d.quantity;
192                                }
193
194                            })
195
196                            d3.select("#text" + i)
197                                .attr("transform", function () {
198                                    if (i == 0) {
199                                        return "translate(" + (x(year) - 52) + "," + (y(quantity) - 5) + ")";
200                                    }
201                                    if (i == 2) {
202                                        return "translate(" + (x(year) + 12) + "," + (y(quantity) - 5) + ")";
203                                    }
204                                    if (i == 1) {
205                                        return "translate(" + (x(year) + 7) + "," + (y(quantity) - 7) + ")";
206                                    }
207                                })
208                                .attr("fill", function () {
209
210                                    if (i == 0) {
211                                        return z("Car Accidents");
212                                    }
213                                    if (i == 2) {
214                                        return z("Gun-related");
215                                    }
216
217                                    if (i == 1) {
218                                        return z("Terrorism-related");
219                                    }
220                                    // return "white"
221
222                                })
223                                .text(quantity);
224
225                            return y(quantity);
226                        })
227                        .style("opacity", "1");
228                });
229        }
230    }
231}());