The Dimple.js is an object-oriented API for business analytics powered by d3.js. The aim of the dimple is to open up the power and flexibility of d3 to analysts. It aims to give a gentle learning curve and minimal code to achieve something productive.
Creating First Dimple example to understand the code.
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
var svg = dimple.newSvg("body", 800, 600);
var data = [
{ "Word":"Hello", "Awesomeness":2000 },
{ "Word":"World", "Awesomeness":3000 }
];
var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "Word");
chart.addMeasureAxis("y", "Awesomeness");
chart.addSeries(null, dimple.plot.bar);
chart.draw();
</script>
</body>Screenshot of first above code
In the addSeries method, we have none, we can also specify the column name instead of null. The second argument dimple.plot.bar, we can other dimple plot option as
- dimple.plot.area
- dimple.plot.bar
- dimple.plot.bubble
- dimple.plot.line
In the second example, we will use the addSeries method, with the first argument with column name instead of null.
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="http://dimplejs.org/dist/dimple.v2.3.0.min.js"></script>
</head>
<body>
<script type="text/javascript">
// Draw bars for region sales volume stacked by brand
var svg = dimple.newSvg("body", 600, 400);
var data = [
{ "Brand":"Coolio", "Region":"Hipsville", "Sales Volume":1000 },
{ "Brand":"Uncoolio", "Region":"Hipsville", "Sales Volume":500 },
{ "Brand":"Coolio", "Region":"Dullsville", "Sales Volume":100 },
{ "Brand":"Uncoolio", "Region":"Dullsville", "Sales Volume":2000 }
];
var myChart = new dimple.chart(svg, data);
myChart.addCategoryAxis("x", "Region");
myChart.addMeasureAxis("y", "Sales Volume");
myChart.addSeries("Brand", dimple.plot.bar);
myChart.draw();
</script>
</body>
</html>
myChart.addSeries(“Brand”, dimple.plot.bar); We can see in the graph that the brand value of same location or x-axes are added to single bar.
