Loading

Visualize your Data

jaylandro

This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.

Visualize your Data

Jay Landro

Engineering Manager at
Mode Analytics

* formerly sdg

 

jay@modeanalytics.com
linkedin.com/in/jameslandro
codepen.io/adhocracy
landro.dev

Exploratory
TO

Explanatory

📚In her book “Storytelling with Data,” Cole Nussbaumer Knaflic points out very early on that there are really two kinds of data visualizations: exploratory and explanatory.

 

🔍 Exploratory visuals are created to help us figure out what the important things are within the data…they have an analytical purpose.

 

📣 Explanatory visuals are meant only to show us the important things…there should be little to no intended analytical value.

  • Lux-api + Jupyter UI widget
  • Automate aspects of the data exploration process
  • Even when we don't know what we are looking for
  • Specify to Lux the attributes and values of interest
  • Follow Doris Lee – http://dorisjunglinlee.com/​
# Install Lux Package

pip install lux-api


# Install Lux visualization widget for Jupyter 
# (If you are using Binder, place these in a postBuild file in the root of your repo)

jupyter nbextension install luxwidget --user --py
jupyter nbextension enable luxwidget --user --py

# Jupyter Lab Extension

jupyter labextension install @jupyter-widgets/jupyterlab-manager
jupyter labextension install luxwidget

Explore your data with LUX

CLEAN YOUR DATA

dfClean = df.drop(columns=["AverageWellBeing", "AverageLifeExpectancy"])

dfClean.rename(columns={
    "InequalityAdjustedWellbeing": "Average Wellbeing",
    "InequalityAdjustedLifeExpectancy": "Life Expectancy"
})

SPEcify INTENT

 

EXplanatory VISualization

Data we are visualizing

PRE-Processing DATA with JQ

Transform data with JQ

  • Sort by happy years
  • Rename to label & value
jq '[.data[] |
    {label: .Country, value: .HappyLifeYears}] |
    sort_by(.value) |
    reverse' hpi-explanatory.json

TRANSFORMED DATA

"data": [
    {
      "label": "Switzerland",
      "value": 59.3,
      "Footprint": 5.8
    },
    {
      "label": "Iceland",
      "value": 58,
      "Footprint": 6.4
    },
    {
      "label": "Sweden",
      "value": 57.4,
      "Footprint": 7.3
    },
    {
      "label": "Norway",
      "value": 57.1,
      "Footprint": 5
    },
    {
      "label": "Netherlands",
      "value": 57,
      "Footprint": 5.3
    },
    {
      "label": "Finland",
      "value": 54.6,
      "Footprint": 5.9
    },
    {
      "label": "Denmark",
      "value": 54.4,
      "Footprint": 5.5
    },
    {
      "label": "Austria",
      "value": 54.4,
      "Footprint": 6.1
    },
    {
      "label": "Canada",
      "value": 53.9,
      "Footprint": 8.2
    },
    {
      "label": "Australia",
      "value": 53.1,
      "Footprint": 9.3
    }
  ]
  • Rich Harris, interactive journalist
  • Insert Charts anywhere
  • Low barrier to entry

UNder the hood

<script>
import FusionCharts from 'fusioncharts';
import Charts from 'fusioncharts/fusioncharts.charts';
import FusionTheme from 'fusioncharts/themes/fusioncharts.theme.fusion';
import SvelteFC, { fcRoot } from 'svelte-fusioncharts';
import { onMount } from "svelte";

// Always set FusionCharts as the first parameter
fcRoot(FusionCharts, Charts, FusionTheme);

const dataSource = {
  "chart": {
    "caption": "Top 10 Countries by Happy Life Years",
    "yaxisname": "Years",
    "aligncaptionwithcanvas": "0",
    "plottooltext": "<b>$dataValue</b> years of happines",
    "theme": "fusion"
  },
  "data": [
    {
      "label": "Switzerland",
      "value": 59.3,
      "Footprint": 5.8
    },
    {
      "label": "Iceland",
      "value": 58,
      "Footprint": 6.4
    },
    {
      "label": "Sweden",
      "value": 57.4,
      "Footprint": 7.3
    },
    {
      "label": "Norway",
      "value": 57.1,
      "Footprint": 5
    },
    {
      "label": "Netherlands",
      "value": 57,
      "Footprint": 5.3
    },
    {
      "label": "Finland",
      "value": 54.6,
      "Footprint": 5.9
    },
    {
      "label": "Denmark",
      "value": 54.4,
      "Footprint": 5.5
    },
    {
      "label": "Austria",
      "value": 54.4,
      "Footprint": 6.1
    },
    {
      "label": "Canada",
      "value": 53.9,
      "Footprint": 8.2
    },
    {
      "label": "Australia",
      "value": 53.1,
      "Footprint": 9.3
    }
  ]
};

const chartConfigs = {
   type: 'bar2d',
   width: 600,
   height: 600,
   order: 'desc',
   dataFormat: 'json',
   dataSource
};

</script>

<SvelteFC {...chartConfigs} />

QUESTIONS?

Jay Landro

Engineering Manager at
Mode Analytics

* formerly sdg

 

jay@modeanalytics.com
linkedin.com/in/jameslandro
codepen.io/adhocracy
landro.dev
Made with Slides.com