D3 vertical bar chart type 1A

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: 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, 30, 510, 330);

var x = myChart.addCategoryAxis("x", "nominal");
    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 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("#00d4aa", "#00d4aa"),
      ];

    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(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 alphabetic order
 x.addOrderRule("cancerGroup");

 // Change the title text
 y.title = "Utilization";
 x.title = null;

 //change colors
 myChart.defaultColors = [
 //first color is fill, second is stroke
 new dimple.color("#00d4aa", "#00d4aa"),
 ];

 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 Group: " + 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

Leave a Reply