The Stacked Area Chart, along with the other Chart Visualizations, has access to the various keys offered by the .x( ) and .y( ) methods. In this example, the .x( ) scale is changed to "share" after 2 seconds.
Featured on D3plus.org
<!doctype html> | |
<meta charset="utf-8"> | |
<script src="//d3plus.org/js/d3.js"></script> | |
<script src="//d3plus.org/js/d3plus.js"></script> | |
<div id="viz"></div> | |
<script> | |
var sample_data = [ | |
{"year": 1993, "name":"alpha", "value": 20}, | |
{"year": 1994, "name":"alpha", "value": 30}, | |
{"year": 1995, "name":"alpha", "value": 60}, | |
{"year": 1993, "name":"beta", "value": 40}, | |
{"year": 1994, "name":"beta", "value": 60}, | |
{"year": 1995, "name":"beta", "value": 10}, | |
{"year": 1994, "name":"gamma", "value": 10}, | |
{"year": 1995, "name":"gamma", "value": 40} | |
] | |
var visualization = d3plus.viz() | |
.container("#viz") | |
.data(sample_data) | |
.type("stacked") | |
.id("name") | |
.text("name") | |
.y("value") | |
.x("year") | |
.time("year") | |
.draw() | |
setTimeout(function(){ | |
visualization | |
.y({"scale": "share"}) | |
.draw() | |
},2000) // wait 2 seconds before changing the scale | |
</script> |