##UFO Sightings: Year
Created using data from the National UFO Reporting Center
Modified from an example made by Mike Bostock.
Last active
August 29, 2015 14:14
-
-
Save josiahdavis/ce4ba4fccbe8935944db to your computer and use it in GitHub Desktop.
UFO Sightings: Year
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #636363; | |
| shape-rendering: crispEdges; | |
| } | |
| .line { | |
| fill: none; | |
| } | |
| .overlay { | |
| fill: none; | |
| pointer-events: all; | |
| } | |
| #chart { | |
| width: 775px; | |
| position: relative; | |
| font: 14px sans-serif; | |
| } | |
| .dot { | |
| stroke: #2ca04e; | |
| stroke-width: 2; | |
| fill: #fff; | |
| } | |
| .dot:hover{ | |
| fill: #2ca04e; | |
| } | |
| .reference { | |
| stroke: #636363; | |
| stroke-width: 1.5px; | |
| } | |
| .d3-tip { | |
| line-height: 1; | |
| font: 14px sans-serif; | |
| padding: 12px; | |
| font-weight: bold; | |
| background: rgba(0, 0, 0, 0.8); | |
| color: rgb(185, 185, 185); | |
| border-radius: 2px; | |
| } | |
| /* Creates a small triangle extender for the tooltip */ | |
| .d3-tip:after { | |
| box-sizing: border-box; | |
| display: inline; | |
| font-size: 10px; | |
| width: 100%; | |
| line-height: 1; | |
| color: rgba(0, 0, 0, 0.8); | |
| content: "\25BC"; | |
| position: absolute; | |
| text-align: center; | |
| } | |
| /* Style northward tooltips differently */ | |
| .d3-tip.n:after { | |
| margin: -1px 0 0 0; | |
| top: 100%; | |
| left: 0; | |
| } | |
| </style> | |
| <body> | |
| <div id="chart"></div> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script> | |
| <script> | |
| //======================= | |
| // Initialize variables | |
| //======================= | |
| 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("%Y").parse, | |
| bisectDate = d3.bisector(function(d) { return d.year; }).left, | |
| formatValue = d3.format(",.2f"); | |
| var x = d3.time.scale() | |
| .range([0, width]); | |
| var y = d3.scale.linear() | |
| .range([height, 0]); | |
| var xAxis = d3.svg.axis() | |
| .scale(x) | |
| .orient("bottom") | |
| .tickSize(16, 0); | |
| var yAxis = d3.svg.axis() | |
| .scale(y) | |
| .orient("left"); | |
| var line = d3.svg.line() | |
| .x(function(d) { return x(d.year); }) | |
| .y(function(d) { return y(d.sightings); }); | |
| // CSS Tip: | |
| // # is used for an ID (something you use one time) | |
| // . is used for a class (something you use multiple times) | |
| 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 + ")"); | |
| var tip = d3.tip() | |
| .attr('class', 'd3-tip') | |
| .offset([-10, 0]) | |
| .html(function(d) { | |
| return "<div><span>Sightings:</span> <span style='color:white'>" + d3.round(d.sightings,0) + "</span></div>" + | |
| "<div><span>Year:</span> <span style='color:white'>" + d.year.getFullYear() + "</span></div>"; | |
| }) | |
| svg.call(tip); | |
| //======================= | |
| // Read in the data | |
| //======================= | |
| d3.csv("ufo_year.csv", function(error, data) { | |
| // Format data | |
| data.forEach(function(d) { | |
| d.year = parseDate(d.year); | |
| d.sightings = +d.sightings; | |
| }); | |
| // Compute the min and max of the arrays | |
| // d3.extent() is the equivalent of d3.min() and d3.max() | |
| //x.domain(d3.extent(data, function(d) { return d.year; })); | |
| x.domain([d3.time.format("%m-%Y").parse("07-1973"), | |
| d3.max(data, function(d) { return d.year; })]); | |
| //console.log(x.domain) | |
| //y.domain(d3.extent(data, function(d) { return d.sightings; })); | |
| y.domain([0, 8000]); | |
| //d3.max(data, function(d) { return d.sightings; })]); | |
| console.log(y.domain) | |
| //======================= | |
| // Plot the data | |
| //======================= | |
| // Add the line to the graph | |
| svg.append("path") | |
| .datum(data) | |
| .attr("class", "line") | |
| .attr("d", line) | |
| .style("stroke-width", 3) | |
| .style("stroke", "rgb(44,160,44)"); | |
| // Add the dots to the graph | |
| svg.selectAll(".dot") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", "dot") | |
| .attr("r", 5) | |
| .attr("cx", function(d) { return x(d.year); }) | |
| .attr("cy", function(d) { return y(d.sightings); }) | |
| .on('mouseover', tip.show) | |
| .on('mouseout', tip.hide); | |
| //======================= | |
| // Add the axes / call-out | |
| //======================= | |
| // Create y-axis | |
| 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"); | |
| // Create x-axis | |
| svg.append("g") | |
| .attr("class", "x axis") | |
| .attr("transform", "translate(0," + height + ")") | |
| .call(xAxis) | |
| .selectAll(".tick text") | |
| .style("text-anchor", "start") | |
| .attr("x", 5) | |
| .attr("y", 5); | |
| // Add reference text | |
| svg.append("text") | |
| .attr("x", 150) | |
| .attr("y", 270) | |
| .text("Premiere of The X-Files"); | |
| // Add reference line | |
| svg.append("line") | |
| .attr("x1", 220) | |
| .attr("y1", 280) | |
| .attr("x2", 285) | |
| .attr("y2", 345) | |
| .attr("class", "reference"); | |
| }); | |
| </script> |
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| year | sightings | |
|---|---|---|
| 1974 | 245.2 | |
| 1975 | 263.4 | |
| 1976 | 282.6 | |
| 1977 | 278.2 | |
| 1978 | 264.8 | |
| 1979 | 243.2 | |
| 1980 | 229.4 | |
| 1981 | 194.8 | |
| 1982 | 182 | |
| 1983 | 176.4 | |
| 1984 | 177.8 | |
| 1985 | 183 | |
| 1986 | 200 | |
| 1987 | 213 | |
| 1988 | 218.4 | |
| 1989 | 226.6 | |
| 1990 | 232.2 | |
| 1991 | 243 | |
| 1992 | 275.8 | |
| 1993 | 487.4 | |
| 1994 | 609.2 | |
| 1995 | 806.4 | |
| 1996 | 1093.60 | |
| 1997 | 1564.20 | |
| 1998 | 1829 | |
| 1999 | 2243.60 | |
| 2000 | 2578.80 | |
| 2001 | 2930.60 | |
| 2002 | 3143 | |
| 2003 | 3368 | |
| 2004 | 3468.60 | |
| 2005 | 3695.20 | |
| 2006 | 3921 | |
| 2007 | 3999.20 | |
| 2008 | 4077.20 | |
| 2009 | 4407.80 | |
| 2010 | 5048.80 | |
| 2011 | 5524.80 | |
| 2012 | 6251.60 | |
| 2013 | 6781.25 | |
| 2014 | 7355.33 |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment