Created
January 7, 2018 03:41
-
-
Save NPashaP/04d1fecc9a05e9c33a57717939e49a4d to your computer and use it in GitHub Desktop.
Viz - Area - transition
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
license: gpl-3.0 |
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> | |
<head> | |
<meta charset="utf-8"> | |
</head> | |
<style> | |
.viz-area .area{ | |
fill: steelblue; | |
stroke: none; | |
} | |
</style> | |
<body> | |
<svg width="960" height="600"> | |
<g transform="translate(50,50)"></g> | |
</svg> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
<script src="http://vizjs.org/viz.v1.3.0.min.js"></script> | |
<script> | |
var area = viz.area() | |
.data(randomData()) | |
.curve(d3.curveBasis) | |
.value0(function(d){ return d.value0;}) | |
.value1(function(d){ return d.value1;}) | |
d3.select("g").call(area) | |
setInterval(update,2000) | |
function update(){ | |
area.data(randomData()) | |
.valueScale(undefined) //reset the yScale so that it will be recomputed. | |
.transition() | |
} | |
function randomData(){ | |
return d3.range(20).map(function(i){ var y1= Math.random(); return {key:i, value1:y1, value0: y1*Math.random()}; }); | |
} | |
</script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment