seemantk

Built with blockbuilder.org

forked from anonymous's block: fresh block

forked from anonymous's block: balance checker

seemantk

Built with blockbuilder.org

forked from sugeerth's block: fresh block

seemantk

Built with blockbuilder.org

forked from anonymous's block: fresh block

seemantk

### Keybase proof

I hereby claim:

  * I am seemantk on github.
  * I am trinityneo303 (https://keybase.io/trinityneo303) on keybase.
  * I have a public key whose fingerprint is CE0F 2425 26C8 4682 3296  AFC0 2146 8FBC 1345 62CF

To claim this, I am signing this object:

seemantk

Something

Can we import this into blockbuilder?

A Pen by Seemant Kulleen on CodePen.

License.

seemantk

gistup

seemantk

Visualizing causes of death in Zambia: I

From the 2015 Living Conditions Survey

Introduction

In August, I presented a workshop called d3.fundamentals() at BongoHive in Lusaka, Zambia. The Zambian Government's Central Statistical Office ran a survey in 2015, to determine the Living Conditions of people throughout the country. They graciously provided anonymized datasets for us to use during the workshop.

Chinyanta Mwenya, a Zambian hacker, collaborated with me to prepare the datasets for the workshop. Chinyanta cleaned the dataset and ran statistical analysis using both Excel and R. We took some time to find a smallish dataset that was easy to understand. We settled on the unfortunately morbid Causes of Death dataset.

For the workshop I assumed a minimal knowledge of HTML and CSS, and no knowledge of Javascript (let alone any knowledge of d3). So, the workshop turned out to be, essentially From Zero to

seemantk

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 :).

seemantk

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 `

seemantk

Visualizing causes of death in Zambia: IV

From the 2015 Living Conditions Survey

Introduction

We left off with a basic bar chart in d3v4 showing the number of people who died in Zambia last year by given causes. Since our dataset is richer than that, we'll add gender to the visualization. So, we'll show:

1. As before, the total number of people who died by each cause.
2. The total number of females who died by each cause.
3. The total number of males who died by each cause.

The first thing to note in this chart is that the radio buttons above the chart enable the user to choose which subset of the data they want to see.