I am a Computer Scientist and Musician by training. A writer with interests in Philosophy, Economics, Technology, Politics, Business, the Arts and Fiction.
Published
Edited
Sep 29, 2020
2 stars
md`# Sri Lanka on 12 Social Dimensions`
md`## Food`
drawPersonDiagram(
[
{ label: 'Under-Nourished', value: 0.11, iconID: 'person', color: 'red' },
{ label: 'Nourished', value: 0.89, iconID: 'person', color: 'green' }
],
{
caption: 'Sri Lankan Population Undernourished',
funcFormatValue: d3.format(",.0%")
}
)
drawPersonDiagram(
[
{ label: 'Anaemic', value: 0.35, iconID: 'woman', color: 'red' },
{ label: 'Not-Anaemic', value: 0.65, iconID: 'woman', color: 'pink' }
],
{
caption: 'Sri Lankan Female Population with Anaemia',
funcFormatValue: d3.format(",.0%"),
nIcons: 51
}
)
drawPersonDiagram(
[
{ label: 'Stunted', value: 0.17, iconID: 'infant', color: 'red' },
{ label: 'Not-Stunted', value: 0.83, iconID: 'infant', color: 'green' }
],
{
caption: 'Sri Lankan, Under 5s with Stunting',
funcFormatValue: d3.format(",.0%"),
nIcons: 4
}
)
drawPersonDiagram(
[
{ label: 'Diabetes', value: 0.07, iconID: 'person', color: 'red' },
{ label: 'No Diabetes', value: 0.93, iconID: 'person', color: 'green' }
],
{
caption: 'Sri Lankan Population with Diabetes',
funcFormatValue: d3.format(",.0%")
}
)
drawPersonDiagram(
[
{ label: 'Underweight', value: 0.37, iconID: 'person', color: 'red' },
{ label: 'Not Underweight', value: 0.63, iconID: 'person', color: 'green' }
],
{
caption: 'Sri Lankan Population aged 5 to 19, Underweight',
funcFormatValue: d3.format(",.0%"),
nIcons: 12
}
)
drawPersonDiagram(
[{ label: 'People', value: 1, iconID: 'person', color: 'gray' }],
{
caption: 'Sri Lankan Population per Physician',
funcFormatValue: x => 1136,
nIcons: 1136,
width: 10,
height: 10,
iconsPerRow: 60
}
)
md`## Water & Sanitation`
drawPersonDiagram(
[
{ label: 'Don\'t Have Access', value: 0.08, iconID: 'water', color: 'red' },
{ label: 'Have Access', value: 0.92, iconID: 'water', color: 'blue' }
],
{
caption: 'Sri Lankan - Access to Safe Drinking Water',
funcFormatValue: d3.format(",.0%"),
nIcons: 100
}
)
drawPersonDiagram(
[
{
label: 'Don\'t Have Access',
value: 0.06,
iconID: 'toilet',
color: 'red'
},
{ label: 'Have Access', value: 0.94, iconID: 'toilet', color: 'green' }
],
{
caption: 'Sri Lankan - Access to Safe Sanitation',
funcFormatValue: d3.format(",.0%"),
nIcons: 100
}
)
md`## Housing`
drawPersonDiagram(
[
{ label: 'Slum Housing', value: 0.15, iconID: 'person', color: 'red' },
{ label: 'Not Slum Housing', value: 0.85, iconID: 'person', color: 'green' }
],
{
caption: 'Sri Lankan Population in Slum Housing',
funcFormatValue: d3.format(",.0%")
}
)
drawPersonDiagram(
[
{
label: 'Have No Electricity',
value: 0.04,
iconID: 'person',
color: 'red'
},
{ label: 'Have Electricity', value: 0.96, iconID: 'person', color: 'green' }
],
{
caption: 'Sri Lankan - Access to Electricity',
funcFormatValue: d3.format(",.0%")
}
)
drawPersonDiagram(
[
{
label: 'Have No Access to Clean Cooking Facilities',
value: 0.74,
iconID: 'person',
color: 'red'
},
{
label: 'Have Access to Clean Cooking Facilities',
value: 0.26,
iconID: 'person',
color: 'green'
}
],
{
caption: 'Sri Lankan - Access to Clean Cooking Facilities',
funcFormatValue: d3.format(",.0%")
}
)
drawPersonDiagram(
[
{
label: 'Below Poverty Line',
value: 0.1,
iconID: 'person',
color: 'red'
},
{
label: 'Above Poverty Line',
value: 0.9,
iconID: 'person',
color: 'green'
}
],
{
caption: 'Sri Lankan - Poverty',
funcFormatValue: d3.format(",.0%")
}
)
drawPersonDiagram(
[
{
label: 'Unemployed',
value: 0.35 * 0.21,
iconID: 'person',
color: 'red'
},
{
label: 'Employed',
value: 0.35 * 0.79,
iconID: 'person',
color: 'green'
},
{
label: 'Not in Labor Force',
value: 0.65,
iconID: 'person',
color: 'gray'
}
],
{
caption: 'Sri Lankan - Youth Unemployment',
funcFormatValue: d3.format(",.0%"),
nIcons: 21,
iconsPerRow: 10
}
)
drawPersonDiagram(
[
{
label: 'Illiterate',
value: 0.04,
iconID: 'person',
color: 'red'
},
{
label: 'Literate',
value: 0.96,
iconID: 'person',
color: 'green'
}
],
{
caption: 'Sri Lankan - Literacy',
funcFormatValue: d3.format(",.0%")
}
)
drawPersonDiagram(
[
{
label: 'No Internet Access',
value: 0.66,
iconID: 'wifi',
color: 'red'
},
{
label: 'Have Internet Access',
value: 0.34,
iconID: 'wifi',
color: 'blue'
}
],
{
caption: 'Sri Lankan - Internet Access',
funcFormatValue: d3.format(",.0%")
}
)
md`## Social Equity`
drawPersonDiagram(
[
{
label: 'Top 10%',
value: 0.33,
iconID: 'person',
color: 'blue'
},
{
label: 'Middle 80%',
value: 0.64,
iconID: 'person',
color: 'green'
},
{
label: 'Bottom 10%',
value: 0.03,
iconID: 'person',
color: 'red'
}
],
{
caption: 'Sri Lankan - Wealth',
funcFormatValue: d3.format(",.0%"),
iconsPerRow: 10
}
)
md`## Gender Equity`
drawPersonDiagram(
[
{
label: 'Male',
value: 0.95,
iconID: 'man',
color: 'blue'
},
{
label: 'Female',
value: 0.05,
iconID: 'woman',
color: 'pink'
}
],
{
caption: 'Sri Lankan - Members of Parliament by Gender',
funcFormatValue: d3.format(",.0%")
}
)
md`## Peace & Justice`
md`## Political Voice`
md`### Appendix: Code`
d3 = require('d3')
import { drawPersonDiagram } from '@nuuuwan/person-diagram'
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
