fresh block

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>
  <script>
    var data1 = 'https://api.jsonbin.io/b/5ad032c10917ce62fac60b34'

var margin = {top: 40, right: 40, bottom: 40, left: 40},
        width = 960 - margin.left - margin.right,
        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 x = d3.scaleTime()
    .range([0, width]);
  
  var y = d3.scaleLinear()
    .range([height, 0]);

var z = d3.scaleOrdinal(d3.schemeCategory10);
 
	var line = d3.line()
    .x(function(d) { return x(d.timestamp); })
    .y(function(d) { return y(d.value); });

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 delay = svg.selectAll(".delay")
    .data(delays)

delay
      .enter()
      .append("g")
      .attr("class", "delay")
      .append("path")
      .attr("class", "line")
      .attr("d", function(d) { return line(d.values); })
  		.style("stroke", function(d) { return z(d.id); });

};

getData(data1)

</script>
</body>

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

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