D3 vertical bar chart type 2A

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: none

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(null, 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("#d40055", "#d40055"),
      ];

    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(null, 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("#d40055", "#d40055"),
      ];

    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