josiahdavis/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    ##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

  
## index.html
<!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>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!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>