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

Catherine A. Richards

Epidemiologist, Real-World Data Expert and Data Viz Designer

D3 vertical bar chart type 2A

Specifications

Generic example

Generic code and data

Realistic example

Realistic code and data

Specifications

Generic example

Generic code and data

Realistic example

Realistic code and data

Share this: