D3 Examples - fresh block1

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; }
  </style>
</head>
​
<body>
  <script>
    // Feel free to change or delete any of the code you see in this editor!
   
    var data = {
      "columns": [
        "date",
        "value"
      ],
      "values": [
        [
          "1975-01-08",
          "37001.00000000000000000000"
        ],
        [
          "1975-01-15",
          "37598.00000000000000000000"
        ],
        [
          "1975-01-22",
          "37671.00000000000000000000"
        ],
        [
          "1975-01-29",
          "37098.00000000000000000000"
        ],
        [
          "1975-02-05",
          "36877.00000000000000000000"
        ],
        [
          "1975-02-12",
          "35940.00000000000000000000"
        ],
        [
          "1975-02-19",
          "34889.00000000000000000000"
        ],
        [
          "1975-02-26",
          "34426.00000000000000000000"
        ],
        [
          "1975-03-05",
          "34725.00000000000000000000"
        ],
        [
          "1975-03-12",
          "34422.00000000000000000000"
        ]
      ]
    };
    var parseDate = d3.timeParse("%Y-%m-%d");
    var test =[];
    for(var i=0;i<data.values.length;i++){
      var item = {};
      item.date = parseDate(data.values[i][0]);
      item.value = data.values[i][1];
      test.push(item);
    }
     
    console.log(test);
    var margin = {
      top: 20,
      right: 20,
      bottom:20,
      left: 20
    };
    
    var width = 960 - margin.left - margin.right,
        height = 500 - margin.top - margin.bottom;
    
    var xscale = d3.scaleLinear().domain([0,40000])
                    .range([0, width]); 
        var limit = d3.extent(test,(d)=> d.value);
    
    var yscale = d3.scaleLinear().domain(limit)
                .range([height, 0]);
      
        var valueline = d3.line()
                    .x((d) => {
                      //console.log(d); 
                      return xscale(d.date)})
                                        .y((d) => {
                      //console.log(d[0]);
                      return yscale(d.value)});
   
      
    var svg = d3.select("body").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 + ")");
     
      
svg.append("path")
      .data([test]) 
      .attr("class", "line")
      .attr("d", valueline);
     
  </script>
  
</body>
​
    