Data | Info Vis | Lots of passion for building dependable interactive systems.
Nigerian Household: Access to Technology
lineHistogram(accessToTechnology, {
xProperty: 'age',
xAxisLabel: 'Age',
xAxisTicks: histogramXTicks,
step: 1,
colorField: 'sector'
}).width(800).render({renderer: 'svg'})
lineHistogram(accessToTechnology, {
xProperty: 'age',
xAxisLabel: 'Age',
xAxisTicks: histogramXTicks,
step: 1,
colorField: 'gender',
colorScale: {range: ['red', 'steelblue']}
}).width(800).render({renderer: 'svg'})
md`What's the composition of those without access to phone?`
lineHistogram(noPhoneAccess, {
xProperty: 'age', xAxisLabel: 'Age', xAxisTicks: d3.range(10, 100, 5), step: 1, colorField: 'gender', colorScale: {range: ['red', 'steelblue']}
}).width(800).render({renderer: 'svg'})
{
const data = Array.from(d3.group(noPhoneAccess, d => d.state).entries()).map(([state, values]) => ({state, values, size: values.length}))
return vl.markBar()
.data(data)
.encode(
vl.x().fieldN('state'),
vl.y().fieldQ('size')
).render()
}
selectUnder18 = d => d.age <=25
noPhoneAccess = accessToTechnology.filter(d => !hasAccessToPhone(d))
under18NoPhone = noPhoneAccess.filter(selectUnder18)
under18NoPhone.filter(selectFemale).length / under18NoPhone.length
over18NoPhone = noPhoneAccess.filter(d => !selectUnder18(d))
over18NoPhone.filter(selectFemale).length / over18NoPhone.length
noInternetAccess = accessToTechnology.filter( d=> !hasAccessToInternet(d))
lineHistogram(noInternetAccess, {
xProperty: 'age', xAxisLabel: 'Age', xAxisTicks: histogramXTicks, step: 1, colorField: 'gender'
}).width(800).render({renderer: 'svg'})
noPersonalDevice = accessToInternet.filter(d => !d.personalDevice)
lineHistogram(noPersonalDevice, {
xProperty: 'age', xAxisLabel: 'Age', xAxisTicks: histogramXTicks, step: 1, colorField: 'sector'
}).width(800).render({renderer: 'svg'})
lineHistogram(accessToInternet, {
xProperty: 'age', xAxisLabel: 'Age', xAxisTicks: histogramXTicks, step: 1, colorField: 'gender'
}).width(800).render({renderer: 'svg'})
noPhoneAccess.filter(selectMale).length/noPhoneAccess.length
histogram(accessToPhone.filter(selectRural), {
xProperty: 'age', xAxisLabel: 'Age', xAxisTicks: histogramXTicks, step: 1, colorField: 'sector'
}).width(800).render({renderer: 'svg'})
lineHistogram(accessToInternet, {
xProperty: 'age',
xAxisLabel: 'Age',
xAxisTicks: histogramInternetXAxisTicks,
colorField: 'gender',
colorScale: {range: ['red', 'blue']},
step: 1,
}).width(800).render({ renderer: 'svg'})
{
const rural = accessToInternet.filter(d => d.cyberCafe && d.sector === 'Rural');
const urban = accessToInternet.filter(d => d.cyberCafe && d.sector === 'Urban');
return vl.hconcat(
histogram(rural, {
xProperty: 'age',
xAxisLabel: 'Age (Rural)',
xAxisTicks: histogramInternetXAxisTicks,
step: 1,
colorField: 'gender'
}),
histogram(urban, {
xProperty: 'age',
xAxisLabel: 'Age (Urban)',
xAxisTicks: histogramInternetXAxisTicks,
step: 1,
colorField: 'gender'
})
)
.render({ renderer: 'svg'})}
md`What percentage of participants from rural/urban areas have access to phones/internet?`
getSectorProportionRow(accessToTechnology, hasAccessToPhone)
getSectorProportionRow(accessToTechnology, hasAccessToInternet)
getSectorProportionTable(hasAccessToPhone)
getSectorProportionTable(hasAccessToInternet)
function getSectorProportionTable(predicate) {
return md`| State | Rural | Urban| Combined | # Rural | # Urban |
|---|---|---|----|-----|
${states.filter(d => d != '').map(state => {
const stateData = accessToTechnology.filter(d => d.state === state)
return `|${state} | ${getSectorProportionRow(stateData, predicate)}|`
}).join('\n')}`
}
renderSectorProportionByState(accessToTechnology, hasAccessToPhone)
renderSectorProportionByState(accessToTechnology, hasAccessToInternet)
renderSectorProportionByState(accessToInternet, selectFemale)
renderSectorProportionByState(accessToPhone, selectFemale)
renderSectorProportionByState(accessToPhone, selectMale)
renderSectorProportionByState(accessToInternet, selectMale)
renderGenderProportionByState(accessToTechnology, hasAccessToPhone)
renderGenderProportionByState(accessToTechnology, hasAccessToInternet)
vl.hconcat(renderGenderProportionByZone(accessToTechnology, hasAccessToPhone),renderGenderProportionByZone(accessToTechnology, hasAccessToInternet)).config({view: {stroke: 'transparent'}}).render({renderer: "svg"})
getAccessModeTopStates(accessToInternet.filter(d => d.personalDevice))
getAccessModeTopStates(accessToInternet.filter(d => d.publicWifi))
getAccessModeTopStates(accessToInternet.filter(d => d.workplace))
getAccessModeTopStates(accessToInternet.filter(d => d.otherHousehold))
getAccessModeTopStates(accessToInternet.filter(d => d.relativeOrFriend))
getAccessModeTopStates(accessToInternet.filter(d => d.cyberCafe))
function getAccessModeTopStates(data) {
const result = Array.from(d3.group(data, d => d.state).entries()).map(([state, allValues]) => {
const groups = d3.group(allValues, d => d.accessMode);
const modeGroups = Array.from(groups.entries()).map(([key, groupValues]) => ({key, percent: 100 * groupValues.length/allValues.length})).sort((a,b) => b.percent - a.percent)
return {
state,
modeGroups ,
statePercent: 100 * allValues.length / data.length,
size: allValues.length
}}).sort((a, b) => b.size - a.size);
return result;
}
Array.from(getAccessModeForState('Zamfara').entries())
function getAccessModeForState(state) {
return d3.group(accessToInternet.filter(d => d.state === state), d => d.accessMode)
}
function getAccessModeForZone(zone) {
return d3.group(accessToInternet.filter(d => d.zone === zone), d => d.accessMode)
}
getAccessModeForZone('South South')
hasAccessToPhone = d => d.hasAccessToPhone
accessModePredicateMap = ({
"Access to Phone": hasAccessToPhone,
"Access to Internet": hasAccessToInternet,
"Access to Internet (Personal Device)": d => d.personalDevice,
"Access to Internet (Cyber cafe)": d => d.cyberCafe})
hasAccessToInternet = d => d.hasAccessToInternet
mapInternetAccessMode = (d) => {
const res = [];
if ( d.personalDevice === "1") return ('Personal Device')
if (d.otherHousehold === "1") return ("Other Household Device")
if (d.relativeOrFriend === "1") return ('Relative or Friend')
if (d.workplace === "1") return ('Workplace')
if (d.cyberCafe === "1") return ('Cyber Cafe')
if (d.publicWifi === "1") return ('Public Wifi')
if (d.other === "1") return (d.otherSpecified)
return res.join(',')
}
accessToTechnologyAllAges = d3.csvParse( await FileAttachment("access_to_tech.csv").text()).map(d => ({
...d,
age: +d.age,
gender: getGender(d.gender),
state: states[d.state],
sector: sectors[d.sector],
zone: zones[d.zone],
hasAccessToPhone: toBoolean(d.hasAccessToPhone),
phoneAccessModeRaw: d.phoneAccessMode,
phoneAccessMode: mapPhoneAccessMode(d.phoneAccessMode),
hasAccessToInternet: toBoolean(d.hasAccessToInternet),
personalDevice: toBoolean(d.personalDevice),
otherHousehold: toBoolean(d.otherHousehold),
relativeOrFriend: toBoolean(d.relativeOrFriend),
workplace: toBoolean(d.workplace),
cyberCafe: toBoolean(d.cyberCafe),
publicWifi: toBoolean(d.publicWifi),
other: toBoolean(d.other),
accessMode: mapInternetAccessMode(d)
}))
graph = buildSankeyGraph()
color = d3.scaleOrdinal(d3.schemeCategory10)
sankeyFactors = [/*"sector", 'gender','hasAccessToInternet',*/ 'accessMode', 'zone']
removeLinks = d => (d.target !== undefined && d.source !== undefined)
accessToInternetFemale.filter(d => d.personalDevice)
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
nodeSortOrder = ['sector:Urban', 'sector:Rural','hasAccessToInternet:false', 'hasAccesstoInternet:true', 'gender:Male', 'gender:Female','accessMode:Personal Device', 'accessMode:Other Household Device','accessMode:Relative or Friend', 'accessMode:Cyber Cafe', 'accessMode:Workplace', 'accessMode:Public Wifi', 'accessMode:Unknown']
sankey = d3.sankey()
.nodeSort((a, b) => nodeSortOrder.indexOf(a.name) - nodeSortOrder.indexOf(b.name))
.linkSort((a, b) => nodeSortOrder.indexOf(a.names[a.names.length -1]) - nodeSortOrder.indexOf(b.names[b.names.length -1]))
.nodeWidth(4)
.nodePadding(20)
.nodeAlign(d3.sankeyLeft)
.extent([[0, 5], [width, height - 5]])
height = 500
selectFemale = d => d.gender === 'Female'
selectMale = d => d.gender === "Male"
selectUrban = d => d.sector === "Urban"
selectRural = d => d.sector === "Rural"
getHHID = d => d.hhid
getGender = num => num === "1" ? "Male" : num === "2" ? "Female" : "Other"
accessToPhone = accessToTechnology.filter(d => d.hasAccessToPhone)
accessToInternetFemale = accessToInternet.filter(selectFemale)
accessToInternetUrban = accessToInternet.filter(selectUrban)
indivPointCache = {return {}}
toBoolean = d => d === "1" ? true : false
d3 = require("d3@6", "d3-sankey@0.12")
import { statesGeoJSON } from '@thehogfather/nigeria-geojson'
turf = require('@turf/turf')
import {states, sectors, zones, histogram, lineHistogram } from '@thehogfather/nigeria-household-survey-wave4'
import {vl} from '@vega/vega-lite-api'
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.
