Skip to content

Instantly share code, notes, and snippets.

@AdamMescher
Last active October 16, 2024 03:08
Show Gist options
  • Select an option

  • Save AdamMescher/f8540023f888c23f93c725bbcead021d to your computer and use it in GitHub Desktop.

Select an option

Save AdamMescher/f8540023f888c23f93c725bbcead021d to your computer and use it in GitHub Desktop.
Storytelling with Data - All Charts

Storytelling with Data - All Charts

All charts from Storytelling with Data written by Cole Nussbaumer Knaflic.

Data from the books is provided by the author here.

All charts completed using Highcharts. You can see live demos of simple charts here.

Knaflic mentions that the tool for visiualization doesn't matter as long as you have mastery of the tool. This is an attempt to gain and prove proficiency in recreating work with Highcharts.

When all charts are completed, they will be available to see here:

Acknowledgements

  • My timeline of thanks

Introduction

  • Figure 0.1 - A sampling of ineffective graphs

Figure 0.2 - Example 1 (before): showing data

ticket-trend-before

  • Figure 0.3 - Example 1 (after): storytelling with data
  • Figure 0.4 - Example 2 (before): showing data
  • Figure 0.5 - Example 2 (after): storytelling with data
  • Figure 0.6 - Example 3 (before): showing data
  • Figure 0.7 - Example 3 (after): storytelling with data

chapter one - the importance of context

  • Figure 1.1 - Communiction mechanism continuum

chapter two - choosing an effective visual

SWD_ch2_p36-37_fig0201a_simpleText

SWD_ch2_p36-37_fig0201b_highcharts_scatterplot

SWD_ch2_p36-37_fig0201c_highcharts_column

SWD_ch2_p36-37_fig0201d_highcharts_bar

  • Figure 2.1e - The visuals I use most (Table)

SWD_ch2_p36-37_fig0201f_highcharts_line

SWD_ch2_p36-37_fig0201d_highcharts_stackedVerticalBar

SWD_ch2_p36-37_fig0201h_highcharts_stackedBar

SWD_ch2_p36-37_fig0201g_highcharts_heatmap

Figure 2.1j - The visuals I use most (Slopegraph)

slopegraph

Figure 2.1k - The visuals I use most (Waterfall)

waterfall

Figure 2.1l - The visuals I use most (Square area)

squareArea

Simple Text

SWD_ch2_p38_fig2 2_stayAtHomeMoms_highcharts_columnChart

SWD_ch2_p38_fig0203_stayAtHomeMoms_simpleText

Tables

  • Figure 2.4 - Table borders

Heatmap

  • Figure 2.5a - Two views of the same data (table)
  • Figure 2.5b - Two view of the same data (heatmap)

Points - Scatterplot

  • Figure 2.6 - Scatterplot
  • Figure 2.7 - Modified Scatterplot

Lines

  • Figure 2.8a - Line graph, single series
  • Figure 2.8b - Line graph, two series
  • Figure 2.8c - Line graph, multiple series
  • Figure 2.9 - Showing average within a range in a line graph
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment