D3 Examples - StarterforSM

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
     svg { border: solid 1px #333; margin: 5px;}
    .label { font-size: 20px; } 
    .line { fill: none; stroke-width: 1.5px; stroke: #000000;} 
  </style>
  <svg></svg>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
    var height = 300, width = 500;
​
    // average per-month highs in Alaska
    var title = "Alaska";
    // jan, feb, mar, apr, may, etc
    var datapoints = [57, 62, 70, 77, 84, 90, 92, 92, 87, 78, 69, 60];
​
    // y_scale: highs between 20 and 110 give us y values between 0 and 300 (height)
    // except you do it backwards because it's *distance from the top*
    var y_scale = d3.scaleLinear().domain([20,110]).range([height, 0])
​
    // x_scale: use the index of the measurement, so 57 is 0, 62 is 1, etc
    // this is because it's per-month data, jan=0, dec=11
    var x_scale = d3.scaleLinear().domain([0,11]).range([0, width])
​
    var line = d3.line()
    .x(function(d, i) { return x_scale(i); })
    .y(function(d) { return y_scale(d); });
​
    var svg = d3.select("svg")
    .attr("width", width)
    .attr("height", height)
​
    svg.append("path")
      .datum(datapoints)
      .attr("class", "line")
      .attr("d", line);
    
    svg.append("text")
      .attr('class','label')
      .attr('x', width / 2)
      .attr('y', height - 50)
      .text( function(d) {
        return 'Alaska';
      })
      .attr('text-anchor', 'middle')
  </script>
</body>
​
    