Skip to content

Instantly share code, notes, and snippets.

@JulienAssouline

JulienAssouline/US_mass_shootings_2017_by_date.csv

Created November 21, 2017 05:39
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save JulienAssouline/046526167dbf66b1dc826a69f2a62f01 to your computer and use it in GitHub Desktop.
Save JulienAssouline/046526167dbf66b1dc826a69f2a62f01 to your computer and use it in GitHub Desktop.
Download ZIP
Alternative Calendar Map
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style>
/* body {
font: 1.1em sans-serif;
}*/
#chart1{
width: 800px;
margin: 0 auto;
}
.background {
fill: #eee;
}
line {
stroke: #fff;
}
text.active {
fill: red;
}
.day {
fill: #fff;
stroke: #ccc;
}
.month {
fill: none;
stroke: #fff;
stroke-width: 4px;
}
.month-title{
font-size: 16px;
font-weight: bold;
}
.year-title {
font-size: 1.5em;
}
.line{
stroke: grey;
}
.line1{
stroke: grey;
}
/* color ranges */
.RdYlGn .q0-11{fill: darkred}
.RdYlGn .q1-11{fill:darkred}
.RdYlGn .q2-11{fill:darkred}
.RdYlGn .q3-11{fill:darkred}
.RdYlGn .q4-11{fill:darkred}
.RdYlGn .q5-11{fill:darkred}
.RdYlGn .q6-11{fill:darkred}
.RdYlGn .q7-11{fill:darkred}
.RdYlGn .q8-11{fill:darkred}
.RdYlGn .q9-11{fill:darkred}
.RdYlGn .q10-11{fill: darkred}
/* polylinear_color = d3.scale.linear()
.domain([0, 3, 10])
.range(['rgb(255,0,0)','rgb(255,255,255)','rgb(0,255,0)'])*/
/* hover info */
</style>
</head>
<body>
<div id="chart1" class="clearfix"></div>
<script src="http://d3js.org/d3.v4.js"></script>
<!-- <script src="http://code.jquery.com/jquery-latest.min.js" type="text/javascript"></script>
--> <script>
var width = 960,
height = 950,
cellSize = 25; // cell size
var no_months_in_a_row = Math.floor(width / (cellSize * 7 + 50));
var shift_up = cellSize * 1;
var day = d3.timeFormat("%w"), // day of the week
day_of_month = d3.timeFormat("%e") // day of the month
day_of_year = d3.timeFormat("%j")
week = d3.timeFormat("%U"), // week number of the year
month = d3.timeFormat("%m"), // month number
year = d3.timeFormat("%Y"),
percent = d3.format(".1%"),
format = d3.timeFormat("%Y-%m-%d");
var color = d3.scaleQuantize()
.domain([0, 10])
.range(d3.range(11).map(function(d) { return "q" + d + "-11"; }));
var svg = d3.select("#chart1").selectAll("svg")
.data(d3.range(2017, 2018)) //years included in the viz
.enter().append("svg")
.attr("width", width)
.attr("height", height)
.attr("class", "RdYlGn")
.append("g")
var rect = svg.selectAll(".day")
.data(function(d) {
return d3.timeDays(new Date(d, 0, 1), new Date(d, 10, 1));
})
.enter().append("rect")
.attr("class", "day")
.attr("width", cellSize)
.attr("height", cellSize)
.attr("x", function(d) {
var month_padding = 1.2 * cellSize*7 * ((month(d)-1) % (no_months_in_a_row));
return day(d) * cellSize + month_padding;
})
.attr("y", function(d) {
var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
var row_level = Math.ceil(month(d) / (no_months_in_a_row));
return (week_diff*cellSize) + row_level*cellSize*8 - cellSize/2 - shift_up;
})
.datum(format);
var month_titles = svg.selectAll(".month-title") // Jan, Feb, Mar and the whatnot
.data(function(d) {
return d3.timeMonths(new Date(d, 0, 1), new Date(d, 10, 1)); })
.enter().append("text")
.text(monthTitle)
.attr("x", function(d, i) {
var month_padding = 1.2 * cellSize*7* ((month(d)-1) % (no_months_in_a_row));
return month_padding;
})
.attr("y", function(d, i) {
var week_diff = week(d) - week(new Date(year(d), month(d)-1, 1) );
var row_level = Math.ceil(month(d) / (no_months_in_a_row));
return (week_diff*cellSize) + row_level*cellSize*8 - cellSize - shift_up;
})
.attr("class", "month-title")
.attr("d", monthTitle);
var year_titles = svg.selectAll(".year-title") // Jan, Feb, Mar and the whatnot
.data(function(d) {
return d3.timeYears(new Date(d, 0, 1), new Date(d + 1, 0, 1)); })
.enter().append("text")
.text(yearTitle)
.attr("x", function(d, i) { return width/2 - 100; })
.attr("y", function(d, i) { return cellSize*4.5 - shift_up; })
.attr("class", "year-title")
.attr("d", yearTitle);
d3.csv("US_mass_shootings_2017_by_date.csv", function(error, csv) {
var data = d3.nest()
.key(function(d) { return d.Date; })
.rollup(function(d) { return (d[0].Killed); })
.map(csv);
console.log(data)
rect.filter(function(d) {
return (data.has(d));
})
.attr("class", function(d) {
return "day " + color(data.get(d));
})
// .select("title")
// .text(function(d) { return d + ": " + percent(data.get(d)); });
});
var text = svg.append("text")
.attr("x", 230)
.attr("y", 710)
.text("Oct. 1, 2017")
.style("font-weight", "bold")
.style("font-size", 14)
var text = svg.append("text")
.attr("x", 230)
.attr("y", 730)
.text("The Las Vegas mass shooting, 59 dead, 241 injured.")
.style("font-weight", "normal")
.style("font-size", 14)
svg.append("line")
.attr("x1", 2)
.attr("y1", 5)
.attr("x2", 2)
.attr("y2", 130)
.attr("stroke-width", 1.5)
.attr("transform", "translate(220,575)")
.attr("class", "line")
svg.append("text")
.attr("x", 520)
.attr("y", 525)
.text("July 10 - July 14")
.style("font-weight", "normal")
.style("font-size", 14)
.style("font-weight", "bold")
svg.append("text")
.attr("x", 520)
.attr("y", 545)
.text("Five days is the longest stretch")
.style("font-weight", "normal")
.style("font-size", 14)
svg.append("text")
.attr("x", 520)
.attr("y", 565)
.text("without a mass shooting in 2017.")
.style("font-weight", "normal")
.style("font-size", 14)
svg.append("line")
.attr("x1", 2)
.attr("y1", 5)
.attr("x2", 2)
.attr("y2", 95)
.attr("stroke-width", 1.5)
.attr("transform", "translate(505,425)")
.attr("class", "line1")
svg.append("rect")
.attr("class", "bar1")
.attr("x", 210)
.attr("y", 10)
.attr("width", 20)
.attr("height", 20)
.attr("fill", "darkred")
.attr("stroke", "#ccc")
svg.append("text")
.attr("x", 237)
.attr("y", 25)
.text("Day with mass shooting")
.style("font-weight", "normal")
.style("font-size", 14)
svg.append("rect")
.attr("class", "bar1")
.attr("x", 420)
.attr("y", 10)
.attr("width", 20)
.attr("height", 20)
.attr("fill", "white")
.attr("stroke", "#ccc")
svg.append("text")
.attr("x", 447)
.attr("y", 25)
.text("Day without mass shooting")
.style("font-weight", "normal")
.style("font-size", 14)
// function dayTitle (t0) {
// return t0.toString().split(" ")[2];
// }
function monthTitle (t0) {
return t0.toLocaleString("en-us", { month: "long" });
}
function yearTitle (t0) {
return t0.toString().split(" ")[3];
}
</script>
</body>
</html>
Raw
US_mass_shootings_2017_by_date.csv
Date Killed Injured
2 2017-01-01 1 15
15 2017-01-03 0 4
22 2017-01-04 3 1
35 2017-01-06 7 8
42 2017-01-07 1 3
63 2017-01-11 2 6
67 2017-01-12 5 4
77 2017-01-15 4 5
83 2017-01-16 0 12
99 2017-01-20 1 8
105 2017-01-21 2 13
109 2017-01-22 6 7
121 2017-01-25 0 6
126 2017-01-26 2 3
134 2017-01-27 0 10
146 2017-01-29 1 4
150 2017-01-30 0 4
156 2017-01-31 0 8
34 2017-02-06 4 0
41 2017-02-07 1 8
47 2017-02-08 1 4
51 2017-02-09 4 0
57 2017-02-10 1 5
62 2017-02-11 1 7
66 2017-02-12 2 14
76 2017-02-15 3 6
88 2017-02-18 1 7
93 2017-02-19 1 3
98 2017-02-20 0 5
104 2017-02-21 4 4
108 2017-02-22 0 4
120 2017-02-25 3 7
125 2017-02-26 1 4
133 2017-02-27 0 4
141 2017-02-28 0 6
18 2017-03-03 0 9
24 2017-03-04 1 8
30 2017-03-05 0 4
43 2017-03-07 0 4
59 2017-03-10 5 3
80 2017-03-15 3 1
91 2017-03-18 3 2
95 2017-03-19 1 5
112 2017-03-22 5 0
117 2017-03-24 2 10
123 2017-03-25 4 9
128 2017-03-26 6 21
137 2017-03-27 2 4
153 2017-03-30 4 0
0 2017-04-01 3 12
7 2017-04-02 2 9
13 2017-04-03 3 8
32 2017-04-06 1 3
40 2017-04-07 13 7
50 2017-04-09 2 6
68 2017-04-13 1 3
75 2017-04-15 0 26
81 2017-04-16 0 17
96 2017-04-20 0 4
102 2017-04-21 2 2
124 2017-04-26 0 4
131 2017-04-27 1 3
139 2017-04-28 0 4
145 2017-04-29 3 24
149 2017-04-30 7 17
5 2017-05-01 2 3
11 2017-05-02 1 3
25 2017-05-04 1 3
44 2017-05-07 2 8
54 2017-05-09 3 1
60 2017-05-10 1 3
74 2017-05-14 1 20
84 2017-05-16 3 1
100 2017-05-20 0 10
106 2017-05-21 1 7
129 2017-05-26 0 4
138 2017-05-27 9 12
143 2017-05-28 1 22
148 2017-05-29 1 3
154 2017-05-30 1 3
4 2017-06-01 3 1
10 2017-06-02 3 6
17 2017-06-03 5 4
29 2017-06-05 6 0
37 2017-06-06 3 2
49 2017-06-08 0 6
53 2017-06-09 2 5
58 2017-06-10 0 4
64 2017-06-11 0 17
70 2017-06-13 2 10
73 2017-06-14 5 11
79 2017-06-15 6 3
86 2017-06-17 1 8
90 2017-06-18 3 17
111 2017-06-22 1 6
116 2017-06-24 1 13
122 2017-06-25 1 7
136 2017-06-27 0 5
152 2017-06-30 2 6
3 2017-07-01 2 35
9 2017-07-02 0 8
16 2017-07-03 4 4
23 2017-07-04 2 11
28 2017-07-05 6 7
36 2017-07-06 0 4
48 2017-07-08 1 12
52 2017-07-09 0 7
78 2017-07-15 1 7
89 2017-07-18 1 11
94 2017-07-19 1 8
110 2017-07-22 0 5
113 2017-07-23 1 7
127 2017-07-26 1 6
135 2017-07-27 1 4
142 2017-07-28 0 4
147 2017-07-29 3 7
151 2017-07-30 2 8
157 2017-07-31 0 4
1 2017-08-01 0 17
8 2017-08-02 0 4
14 2017-08-03 1 3
21 2017-08-04 3 2
27 2017-08-05 2 10
33 2017-08-06 0 17
46 2017-08-08 1 6
65 2017-08-12 1 3
69 2017-08-13 0 13
72 2017-08-14 2 2
82 2017-08-16 0 4
92 2017-08-19 1 4
97 2017-08-20 2 9
103 2017-08-21 6 14
107 2017-08-22 0 4
115 2017-08-24 4 0
119 2017-08-25 0 4
132 2017-08-27 2 7
140 2017-08-28 2 4
12 2017-09-02 1 7
20 2017-09-03 2 3
26 2017-09-04 0 4
39 2017-09-06 0 4
56 2017-09-09 0 4
61 2017-09-10 9 5
71 2017-09-13 2 16
85 2017-09-16 0 8
87 2017-09-17 2 7
101 2017-09-20 0 5
114 2017-09-23 1 9
118 2017-09-24 2 19
130 2017-09-26 3 9
144 2017-09-28 1 3
155 2017-09-30 1 3
6 2017-10-01 62 243
19 2017-10-03 0 4
31 2017-10-05 4 0
38 2017-10-06 0 5
45 2017-10-07 0 4
55 2017-10-09 0 5
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment