josiahdavis/Readme.md

## Readme.md

      
    Raw
  

              Readme.md
            
          
    ##UFO Sightings: Year
Created using data from the National UFO Reporting Center
Modified from an example made by Mike Bostock.

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

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## ufo_year.csv

          
            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
	<!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>
	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