Horizon chart

Example demonstrating the use of D3 Horizon Chart.

forked from kmandov's block: Drawing a single horizon chart

<!DOCTYPE html>
<meta charset="utf-8">
<style>
  .horizon {
    border-top: solid 1px #000;
    border-bottom: solid 1px #000;
    overflow: hidden;
    position: relative;
  }

.horizon + .horizon {
    border-top: none;
  }

.horizon canvas {
    display: block;
    image-rendering: pixelated;
  }

.horizon .title,
  .horizon .value {
      bottom: 0;
      line-height: 30px;
      margin: 0 6px;
      position: absolute;
      font-family: sans-serif;
      text-shadow: 0 1px 0 rgba(255,255,255,.5);
      white-space: nowrap;
  }

.horizon .title {
      left: 0;
  }

.horizon .value {
      right: 0;
  }

</style>

<body>

// generate some random data
var series = [];
for (var i = 0, variance = 0; i < 1500; i++) {
    variance += (Math.random() - 0.5) / 10;
    series.push(Math.cos(i/100) + variance);
}

var horizonChart = d3.horizonChart()
    .height(100)
    .title('Horizon, 4-band')
    .colors(['#313695', '#4575b4', '#74add1', '#abd9e9', '#fee090', '#fdae61', '#f46d43', '#d73027']);

var horizons = d3.select('body').selectAll('.horizon')
    .data([series])
    .enter().append('div')
    .attr('class', 'horizon')
    .each(horizonChart);

</script>

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

https://unpkg.com/d3-horizon-chart@0.0.5