Horizon charts preserve resolution even at smaller heights.
Example demonstrating the use of D3 Horizon Chart.
Last active
September 26, 2016 12:27
-
-
Save kmandov/6e91165d4f32534ec4cab806b18b6684 to your computer and use it in GitHub Desktop.
Horizon charts preserve resolution at smaller heights
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment