Loading
jaylandro
This is a live streamed presentation. You will automatically follow the presenter and see the slide they're currently on.
Engineering Manager at
Mode Analytics
* formerly sdg
jay@modeanalytics.com linkedin.com/in/jameslandro codepen.io/adhocracy landro.dev
📚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.
# 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
dfClean = df.drop(columns=["AverageWellBeing", "AverageLifeExpectancy"])
dfClean.rename(columns={
"InequalityAdjustedWellbeing": "Average Wellbeing",
"InequalityAdjustedLifeExpectancy": "Life Expectancy"
})
jq '[.data[] |
{label: .Country, value: .HappyLifeYears}] |
sort_by(.value) |
reverse' hpi-explanatory.json
"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
}
]
<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} />
Engineering Manager at
Mode Analytics
* formerly sdg
jay@modeanalytics.com linkedin.com/in/jameslandro codepen.io/adhocracy landro.dev