Skip to content

Instantly share code, notes, and snippets.

@tophtucker

tophtucker/index.html

Last active November 4, 2022 18:23
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save tophtucker/9969f6cb6abf2936b6d5565efe1fa3a4 to your computer and use it in GitHub Desktop.
Save tophtucker/9969f6cb6abf2936b6d5565efe1fa3a4 to your computer and use it in GitHub Desktop.
Download ZIP
Wiggly line (for Alan maybe? I forget)
Raw
index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>
svg {
overflow: visible;
}
path {
fill: red;
stroke: red;
stroke-width: 3;
}
</style>
<body>
<svg width="960" height="500"></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script>
var width = 960 - 40,
height = 500 - 40;
var data = [
[new Date(2010, 1, 1), 20],
[new Date(2010, 1, 5), 20],
[new Date(2010, 1, 5.1), 10],
[new Date(2010, 1, 6), 10],
[new Date(2010, 1, 6.1), 20],
[new Date(2010, 1, 7), 20],
[new Date(2010, 1, 7.1), 10],
[new Date(2010, 1, 10), 10],
[new Date(2010, 1, 10.1), 5],
[new Date(2010, 1, 15), 5],
[new Date(2010, 1, 15.1), 15],
[new Date(2010, 1, 20), 15]
];
var x = d3.scaleTime()
.domain(d3.extent(data.map(d => d[0])))
.range([0, width]);
var y = d3.scaleLinear()
.domain([0, d3.max(data.map(d => d[1]))])
.range([height, 0]);
var area = d3.area()
.x(function(d) { return x(d[0]); })
.y0(function(d) { return y(d[1]) + 10; })
.y1(function(d) { return y(d[1]) - 10; })
.curve(d3.curveCardinal.tension(.8));
d3.select("svg").append("g")
.attr("transform", "translate(20,20)")
.append("path")
.datum(data)
.attr("d", area)
</script>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment