line and axis

forked from andrewcowley's block: fresh block

<!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]);

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>

https://d3js.org/d3.v4.min.js

https://unpkg.com/axios/dist/axios.min.js