Horizon charts preserve resolution even at smaller heights.
Example demonstrating the use of D3 Horizon Chart.
Horizon charts preserve resolution even at smaller heights.
Example demonstrating the use of D3 Horizon Chart.
<!DOCTYPE html> | |
<meta charset="utf-8"> | |
<style> | |
body { | |
margin: 0; | |
padding: 0; | |
} | |
.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> | |
<script src="https://d3js.org/d3.v4.js"></script> | |
<script src="https://npmcdn.com/d3-horizon-chart/build/d3-horizon-chart.min.js"></script> | |
<script> | |
// generate some random data | |
var series = []; | |
for (var i = 0, variance = 0, value; i < 1500; i++) { | |
variance += (Math.random() - 0.5) / 10; | |
series.push(Math.abs(Math.cos(i/100) + variance)); // only positive values | |
} | |
var horizonChart = d3.horizonChart(); | |
// 4-band horizon (4 negative & 4 positive bands) | |
var colors = ['#313695', '#4575b4', '#74add1', '#abd9e9', '#fee090', '#fdae61', '#f46d43', '#d73027']; | |
var n = colors.length / 2; | |
var horizons = d3.select('body').selectAll('.horizon') | |
.data(d3.range(0, n).map(function() {return series;})) | |
.enter().append('div') | |
.attr('class', 'horizon') | |
.each(function(d, i) { | |
var j = i+1; | |
horizonChart.colors(colors.slice(n-j, n+j)) | |
.height(120/j) | |
.title('Horizon, ' + j + '-band (' + 120/j + 'px)') | |
.call(this, d); | |
}); | |
</script> |