D3 Examples - D3 - Get data from API

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; }
 
    #chart {
      margin: 3em;
    }
    .bar {
      background-color: blue;
        height: 20px;
        margin-top: 2px;
    }
  </style>
</head>
​
<body>
  
  <svg id="chart"></svg>
  
  <script>
    var rectWidth = 10;
    var chartHeight = 400;
    var chartWidth = 700;
​
    function render(data) {
      var svg = d3.select('#chart')
        .attr('height', chartHeight)
        .attr('width', chartWidth);
​
      // bars includes update selection
      var bars = svg.selectAll('rect')
        .data(data, d => d.value);
​
      // exit
      bars.exit().remove();
​
      // enter
      var enter = bars.enter().append('rect')
        .attr('width', rectWidth)
        .attr('stroke', '#FF00FF')
        .attr('stroke-width', '2');
​
      // enter + update
      bars = enter.merge(bars)
        .attr('x', function(d, i){
          return i * rectWidth;
        })
        .attr('y', function(d){
          return chartHeight - d.value;
        })
        .attr('height', function(d){
          return d.value;
        })
        .attr('fill', 'blue');
    }
    
    var url = 'https://api.cal-adapt.org/api/series/tasmax_year_livneh/1950-01-01/2005-01-01/?pagesize=100&g=%7B%22type%22%3A%22Point%22%2C%22coordinates%22%3A%5B-121.46875%2C38.59375%5D%7D';
    
    d3.json(url, function(data){
      var tasmaxData = data.results.map(function(year){
        return {
          date: year.event,
          value: +year.image
        };
      });
      console.log(tasmaxData);
      render(tasmaxData);
    })
    
    
    
​
  </script>
</body>
​
    