Module 6 - Time-based Data

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <title>Conditional Styling</title>
    <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>
    <style type="text/css">
      
      body {
      background-color: white;
      font-family: Helvetica, Arial, sans-serif;
      }

h1 {
      font-size: 24px;
      margin: 0;
      }

p {
      font-size: 14px;
      margin: 10px 0 0 0;
      }

svg {
      background-color: white;
      }

circle:hover {
      fill: orange;
      }

path {
      fill: gray;
      stroke: none;
      opacity: 0.1;
      }

g.highlight path {
      fill: red;
      opacity: 0.4;
      }
      
      .axis path,
      .axis line {
      fill: none;
      stroke: black;
      stroke-width: 1;
      opacity: 1;
      shape-rendering: crispEdges;
      }
      
      .axis text {
      font-family: sans-serif;
      font-size: 11px;
      }

</style>
  </head>
  <body>

<h1>Colombia Populacion Proyections by main city</h1>

<p>Colombia population proyection, 1985-2020. Source: <a href="https://www.dane.gov.co/opendata">DANE</a>, 2015</p>

//Set up scales
      var xScale = d3.time.scale().range([padding[3],w-padding[1]-padding[3]]);
      var yScale = d3.scale.linear().range([padding[0],h-padding[2]]);

//Configure axis generators
      var xAxis = d3.svg.axis().scale(xScale).orient("bottom").ticks(15).tickFormat(function(d) {
	  return dateFormat(d);
      });
      var yAxis = d3.svg.axis().scale(yScale).orient("left");

//Configure area generator
      var area = d3.svg.area().x(function(d) {
	  return xScale(dateFormat.parse(d.year));
      }).y0(h - padding[2]).y1(function(d) {
	  return yScale(+d.amount);
      });

//Create the empty SVG image
      var svg = d3.select("body").append("svg").attr("width", w).attr("height", h);

//Load data
      d3.csv("col_population.csv", function(data) {
      //New array with all the years, for referencing later
      var years = ["1985","1986","1987","1988","1989","1990","1991","1992","1993","1994","1995","1996","1997","1998","1999","2000","2001","2002","2003","2004","2005","2006","2007","2008","2009","2010","2011","2012","2013","2014","2015","2016","2017","2018","2019","2020"]
      //Create a new, empty array to hold our restructured dataset
      var dataset = [];

//Loop once for each row in data
      for (var i = 0; i < data.length; i++) {
	  //Create new object with this country's name and empty array
	  dataset[i] = {
	      city: data[i].city,
	      population: []
	  };
	  
	  //Loop through all the years
	  for (var j = 0; j < years.length; j++){
	      // If value is not empty
	      if (data[i][years[j]]){
		  dataset[i].population.push({
		      year: years[j],
		      amount: data[i][years[j]]
		  });
	      }
	  }
      }

//Set scale domains
      xScale.domain([d3.min(years, function(d) {
	  return dateFormat.parse(d);
      }),d3.max(years, function(d) {
	  return dateFormat.parse(d);
      })]);
      yScale.domain([d3.max(dataset, function(d) {
	  return d3.max(d.population, function(d) {
	      return +d.amount;
	  });}),0]);

groups.selectAll("path").data(function(d) {
	  return [d.population];
      }).enter().append("path").attr("class", "area").attr("d", area);

//Axes
      svg.append("g").attr("class", "x axis").attr("transform", "translate(0," + (h - padding[2]) + ")")
	 .call(xAxis);

svg.append("g").attr("class", "y axis").attr("transform", "translate(" + (padding[3]) + ",0)")
	 .call(yAxis);
      });

</script>
  </body>
</html>

Modified http://d3js.org/d3.v3.js to a secure url

https://d3js.org/d3.v3.js