D3plus has the ability to create all sorts of Bar Charts. Each axis is chosen independently from one another, and data defaults to grouping along the x axis.
Featured on D3plus.org
D3plus has the ability to create all sorts of Bar Charts. Each axis is chosen independently from one another, and data defaults to grouping along the x axis.
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("year") | |
.y("value") | |
.draw() | |
</script> |