Bar Chart II: Causes of Death in Zambia

Visualizing causes of death in Zambia: II

(From the 2015 Living Conditions Survey)

Introduction

Building on the bar chart from the previous example, we’ll add some enhancements to make the chart easier to read and give us a deeper level of insight into the dataset.

The smallest improvement will be simply to adjust the angle of rotation of the x-axis tick text. Instead of rotating it clockwise 90 degrees, we’ll rotate it anticlockwise by 60 degrees, to make the text easier to read.

Speaking of axes, let’s add a y-axis. This simple level of labelling on the y-axis enables us to callibrate the bars in our mind. We can see that FEVER/MALARIA killed a little over 200 people. The bars toward the left, are closer to the axis, and so easier to sort-of-measure :).

We can improve this by adding a tooltip for each bar. Thus, when the user hovers their mouse over a bar, the tooltip will helpfully indicate the exact number of people represented by the bar.

To relax our eyes even more, let’s redo the outlines of the rectangles in white. Now the bars appear to be separated rather than touching, making the visualization less crowdy.

Fundamentals

1. We now rotate the axis tick labels by 60 degreees to make them easier to read.
2. We add an SVG <g> element to contain all the axes in the chart. By putting them all in one group, we add some order and arrangement to the SVG’s structure.
   • We move the existing x-axis to reside within the new <g>.
   • We use axis.orient(“left”) to create a y axis in the new <g>. This orientation puts the labels to the left of the axis line.
   • Notice that the x axis uses orient("bottom"), which causes those labels to appear below the axis line.
3. We use the d3.tip() library to add tooltips:
   • We use HTML <script> to include d3-tip.min.js after d3.v3.min.js
   • We use svg.call(tip) to attach the tip object to the svg, which enables the rest:
     • We use tip.show() when the user hovers their mouse on the bars
     • We use tip.html() set the content of the tooltip, based on the data bound to the bar being hovered.
     • We use tip.hide() to hide the tooltip when the user’s mouse is no longer above the bar.
   • We use HTML <link> to import d3-tip’s example styling for the tooltips.
4. We use the <style> section of the HTML document to set the fill and stroke for the the bars. While we’re at it, we make the stroke white now.

Look for the comments in the code to guide you to the new additions.

Analysis

The y axis adds much needed context to the heights of the bar chart bars. Now we can see that FEVER/MALARIA kills more than twice the number of the next cause of death, OTHER (SPECIFY).

The x-axis tick text is easier to read, but still requires effort. The tooltips provide relief by displaying the cause of death in an easy to read manner. We can also provide, using the tooltip, the exact number of people who died from that cause.

This would make a fine summary chart for an overview of Causes of Death in Zambia in 2015.

Improvements

Since d3 is changing and now has a v4 in release, there are a number of improvements and optimizations that are naturally to our advantage. Also, new documentation and examples are more and more likely to to use the new version. Let’s take this early opportunity, while the code is relatively simple, to adapt,or port, it to use d3v4.

Next, let’s update/port our code to use d3v4