JSFiddle - React, Tailwind, and code Playground

by Igor Cuckovic

HTML

<body>
<div id="graphs"></div>
</body>
<script type="text/javascript" src="http://d3js.org/d3.v2.js"></script>
<script type="text/javascript" src="http://square.github.com/cubism/cubism.v1.js"></script>

CSS

@import url(http://fonts.googleapis.com/css?family=Yanone+Kaffeesatz:400,700);
@import url(http://square.github.com/cubism/style.css);

JavaScript

var context = cubism.context().step(1e4).size(960);
var rule = context.rule();
var spectral = ["#66c2a5", "#abdda4", "#fee08b", "#f46d43", "#d53e4f", // negative scale, won't be used 
                "#66c2a5", "#abdda4", "#fee08b", "#f46d43", "#d53e4f"] 

var scale = d3.scale.quantize().domain([0,20,40,60,80,100]).range([0,20,40,60,80,100])

console.log(scale(25)); // 20
console.log(scale(47)); // 40
console.log(scale(57)); // 60
console.log(scale(70)); // 80

d3.select("#graphs").selectAll(".axis")
    .data(["top"])
  .enter().append("div")
    .attr("class", function(d) { return d + " axis"; })
    .each(function(d) { d3.select(this).call(context.axis().ticks(8).orient(d)); });

d3.select("#graphs").append("div")
    .attr("class", "rule")
    .call(rule);

d3.select("#graphs").selectAll(".horizon")
    .data(d3.range(1, 2).map(random))
  .enter().insert("div", ".bottom")
    .attr("class", "horizon")
    .call(context.horizon()
                 .height(100)
                 .scale(scale)
                 .extent([0,100])
                 .colors(spectral));

context.on("focus", function(i) {d3.selectAll(".value").style("right", i == null ? null : context.size() - i + "px") });
                   //-------------------------------------------------------------------------------------------------------------
function random(x) {
  var value = 0,
      values = [],
      i = 0,
      last;
  return context.metric(function(start, stop, step, callback) {
    start = +start, stop = +stop;
    if (isNaN(last)) last = start;
    while (last < stop) {
      last += step;
      value = Math.max(0, Math.min(100, value + 8 * Math.random() - 4 + 2 * Math.cos(i += x * .2)));
      values.push(value);
    }
    callback(null, values = values.slice((start - stop) / step));
  }, x);
}