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.
Last active
September 26, 2016 11:36
-
-
Save kmandov/5af65af3875c5c4afcdc0d675f60bb45 to your computer and use it in GitHub Desktop.
Loosing resolution when using area chart
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 | |
| } | |
| // 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> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment