Bar Chart (d3v4): Causes of Death in Zambia

Visualizing causes of death in Zambia: III

From the 2015 Living Conditions Survey

Introduction

We are ready to port the bar chart from last time to use d3v4 This will give us access to the latest innovations available to us in the d3 library.

Fundamentals

1. We use the new d3.scaleBand is a special type of ordinal scale designed for bar charts like this. So we use it for the x scale.
2. We use the new d3.axisBottom for the x axis.
   • We can now remove the axis styling from the document’s <style> section.
3. We use Namespace flattening for the linear scales
4. We use v0.7.0 of d3-tip, which works with d3v4. Look for the comments in the code to guide you to the changes.

Beyond the Fundamentals

Notice that we’ve switched from nest.entries() to nest.map.entries().

Let’s break it down:

    d3.nest()
            .key(function(d) { return d.CAUSE; })
            .rollup(function(leaves) { return leaves.length; })
            .map(data)

Instead of an array of key/value pairs, this gives us a d3.map() object, where each key is the CAUSE and its value is the number of deaths. Something like:

{$ABDOMINAL PAINS: 28, $ACCIDENT: 45, $ASTHMA: 23, $BOILS: 3, ....}

with extra properties

Analysis

Now that we are using the latest version of d3, we can take advantage of the years of accummulated knowledge and experience that went into the new version. All the documentation and most of the new examples use d3v4 as their context, which means it will be more and more relevant to improving our chart.

Improvements

If you’re like me, you might remember that each row in the datset represents information, like this: {{CAUSE:"FEVER/MALARIA", AGE:"38", OTHER:"", SEX:"1"}}.

Let’s explore the dataset more deeply. Next, we’ll visualize deaths by cause by gender.