Skip to content

Instantly share code, notes, and snippets.

@kmandov
Last active December 24, 2023 12:25
  • Star 1 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save kmandov/a1abe4aa380fb8b4bd0b4c081a76ce13 to your computer and use it in GitHub Desktop.
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>
<script src="https://d3js.org/d3.v4.js"></script>
<script src="https://unpkg.com/d3-horizon-chart@0.0.5"></script>
<script>
// 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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment