Navigation Menu

Skip to content

Instantly share code, notes, and snippets.

@HarryStevens

HarryStevens/.block

Last active September 7, 2017 11:19
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 HarryStevens/badb12008142eeadb8617c294da190d2 to your computer and use it in GitHub Desktop.
Save HarryStevens/badb12008142eeadb8617c294da190d2 to your computer and use it in GitHub Desktop.
Download ZIP
Area Update Pattern
Raw
.block
license: gpl-3.0
Raw
README.md

Use the general update pattern to make an area shape.

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<style>
body {
margin: 0;
}
.area {
fill: steelblue;
}
</style>
</head>
<body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://unpkg.com/d3-marcon@2.0.2/build/d3-marcon.min.js"></script>
<script src="https://unpkg.com/jeezy@1.11.0/lib/jeezy.min.js"></script>
<script>
var m = d3.marcon().width(window.innerWidth).height(window.innerHeight);
m.render();
var width = m.innerWidth(), height = m.innerHeight(), svg = m.svg();
var parseTime = d3.timeParse("%d-%b-%y");
var x = d3.scaleLinear()
.rangeRound([0, width])
.domain([1, 100]);
var y = d3.scaleLinear()
.rangeRound([height, 0])
.domain([0, 100]);
var area = d3.area()
.x(function(d) { return x(d.day); })
.y1(function(d) { return y(d.value); })
.y0(y(0))
.curve(d3.curveCatmullRom.alpha(0.5));
drawChart(makeData());
d3.interval(function(){
drawChart(makeData());
}, 100);
function drawChart(data){
var area_path = svg.selectAll(".area")
.data([data], function(d, i){ return i; });
area_path
.transition()
.attr("d", area);
area_path.enter().append("path")
.attr("class", "area")
.attr("d", area);
}
function makeData(){
var arr = [];
var start = jz.num.randBetween(45, 55);
for (var i = 1; i <= 100; i++){
arr.push({day: i, value: jz.num.randBetween(start, start + 20)})
}
return arr;
}
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment