The data resolution is higher when the height of the area chart is bigger. Details are lost when the height of the chart decreases.
Example demonstrating the use of D3 Horizon Chart.
The data resolution is higher when the height of the area chart is bigger. Details are lost when the height of the chart decreases.
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 | |
} | |
// with just 1 band in each direction (positive and negative) | |
// the horizon chart is similar to a classic area chart | |
var horizonChart = d3.horizonChart() | |
.mode('mirror') | |
.colors(["#abd9e9", "#fee090"]); // two bands: one negative, one positive | |
var horizons = d3.select('body').selectAll('.horizon') | |
.data(d3.range(0, 4).map(function() {return series;})) | |
.enter().append('div') | |
.attr('class', 'horizon') | |
.each(function(d, i) { | |
var height = 120 / (i + 1); | |
horizonChart.height(height) | |
.title('Area (' + height + 'px)') | |
.call(this, d); | |
}); | |
</script> |