##UFO Sightings: Time of Day
Created using data from the National UFO Reporting Center
Modified from an example created by Mike Bostock.
##UFO Sightings: Time of Day
Created using data from the National UFO Reporting Center
Modified from an example created by Mike Bostock.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
.axis path, | |
.axis line { | |
fill: none; | |
stroke: #000; | |
shape-rendering: crispEdges; | |
} | |
.line { | |
fill: none; | |
stroke: steelblue; | |
stroke-width: 4px; | |
} | |
#chart { | |
font: 14px sans-serif; | |
border: 1px black; | |
width: 775px; | |
position: relative; | |
} | |
</style> | |
<body> | |
<div id="chart"> | |
</div> | |
<script src="http://d3js.org/d3.v3.min.js"></script> | |
<script> | |
//======================= | |
// Initialize variables | |
//======================= | |
// {top: 45, right: 80, bottom: 30, left: 60} | |
var margin = {top: 45, right: 80, bottom: 30, left: 60}, | |
width = 750 - margin.left - margin.right, | |
height = 450 - margin.top - margin.bottom; | |
var parseDate = d3.time.format("%_d %H").parse; | |
var x = d3.time.scale() | |
.range([0, width]); | |
var y = d3.scale.linear() | |
.range([height, 0]); | |
var color = d3.scale.category10(); | |
var yAxis = d3.svg.axis() | |
.scale(y) | |
.orient("left"); | |
var line = d3.svg.line() | |
.interpolate("basis") | |
.x(function(d) { return x(d.Time); }) | |
.y(function(d) { return y(d.sightings); }); | |
var svg = d3.select("#chart").append("svg") | |
.attr("width", width + margin.left + margin.right) | |
.attr("height", height + margin.top + margin.bottom) | |
.append("g") | |
.attr("transform", "translate(" + margin.left + "," + margin.top + ")"); | |
//======================= | |
// Read in the data | |
//======================= | |
d3.csv("ufo_night.csv", function(error, data) { | |
color.domain(d3.keys(data[0]).filter(function(key) { return key !== "Time"; })); | |
data.forEach(function(d) { | |
d.Time = parseDate(d.Time); | |
}); | |
var days = color.domain().map(function(name) { | |
return { | |
name: name, | |
values: data.map(function(d) { | |
return {Time: d.Time, sightings: +d[name]}; | |
}) | |
}; | |
}); | |
x.domain(d3.extent(data, function(d) { return d.Time; })); | |
y.domain([ | |
d3.min(days, function(c) { return d3.min(c.values, function(v) { return v.sightings; }); }), | |
d3.max(days, function(c) { return d3.max(c.values, function(v) { return v.sightings; }); }) | |
]); | |
svg.append("g") | |
.attr("class", "y axis") | |
.call(yAxis) | |
.append("text") | |
.attr("transform", "rotate(-90)") | |
.attr("y", 6) | |
.attr("dy", ".71em") | |
.style("text-anchor", "end") | |
.text("UFO Sightings"); | |
// Bind the data to the g element | |
var day_week = svg.selectAll(".day_week") | |
.data(days) | |
.enter().append("g") | |
.attr("class", "day_week"); | |
//===================== | |
// Plot the data | |
//===================== | |
// Add the line and color it | |
day_week.append("path") | |
.attr("class", "line") | |
.attr("d", function(d) { return line(d.values); }) | |
.style("stroke", function(d) { return color(d.name); }); | |
//======================= | |
// Add Axes | |
//======================= | |
var xAxis = d3.svg.axis() | |
.scale(x) | |
.orient("bottom") | |
.tickSize(20, 0) | |
.tickFormat(d3.time.format("%_I %p")); | |
svg.append("g") | |
.attr("class", "x axis") | |
.attr("transform", "translate(0," + height + ")") | |
.call(xAxis) | |
.selectAll(".tick text") | |
.style("text-anchor", "start") | |
.attr("x", 6) | |
.attr("y", 6); | |
//======================= | |
// Add Legend | |
//======================= | |
// Add legend | |
var legend = svg.selectAll(".legend") | |
.data(color.domain()) | |
.enter().append("g") | |
.attr("class", "legend") | |
.attr("transform", function(d, i) { return "translate(0," + i * 20 + ")"; }); | |
legend.append("rect") | |
.attr("x", width - 18) | |
.attr("width", 18) | |
.attr("height", 18) | |
.style("fill", color); | |
legend.append("text") | |
.attr("x", width - 24) | |
.attr("y", 9) | |
.attr("dy", ".35em") | |
.style("text-anchor", "end") | |
.text(function(d) { return d; }); | |
}); | |
</script> |
Time | Friday | Saturday | Sunday | Monday | Tuesday | Wednesday | Thursday | |
---|---|---|---|---|---|---|---|---|
1 6 | 182 | 168 | 144 | 179 | 204 | 187 | 188 | |
1 7 | 150 | 140 | 112 | 134 | 154 | 140 | 146 | |
1 8 | 143 | 151 | 111 | 128 | 135 | 128 | 126 | |
1 9 | 157 | 176 | 150 | 135 | 138 | 137 | 136 | |
1 10 | 167 | 207 | 174 | 155 | 141 | 145 | 148 | |
1 11 | 178 | 227 | 195 | 173 | 160 | 167 | 159 | |
1 12 | 177 | 237 | 201 | 176 | 164 | 171 | 161 | |
1 13 | 177 | 239 | 216 | 176 | 183 | 180 | 164 | |
1 14 | 180 | 238 | 233 | 165 | 172 | 172 | 172 | |
1 15 | 192 | 243 | 249 | 174 | 189 | 186 | 192 | |
1 16 | 252 | 315 | 290 | 219 | 245 | 248 | 265 | |
1 17 | 354 | 454 | 396 | 340 | 390 | 360 | 377 | |
1 18 | 571 | 686 | 580 | 532 | 615 | 562 | 587 | |
1 19 | 875 | 1030 | 865 | 801 | 877 | 854 | 873 | |
1 20 | 1307 | 1550 | 1198 | 1081 | 1180 | 1220 | 1280 | |
1 21 | 1598 | 1962 | 1416 | 1260 | 1328 | 1451 | 1474 | |
1 22 | 1582 | 1986 | 1395 | 1195 | 1269 | 1387 | 1403 | |
1 23 | 1470 | 1870 | 1310 | 1107 | 1150 | 1275 | 1226 | |
2 0 | 566 | 670 | 690 | 497 | 556 | 553 | 507 | |
2 1 | 483 | 578 | 585 | 424 | 481 | 457 | 446 | |
2 2 | 339 | 418 | 409 | 298 | 355 | 325 | 326 | |
2 3 | 264 | 314 | 321 | 255 | 264 | 251 | 263 | |
2 4 | 235 | 254 | 266 | 242 | 244 | 248 | 233 | |
2 5 | 206 | 196 | 203 | 214 | 220 | 209 | 213 |