D3 Examples - Module 6 - Time-based Data

xxxxxxxxxx
 
<!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>
​
    <script type="text/javascript">     
      //Dimensions and padding
      var w = 700, h = 600;
      var padding = [ 20, 10, 50, 100 ];  //Top, right, bottom, left
      //Set up date formatting and years
      var dateFormat = d3.time.format("%Y");
​
      //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]);
​
      var groups = svg.selectAll("g").data(dataset).enter().append("g").classed("highlight", function(d) {
      if (d.city == "Cali"){
          return true;
      }else{
          return false;
      }});
      
      groups.append("title").text(function(d) {
      return d.city;
      });
​
      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>
​
    