This page contains a generic as well as a realistic example, plus code, for a vertical bar chart created using D3 and dimple libraries with the specifications as listed below.
Specifications
- x-axis: nominal variable
- y-axis: percent variable
- color-by: nominal variable
Generic example
Generic code and data
#HTML
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
/*CSS code goes here*/
</style>
<script src="d3.v3.min.js"></script>
<script src="dimple.v2.1.2.min.js"></script>
</head>
<body>
<div id="chartContainer">
<script type="text/javascript">
/*Javascript code goes here*/
</script>
</div>
</body>
</html>
#CSS
.dimple-custom-series-bar:hover
{
stroke-width: 8;
}
.dimple-custom-tooltip-label
{
font-family: Arial !important;
font-size: 12px !important;
}
.dimple-custom-axis-line
{
stroke: lightgrey !important;
}
.dimple-custom-axis-label
{
font-family: Arial !important;
font-size: 12px !important;
fill: #4d4d4d;
}
#JS
var svg = dimple.newSvg("#chartContainer",600, 450);
d3.csv("Data.csv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 30, 510, 330);
var x = myChart.addCategoryAxis("x", "nominal");
var y = myChart.addMeasureAxis("y", "percent");
var s = myChart.addSeries("nominal", dimple.plot.bar);
var title = data[0].title;
var subtitle = data[0].subtitle;
//formatting y-axis
y.showGridlines = false;
y.ticks=3;
y.overrideMax=1.0;
y.tickFormat = "%";
//sorting the x-axis variable in ascending alphabetic order
x.addOrderRule("nominal");
// Change the title text
y.title = "Title";
x.title = null;
//change colors
myChart.defaultColors = [
//first color is fill, second is stroke
new dimple.color("#c837ab", "#c837ab"),
new dimple.color("#7137c8", "#7137c8"),
new dimple.color("#00aad4", "#00aad4"),
new dimple.color("#00d4aa", "#00d4aa"),
new dimple.color("#d40055", "#d40055"),
new dimple.color("#ffcc00", "#ffcc00")
];
myChart.draw();
//re-position the y-axis title
y.titleShape.style("font-size", "12px").style("font-family", "Arial")
.style("font-weight", "bold")
.attr("transform",
function (d) {
return d3.select(this).attr("transform") + " translate(410, 235) rotate(90)";
});
// Add a title with some d3
if (title){
svg.append("text")
.attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
.attr("y", myChart._yPixels() - 30)
.style("text-anchor", "middle")
.style("font-family", "Arial")
.style("font-weight", "bold")
.text(title);
}
if (subtitle) {
svg.append("text")
.attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
.attr("y", myChart._yPixels() - 15)
.attr("text-anchor", "middle")
.style("font-weight","bold")
.style("font-family", "Arial")
.style("font-size", "14px")
.style("fill", "grey")
.text(subtitle);
}
// Override the tooltip function
s.getTooltipText = function(e) {
// Get the key of the item over which we're hovering.
var key = e.key;
// Find the datum with the corresponding key:
for (var i = 0; i < data.length; i++) {
if (data[i].key == key)
// Define the tooltip content.
return [
"Nominal variable: " + data[i].nominal,
"Percent: " + data[i].percent*100 + "%",
"Extra numeric variable: " + data[i].extraNumeric,
"Extra string variable: " + data[i].extraString
];
}
}
// Get the keys associated with each datum.
var keys = [];
for (var i = 0; i < data.length; i++) {
keys.push(s._positionData[i].key);
}
// Add each key to each datum
for (var i = 0; i < data.length; i++) {
data[i].key = keys[i];
}
});
#CSV
| title | subtitle | nominal | percent | extraNumeric | extraString |
|---|---|---|---|---|---|
| This is the main title | This is the subtitle | Apples | 0.4 | 101 | AB |
| This is the main title | This is the subtitle | Bananas | 0.75 | 75 | CD |
| This is the main title | This is the subtitle | Carrots | 0.5 | 65 | EF |
| This is the main title | This is the subtitle | Daikon | 0.6 | 150 | GH |
| This is the main title | This is the subtitle | Endive | 0.25 | 35 | IJ |
| This is the main title | This is the subtitle | Fig | 0.15 | 123 | KL |
Realistic example
Realistic code and data
#HTML
<!DOCTYPE html>
<meta charset="utf-8">
<html>
<head>
<style type="text/css">
/*CSS code goes here*/
</style>
<script src="d3.v3.min.js"></script>
<script src="dimple.v2.1.2.min.js"></script>
</head>
<body>
<div id="chartContainer">
<script type="text/javascript">
/*Javascript code goes here*/
</script>
</div>
</body>
</html>
#CSS
.dimple-custom-series-bar:hover
{
stroke-width: 8;
}
.dimple-custom-tooltip-label
{
font-family: Arial !important;
font-size: 12px !important;
}
.dimple-custom-axis-line
{
stroke: lightgrey !important;
}
.dimple-custom-axis-label
{
font-family: Arial !important;
font-size: 12px !important;
fill: #4d4d4d;
}
#JS
var svg = dimple.newSvg("#chartContainer",600, 450);
d3.csv("Data.csv", function (data) {
var myChart = new dimple.chart(svg, data);
myChart.setBounds(60, 60, 510, 330);
var x = myChart.addCategoryAxis("x", "cancerGroup");
var y = myChart.addMeasureAxis("y", "utilization");
var s = myChart.addSeries("cancerGroup", dimple.plot.bar);
var title = data[0].title;
var subtitle = data[0].subtitle;
//formatting y-axis
y.showGridlines = false;
y.ticks=3;
y.overrideMax=1.0;
y.tickFormat = "%";
//sorting the x-axis variable in ascending alphabetic order
x.addOrderRule("cancerGroup");
// Change the title text
y.title = "Percent";
x.title = null;
//change colors
myChart.defaultColors = [
//first color is fill, second is stroke
new dimple.color("#c837ab", "#c837ab"),
new dimple.color("#7137c8", "#7137c8"),
new dimple.color("#00aad4", "#00aad4"),
new dimple.color("#00d4aa", "#00d4aa"),
new dimple.color("#d40055", "#d40055"),
new dimple.color("#ffcc00", "#ffcc00")
];
myChart.draw();
//re-position the y-axis title
y.titleShape.style("font-size", "12px").style("font-family", "Arial")
.style("font-weight", "bold")
.attr("transform",
function (d) {
return d3.select(this).attr("transform") + " translate(410, 235) rotate(90)";
});
// Add a title with some d3
if (title){
svg.append("text")
.attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
.attr("y", myChart._yPixels() - 30)
.style("text-anchor", "middle")
.style("font-family", "Arial")
.style("font-weight", "bold")
.text(title);
}
if (subtitle) {
svg.append("text")
.attr("x", myChart._xPixels() + myChart._widthPixels() / 2)
.attr("y", myChart._yPixels() - 15)
.attr("text-anchor", "middle")
.style("font-weight","bold")
.style("font-family", "Arial")
.style("font-size", "14px")
.style("fill", "grey")
.text(subtitle);
}
// Override the tooltip function
s.getTooltipText = function(e) {
// Get the key of the item over which we're hovering.
var key = e.key;
// Find the datum with the corresponding key:
for (var i = 0; i < data.length; i++) {
if (data[i].key == key)
// Define the tooltip content.
return [
"Cancer: " + data[i].cancerGroup,
"Utilization: " + data[i].utilization*100 + "%",
"Population: " + data[i].population,
"Included Cancers: " + data[i].includedCancers
];
}
}
// Get the keys associated with each datum.
var keys = [];
for (var i = 0; i < data.length; i++) {
keys.push(s._positionData[i].key);
}
// Add each key to each datum
for (var i = 0; i < data.length; i++) {
data[i].key = keys[i];
}
});
#CSV
| title | subtitle | cancerGroup | utilization | population | includedCancers |
|---|---|---|---|---|---|
| Appropriate...Factor | Regional...site | Breast | 0.4 | 122 | Breast |
| Appropriate...Factor | Regional...site | Colorectal | 0.75 | 188 | Colon & rectal |
| Appropriate...Factor | Regional...site | Lung | 0.5 | 134 | Lung & bronchus |
| Appropriate...Factor | Regional...site | Prostate | 0.6 | 157 | Prostate |
| Appropriate...Factor | Regional...site | Bladder | 0.25 | 78 | Bladder |
| Appropriate...Factor | Regional...site | Pancreas | 0.15 | 112 | Pancreas |