D3 Examples - line and axis

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
<style>
​
svg {
  font: 10px sans-serif;
}
​
.axis {
  shape-rendering: crispEdges;
}
​
.x.axis path {
  fill: none;
  stroke: #000;
}
  
.line {
  fill: none;
  stroke: steelblue;
  stroke-width: 1.5px;
}
​
</style>
</head>
​
<body>
  <button id="b1">data 1</button><button id="b2">data 2</button>
  <script>
    var data1 = 'https://api.jsonbin.io/b/5ad032c10917ce62fac60b34';
        var data2 = 'https://api.jsonbin.io/b/5acefdc734fe482b8acaa21d';
    
document.getElementById('b1').addEventListener('click', function  () {
  getData(data1);
})
document.getElementById('b2').addEventListener('click', function  () {
  getData(data2);
})
    var getData = function (data) {
      axios.get(data)
    .then(function (response) {
        var data = response.data.delays;
        var delays = response.data.delays;
        var labels = ['max', 'min', 'delay'];
        var values = labels.map(function(id, i) {
          return {
            id: labels[i],
            values: delays.map(function(d) {
              return {timestamp: d.timestamp, value: d[id]};
            })
          };
        });
        update(values, data);
    })
    .catch(function (e) {
        console.log(e)
      })
    };
​
​
var margin = {top: 40, right: 40, bottom: 40, left: 40};
var width = 960 - margin.left - margin.right;
var height = 500 - margin.top - margin.bottom;
​
var svg = d3.select("body").append("svg")
  .attr("width", width + margin.left + margin.right)
  .attr("height", height + margin.top + margin.bottom)
  .append("g")
  .attr("class", "append-svg")
  .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
    
var delay = svg
    .append("g")
    .attr("class", "delay")
​
var x = d3.scaleTime()
    .range([0, width]);
  
var y = d3.scaleLinear()
    .range([height, 0]);
​
var z = d3.scaleOrdinal(d3.schemeCategory10);
 
var line = d3.line()
    .defined(function (d) {return d.value !== null})
    .x(function(d) { return x(d.timestamp); })
    .y(function(d) { return y(d.value); });
    
var xAxis = d3.axisBottom(x);
var yAxis = d3.axisLeft(y);
 
svg.append('g')
    .attr('class', 'x-axis')
    .attr('transform', 'translate(0,' + height + ')')
    .call(xAxis);
    
svg.append('g')
    .attr('class', 'y delay-axis')
    .call(yAxis);
 
var update = function (delays, data) {
​
  x.domain([data[0].timestamp, data[data.length - 1].timestamp]);
  y.domain([0, d3.max(data, function (d) {return d.delay})]);
​
  var delayLines = delay.selectAll(".line")
        .data(delays);
​
  delayLines
    .enter()
    .append("path")
    .attr("class", "line")
    .merge(delayLines)
    .attr("d", function(d) { return line(d.values); })
    .style("stroke", function(d) { return z(d.id); });
  
  delayLines.exit().remove();
​
  svg.select('.x-axis')
    .call(xAxis);
  
  svg.select('.delay-axis')
    .call(yAxis);
​
};
​
getData(data1);
​
  </script>
</body>
​
    