• Video on YouTube: Splitting Charts (Part 1): Stacked & Grouped Bar Charts (covers examples 1 - 19) Recorded at the event SF Big Analytics: D3 Visualization Workshop (Alpine Academy Series) on Oct. 21, 2015.
• Code Examples

This tutorial deals with the theme of "splitting charts", exploring how simple visualizations can be modified to support an additional dimension of data. Rectangles will be split into stacked bars, circles will be split into pies and donuts, and lines will be split apart.

Topics covered include:

• stacked bar chart
• grouped bar chart
• pie chart
• donut chart
• line chart with multiple lines

Additional "goodies" that are covered include:

• customizing a D3 number format to use "B" for billions
• rotating tick mark labels to avoid overlap on the X axis
• using d3.layout.stack

This tutorial assumes you already know the topics covered in Introduction to D3.

The data used in this tutorial begins with a single number, the current population of the World. This single number is conceptually split by country, religion, and time, deriving more complex data tables that require more complex visual presentations.

This is the kind of data you see if you Google population of China.

The following tables are derived from the United Nations Population Division. The data has been preprocessed to extract population of the largest 5 countries for each year from 1950 to 2015, then transformed using this preprocessing script

• worldPopulation2015.csv
• worldPopulationByYear.csv
• populationByCountry2015.csv
• populationByCountryByYear.csv

This data is shown in this report on The Global Religious Landscape from Pew Research. It is also shown in this interactive visualization.

The following tables are derived from the Pew Research Center Global Religious Landscape data set, using this processing script:

• populationByCountry2010.csv
• religionByCountryTop5.csv
• religionWorldTotals.csv

Sketchy preprocessing disclaimer - the original data contained values "< 10000", which were converted to "0" in the preprocessing step so the data can be visualized.

Check out the Example Viewer. Use left and right arrow keys to navigate.

• Example 1 - (run it! | index.html) - Bar Chart
• Example 2 - (run it! | index.html) - Line Chart
• Example 3 - (run it! | index.html) - Scatter Plot
• Example 4 - (run it! | index.html) - World Population Single Bar
• Example 5 - (run it! | index.html) - Custom number format
• Example 6 - (run it! | index.html) - Top 5 countries
• Example 7 - (run it! | index.html) - Religions world totals
• Example 8 - (run it! | index.html) - Small tick labels
• Example 9 - (run it! | index.html) - Tilting tick labels
• Example 10 - (run it! | index.html) - Adding color
• Example 11 - (run it! | index.html) - Introducting Stack Layout
• Example 12 - (run it! | index.html) - Splitting a rectangle
• Example 13 - (run it! | index.html) - Adding another dimension
• Example 14 - (run it! | index.html) - Introducing d3.nest
• Example 15 - (run it! | index.html) - Nesting by religion
• Example 16 - (run it! | index.html) - nest & stack
• Example 17 - (run it! | index.html) - Stacked bars
• Example 18 - (run it! | index.html) - Adding a color legend
• Example 19 - (run it! | index.html) - Grouped bars
• Example 20 - (run it! | index.html) - Getting circular
• Example 21 - (run it! | index.html) - Circles for each country
• Example 22 - (run it! | index.html) - Circles for each religion
• Example 23 - (run it! | index.html) - Adding color
• Example 24 - (run it! | index.html) - Introducing Pie Layout
• Example 25 - (run it! | index.html) - Introducing d3.svg.arc
• Example 26 - (run it! | index.html) - Pie Chart
• Example 27 - (run it! | index.html) - Adding a color legend
• Example 28 - (run it! | index.html) - Donut Chart
• Example 29 - (run it! | index.html) - Polar area diagram
• Example 30 - (run it! | index.html) - Polar area multiples
• Example 31 - (run it! | index.html) - Donut multiples
• Example 32 - (run it! | index.html) - Pie multiples
• Example 33 - (run it! | index.html) - Sized pie multiples
• Example 34 - (run it! | index.html) - Line chart of current population
• Example 35 - (run it! | index.html) - Using the population extent
• Example 36 - (run it! | index.html) - Line chart of population
• Example 37 - (run it! | index.html) - Nesting timeseries by country
• Example 38 - (run it! | index.html) - Lines for each country
• Example 39 - (run it! | index.html) - Adding color
• Example 40 - (run it! | index.html) - Area chart of World population
• Example 41 - (run it! | index.html) - Stacked area chart
• Example 42 - (run it! | index.html) - Expanded stacked area chart

Feel free to use and modify this presentation framework for your own presentations! MIT License.

By Curran Kelleher October 2015