In this advanced Bar Chart example, there are both negative and positive values in the data and they are being displayed on a stacked x axis. Additionally, .time( ) is being declared in order to enable a timeline that allows changing the scope of the data being displayed.
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 data = [ | |
| {"year": 1991, "name":"alpha", "value": 15}, | |
| {"year": 1991, "name":"beta", "value": -10}, | |
| {"year": 1991, "name":"gamma", "value": 5}, | |
| {"year": 1991, "name":"delta", "value": -50}, | |
| {"year": 1992, "name":"alpha", "value": 20}, | |
| {"year": 1992, "name":"beta", "value": -10}, | |
| {"year": 1992, "name":"gamma", "value": 10}, | |
| {"year": 1992, "name":"delta", "value": -43}, | |
| {"year": 1993, "name":"alpha", "value": 30}, | |
| {"year": 1993, "name":"beta", "value": -40}, | |
| {"year": 1993, "name":"gamma", "value": 20}, | |
| {"year": 1993, "name":"delta", "value": -17}, | |
| {"year": 1994, "name":"alpha", "value": 60}, | |
| {"year": 1994, "name":"beta", "value": -60}, | |
| {"year": 1994, "name":"gamma", "value": 25}, | |
| {"year": 1994, "name":"delta", "value": -32} | |
| ] | |
| var visualization = d3plus.viz() | |
| .container("#viz") | |
| .data(data) | |
| .type("bar") | |
| .id("name") | |
| .x({"stacked": true, "value": "value"}) | |
| .y("year") | |
| .time("year") | |
| .draw() | |
| </script> |
