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

100

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

100

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

Catherine A. Richards

Epidemiologist, Real-World Data Expert and Data Viz Designer

D3 vertical bar chart type 1A

Specifications

Generic example

Generic code and data

Realistic example

Realistic code and data

Leave a ReplyCancel reply

Specifications

Generic example

Generic code and data

Realistic example

Realistic code and data

Share this:

Leave a ReplyCancel reply