D3 vertical bar chart type 2B | Catherine A. Richards

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: ordinal variable
y-axis: percent variable
color-by: ordinal 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, 60, 510, 330);

var x = myChart.addCategoryAxis("x", "ordinal");
    var y = myChart.addMeasureAxis("y", "percent");
    var s = myChart.addSeries("ordinal", 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 numeric order
    x.addOrderRule("ordinal");

    // Change the title text
    y.title = "Percent";
    x.title = "Ordinal variable";

    //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 and style it
    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, 243) rotate(90)";
    });

    //style the x-axis title
    x.titleShape.style("font-size", "12px").style("font-family", "Arial")
      .style("font-weight", "bold");

// Add a title 

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 [
                 "Ordinal variable: " + data[i].ordinal,
                 "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	ordinal	percent	extraNumeric	extraString
This is the main title	This is the subtitle	1	0.4	101	AB
This is the main title	This is the subtitle	2	0.75	75	CD
This is the main title	This is the subtitle	3	0.5	65	EF
This is the main title	This is the subtitle	4	0.6	150	GH

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", "ageGroup");
    var y = myChart.addMeasureAxis("y", "percent");
    var s = myChart.addSeries("ageGroup", 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 numeric order
    x.addOrderRule("ageGroup");

    // Change the title text
    y.title = "Percent";
    x.title = "Age group (years)";

    //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 and style it
    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, 243) rotate(90)";
    });

    //style the x-axis title
    x.titleShape.style("font-size", "12px").style("font-family", "Arial")
      .style("font-weight", "bold");

// Add a title 

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 [
                 "Age group: " + data[i].ageGroup,
                 "Percent: " + data[i].percent*100 + "%",
                 "Population: " + data[i].population,
                 "Note: " + data[i].note
             ];
    }

}

// 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	ageGroup	percent	population	note
Percent...health	Results...2013	18-24 yrs	0.243	202000	Estimates...women
Percent...health	Results...2013	24-44 yrs	0.222	565000	Estimates...women
Percent...health	Results...2013	45-64 yrs	0.152	304000	Estimates...women
Percent...health	Results...2013	65+	0.09	87000	Estimates...women

Specifications

Generic example

Generic code and data

Realistic example

Realistic code and data

Share this: