D3 Examples - step 2

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<style>
​
.axis--x path {
  display: none;
}
​
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
​
</style>
​
<svg width="960" height="500"></svg>
​
<script src="//d3js.org/d3.v4.min.js"></script>
<script>
​
var svg = d3.select("svg"),
    margin = {top: 20, right: 80, bottom: 30, left: 50},
    width = svg.attr("width") - margin.left - margin.right,
    height = svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
  
  
// 1. format date for data file   
var parseTime = d3.timeParse("%Y%m%d");
​
​
  
  
// 2. func => map date to px 
// 2.1 create a func for time
var x = d3.scaleTime()
// 2.2 set px range 
                    .range([0, width]);
  
  
  
  
// 3. func => map temperature to px 
// 2.1 create a func for numeric 
    y = d3.scaleLinear()
// 2.2 set px range     
            .range([height, 0]);
      
  
  
  
// 3. func => map city names to color 
// 2.1 create a func for color 
// 2.2  and get 10 default colors for use       
    z = d3.scaleOrdinal(d3.schemeCategory10);
​
  
  
  
// 4. func => tranform data points into points of lines
var line = d3.line()
// 4.1 keep lines smooth
    .curve(d3.curveBasis)
// 4.2 match data points to points (x, y) of line
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.temperature); });
​
​
</script>
​
    