score:0

Accepted answer

Because it is the convertion rate of bitcoin compared to other coins it does not make sense to plot them all in one graph. The JPY would crush all the other bars.

Why buy/sell bitcoin using different coins if they just are conversions given the current rate.

If you draw a single coin values you get the following graph

<!DOCTYPE html>
<meta charset="utf-8">
<style>

.bar {
  fill: steelblue;
}

.bar:hover {
  fill: brown;
}

.axis--x path {
  display: none;
}

</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 40},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var x = d3.scaleBand().rangeRound([0, width]).padding(0.1),
    y = d3.scaleLinear().rangeRound([height, 0]);

var g = svg.append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.json("https://blockchain.info/ticker", function(error, data) {
  if (error) throw error;

  data = data.EUR;

  var keys = ["15m", "last", "buy", "sell"];
  x.domain(keys);
  y.domain([0, d3.max(keys, function(k) { return data[k]; })]);

  g.append("g")
      .attr("class", "axis axis--x")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x));

  g.append("g")
      .attr("class", "axis axis--y")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("price");

  g.selectAll(".bar")
    .data(keys)
    .enter().append("rect")
      .attr("class", "bar")
      .attr("x", function(k) { return x(k); })
      .attr("y", function(k) { return y(data[k]); })
      .attr("width", x.bandwidth())
      .attr("height", function(k) { return height - y(data[k]); });
});

</script>

Also not useful. Because all the variation is in the top few pixels.

What you need is a way to record the values from the JSON file over time for a particular coin and graph that like your original dataset.

Can be done by fetching the data every x minutes and then modify the graph with the enter/exit/remove data() call or just redraw the graph like this.

Place comments before the DEBUG sections for the real data. And uncomment the following line 

//setInterval(getData, 5 * 60 * 1000);

Here I generate dummy data every 5 seconds for the demo.

To prevent out of memory data length is limited to 1000 samples.

Edit

It now shows the date of the sample on the x-axis.

<!DOCTYPE html>
<style>
.p15m { stroke: steelblue;}
.pbuy { stroke: red;}
.plast { stroke: green;}
.psell { stroke: orange;}
</style>
<svg width="960" height="500"></svg>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>

var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom;

var data = [];

var x = d3.scaleTime()
    .range([0, width]);

var y = d3.scaleLinear()
    .rangeRound([height, 0]);

var line = d3.line()
    .x(function(d) { return x(d[0]); })
    .y(function(d) { return y(d[1]); });

function getData() {
   //DEBUG
   data.push( {"15m": Math.random()*100 + 100, "last": Math.random()*100 + 100, "buy": Math.random()*100 + 100, "sell": Math.random()*100 + 100, "date": new Date() } );
   updateGraph();
   return;
   // DEBUG END

  d3.json("https://blockchain.info/ticker", function(error, dataNew) {
    if (error) throw error;
    var d = dataNew.EUR;
    d.date = new Date();
    data.push();
    if (data.length > 1000) data = data.shift();
    updateGraph();
  });
}

getData();
setTimeout(getData, 5000);

//DEBUG
setInterval(getData, 5 * 1000);
//DEBUG END
//setInterval(getData, 5 * 60 * 1000);

function updateGraph() {
  if (data.length < 2) return;
  svg.select("g").remove(); // clean the graph
  var keys = ["15m", "last", "buy", "sell"];
  var g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  x.domain(d3.extent(data, d => d.date));
  var flat = [];
  data.map( d => keys.map(k => d[k]) ).forEach(e => { flat = flat.concat(e); });
  y.domain(d3.extent(flat , function(d) { return d; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price (EUR)");

  g.selectAll("g.key")
   .data(keys)
   .enter()
   .append("g")
   .attr("class", d => "key p" + d )
   .append("path")
      .datum(k => data.map( (d, i) => [d.date, d[k]]))
      .attr("fill", "none")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
}
</script>


Related Query

More Query from same tag