##UFO Sightings: Time of Year II
Created using data from the National UFO Reporting Center
Modified from an example created by Mike Bostock that relies on the d3.svg.line.radial() path generator
Last active
August 29, 2015 14:15
-
-
Save josiahdavis/6d7a81fd3819278e205f to your computer and use it in GitHub Desktop.
UFO Sightings: Time of Year II
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> | |
| /* | |
| http://bl.ocks.org/mbostock/4583749 | |
| https://github.com/mbostock/d3/wiki/SVG-Shapes#line_radial | |
| TO-DO: | |
| - Convert 'rad' to range that takes dates as input and spits out 0 through 2 * PI as output | |
| - Read data from csv | |
| - Add tooltip | |
| - Create circle during hover | |
| */ | |
| .frame { | |
| fill: none; | |
| stroke: #000; | |
| } | |
| .axis text { | |
| font: 10px sans-serif; | |
| } | |
| .axis line, | |
| .axis circle { | |
| fill: none; | |
| stroke: #777; | |
| stroke-dasharray: 1,4; | |
| } | |
| .axis :last-of-type circle { | |
| stroke: #333; | |
| stroke-dasharray: none; | |
| } | |
| .line { | |
| fill: none; | |
| position: absolute; | |
| stroke-width: 2px; | |
| } | |
| /* | |
| .line:hover { | |
| fill-opacity: 0.6; | |
| stroke-width: 3px; | |
| } | |
| */ | |
| </style> | |
| <body> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| <script> | |
| var rad = d3.range(0, 2 * Math.PI, (2 * Math.PI) / 51), | |
| val2012 = [180, 124, 103, 87, 106, 93, 85, 66, 84, 92, 131, 141, 86, 94, 115, 127, 103, 84, 108, 113, 103, 107, 127, 150, 177, 190, 348, 153, 155, 134, 147, 238, 202, 168, 159, 130, 194, 140, 144, 136, 132, 148, 148, 141, 207, 193, 149, 98, 118, 136, 132, 131, 79], | |
| val2013 = [115, 75, 69, 63, 53, 62, 68, 51, 84, 85, 73, 67, 80, 90, 72, 75, 125, 109, 90, 94, 87, 165, 133, 110, 146, 121, 397, 159, 150, 136, 159, 199, 203, 176, 151, 162, 155, 142, 228, 168, 161, 161, 187, 149, 161, 168, 160, 192, 132, 130, 102, 214, 123], | |
| val2014 = [153, 100, 152, 150, 125, 115, 106, 150, 131, 90, 98, 104, 101, 133, 157, 142, 132, 152, 124, 107, 139, 140, 146, 133, 220, 181, 471, 193, 158, 140, 167, 145, 160, 203, 211, 191, 158, 176, 211, 149, 184, 172, 175, 133, 118, 119, 127, 109, 84, 119, 92, 117, 80], | |
| data2 = d3.zip(rad, val2012), | |
| data3 = d3.zip(rad, val2013), | |
| data4 = d3.zip(rad, val2014); | |
| var mon = ['January', 'February', 'March', 'April', 'May', 'June', 'July', | |
| 'August', 'September', 'October', 'November', 'December']; | |
| var width = 550, | |
| height = 500, | |
| radius = Math.min(width, height) / 2 - 50; | |
| var r = d3.scale.linear() | |
| .domain([0, 500]) | |
| .range([0, radius]); | |
| // Defining the data | |
| var line = d3.svg.line.radial() | |
| .radius(function(d) { return r(d[1]); }) | |
| .angle(function(d) { return d[0]; }); | |
| var svg = d3.select("body").append("svg") | |
| .attr("width", width) | |
| .attr("height", height) | |
| .append("g") | |
| .attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
| //================================ | |
| // Create the radial elements | |
| //================================ | |
| // Create the gr variable | |
| var gr = svg.append("g") | |
| .attr("class", "r axis") | |
| .selectAll("g") | |
| .data(r.ticks(5).slice(2)) | |
| .enter().append("g"); | |
| // Add the outer circle | |
| gr.append("circle") | |
| .attr("r", r); | |
| //// Add the labels | |
| //gr.append("text") | |
| // .attr("y", function(d) { return r(d) + 10; }) | |
| // .attr("transform", "rotate(15)") | |
| // .style("text-anchor", "middle") | |
| // .text(function(d) { return d; }); | |
| //================================ | |
| // Create the angular elements | |
| //================================ | |
| var ga = svg.append("g") | |
| .attr("class", "a axis") | |
| .selectAll("g") | |
| .data(d3.range(120,480,30).reverse()) | |
| .enter().append("g") | |
| .attr("transform", function(d) { return "rotate(" + -d + ")"; }); | |
| // Adding the radial spokes to the chart | |
| ga.append("line") | |
| .attr("x2", radius); | |
| // Adding the month labels to the chart | |
| ga.append("text") | |
| .attr("x", radius + 6) | |
| .attr("dy", ".35em") | |
| .style("text-anchor", function(d) { return d < 270 && d > 90 ? "end" : null; }) | |
| .attr("transform", function(d) { return d < 270 && d > 90 ? "rotate(180 " + (radius + 6) + ",0)" : null; }) | |
| .text(function(d, i) { return mon[i]; }); | |
| //================================ | |
| // Add the data to the chart | |
| //================================ | |
| svg.append("path") | |
| .datum(data2) | |
| .attr("class", "line") | |
| .attr("d", line) | |
| .attr("stroke", "#1f77b4"); | |
| svg.append("path") | |
| .datum(data3) | |
| .attr("class", "line") | |
| .attr("d", line) | |
| .attr("stroke", "#7f7f7f"); | |
| svg.append("path") | |
| .datum(data4) | |
| .attr("class", "line") | |
| .attr("d", line) | |
| .attr("stroke", "#d62728"); | |
| //// Version of the prior with fwd. motion incorporated | |
| //svg.append("path") | |
| // .datum(data4) | |
| // .attr("class", "line") | |
| // .attr("d", line) | |
| // .attr("stroke", "#d62728") | |
| // .on("mouseover",function(){ | |
| // var sel = d3.select(this); | |
| // sel.moveToFront(); | |
| // }); | |
| // Format the data | |
| function type(d) { | |
| d.sightings = +d.sightings; | |
| d.date = parseDate(d.date); | |
| return d; | |
| } | |
| //// Function to move the svg to the front | |
| //d3.selection.prototype.moveToFront = function() { | |
| // return this.each(function(){ | |
| // this.parentNode.appendChild(this); | |
| // }); | |
| //}; | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment