D3Responsive Graphs is a library of reusable and responsive graphs built with D3js and jQuery. I’m continuously adding more charts, but today I would like to show you my first contribution – D3StackedBar. D3StackedBar is a stacked bar chart with a support of negative values, responsive design, legends, tooltips, transitions, and ability to show data in a table view.
Demo
Please notice that responsiveness doesn’t work here, because the demo is inserted through iframe. However, you can open the demo in a new page.
Usage
Html:
Javascript:
container: "#stackedbar"
});
stackedbar.show();
Data Structure
Data can be obtained from AJAX GET request (if dataUrl property is used) or can be directly assigned to a data property. Data has to have the following format with all the values arrays having the same length:
{ key: "category 1", values: [{ x: 2013, y: -10 }, { x: 2014, y: 10 } ]},
{ key: "category 2", values: [{ x: 2013, y: -30 }, { x: 2014, y: 10 } ]},
{ key: "category 3", values: [{ x: 2013, y: 30 }, { x: 2014, y: 30 } ]}
]
Demo Source Code Example
<html lang="en">
<head>
<meta charset="utf-8">
<title>D3StackedBar</title>
<meta name="description" content="Demo example of D3StackedBar">
<meta name="author" content="Matous Havlena (@matoushavlena)">
<script src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<link rel="stylesheet" href="./css/d3.stackedbar.css">
<script src="./js/d3.stackedbar.js" charset="utf-8"></script>
</head>
<body>
<div id="stackedbar"></div>
<button id="button">Generate Random Dataset</button>
<script type="text/javascript">
$(document).ready(function() {
var stackedbar = new D3StackedBar({
container: "#stackedbar"
});
stackedbar.show();
$("#button").on("click", function() {
var newData = new Array();
var xDomain = [2013, 2014, 2015];
var numCategories = getRandomInt(1, 10);
for (var i=0; i<numCategories; i++) {
var category = {};
category.key = "category "+i;
category.values = new Array();
xDomain.forEach(function(domain){
category.values.push({ x: domain, y: getRandomInt(-50, 50) });
});
newData.push(category);
}
stackedbar.dataset = newData;
stackedbar.update();
});
function getRandomInt(min, max) {
return Math.floor(Math.random() * (max - min + 1)) + min;
}
});
</script>
</body>
</html>
Source Code and Documentation
There is an extensive set of options that support flexibility and reusability of the graph. Please visit my GitHub D3ResponsiveGraphs repository for up-to-date documentation and source code.
Nice library. Do you happen to know if anyone has adapted it for AngularJS?
Hi Ryan,
unfortunately I don’t know about anybody. I was planning to rewrite it in pure js, since there is no specific need for angular. But haven’t had time yet. Anyways, I would be happy if there is somebody willing to remove the jquery dependency, it should be quite easy. I also created map visualizations (US and world with the ability to easily plug another maps). Planning to update the library soon.
P.s. You can try to check C3js library. Its pretty neat too.
Matous