Data | Info Vis | Lots of passion for building dependable interactive systems.
Published
Edited
Sep 30, 2020
1 star
md`# Food expenditure at home over 7 days in Nigeria`
spendPerHeadHistogramNational = {
const getSpendPerHead = d => d.spendPerHead
const max = d3.max(householdData, getSpendPerHead)
const quantiles = [0.5, 0.9, 0.99]
const chart = histogram(householdData, {
xProperty: 'spendPerHead',
xAxisLabel: '₦ Amount spent per head in the past 7 days - National',
xAxisTicks: d3.range(0, max, 2000),
quantiles,
step: 200,
markX: weeklyFoodExpenditure
});
return chart.width(width).render({renderer: 'svg'});
}
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
spendPerHeadHistogramState = {
const statesData = householdData.filter(d => d.state === state);
const getSpendPerHead = d => d.spendPerHead
const max = d3.max(statesData, getSpendPerHead)
const quantiles = [0.5, 0.9, 0.99]
const chart = histogram(statesData, {
xProperty: 'spendPerHead',
xAxisLabel: `₦ Amount spent per head in the past 7 days - ${state}`,
xAxisTicks: d3.range(0, max, 1000),
quantiles,
step: 100,
markX: weeklyFoodExpenditure
});
return chart.width(width).render({renderer: 'svg'});
}
weeklyFoodExpenditure = 3000
state = "Lagos"
width = 500
d3 = require("d3@5")
householdData = FileAttachment("householdData.json").json()
import { histogram, lineHistogram} from '@thehogfather/nigeria-household-survey-wave4'
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.
