Data | Info Vis | Lots of passion for building dependable interactive systems.
Published
Edited
Jan 13, 2021
1 star
generateHeatMapByState(eval(selectedStrategy), allRounds.filter(isRural))
md`Here we see a view of all states and all strategies for each round.`
vl.concat(
generateGroupHeatMapByStateAllStrategies(education_r1),
generateGroupHeatMapByStateAllStrategies(education_r2),
generateGroupHeatMapByStateAllStrategies(education_r3),
generateGroupHeatMapByStateAllStrategies(education_r4),
generateGroupHeatMapByStateAllStrategies(education_r5)
).render({renderer: 'svg'})
vl.concat(
generateGroupHeatMapByStateAllStrategies(education_r1.filter(isUrban)),
generateGroupHeatMapByStateAllStrategies(education_r2.filter(isUrban)),
generateGroupHeatMapByStateAllStrategies(education_r3.filter(isUrban)),
generateGroupHeatMapByStateAllStrategies(education_r4.filter(isUrban)),
generateGroupHeatMapByStateAllStrategies(education_r5.filter(isUrban))
).render({renderer: "svg"})
vl.concat(
generateGroupHeatMapByStateAllStrategies(education_r1.filter(isRural)),
generateGroupHeatMapByStateAllStrategies(education_r2.filter(isRural)),
generateGroupHeatMapByStateAllStrategies(education_r3.filter(isRural)),
generateGroupHeatMapByStateAllStrategies(education_r4.filter(isRural)),
generateGroupHeatMapByStateAllStrategies(education_r5.filter(isRural))
).render({renderer: "svg"})
md`-----`
getStrategySortOrderByWeights = data => {
const sumWeights = strategyData => strategyData.map(d => d[strategySortOrder]).reduce((a, b) => a + b, 0);
const medianWeights = strategyData => d3.median(strategyData, d => d[strategySortOrder]);
const meanWeights = strategyData => d3.mean(strategyData, d => d[strategySortOrder])
return educationStrategies.map(d => d[1]).sort((a, b) => {
const aWeights = sumWeights(data.filter(d => d.strategy === a));
const bWeights = sumWeights(data.filter(d => d.strategy === b));
return bWeights - aWeights;
})
}
allRounds = [education_r1, education_r2, education_r3, education_r4, education_r5].flat()
function generateGroupHeatMapByStateAllStrategies(data) {
const predicates = [
[learningViaAssignments, 'Assignments'],
[learningViaEducationalRadio, 'Radio'],
[learningViaEducationalTV, 'TV'],
[learningViaMobileApps, 'Mobile apps'],
[learningViaOwnStudy, 'Study'],
[taughtByParent, 'Parent'],
[taughtByTutor, 'Tutor']
]
function getFlattenedDataForStrategy(predicate, name) {
const filtered = data.filter(predicate);
const groups = d3.group(filtered, d => d.round);
const flattenedData = Array.from(groups).map(([round, valuesForRound]) => {
const dataByState = Array.from(d3.group(valuesForRound, d => d.state)).map(([state, valuesForState]) => {
return {
state,
zone: valuesForState[0].zone,
values: valuesForRound,
round,
size: valuesForState.length,
// percentage of households who responded positively to using the strategy and are from the given state
//i.e., of those who responded to using the strategy, the proportion from the state
proportion: valuesForState.length * 100 / valuesForRound.length,
strategy: `${name}`
}
});
return dataByState;
}).flat();
return flattenedData;
}
const flattenedData = predicates.map(([predicate, name]) => getFlattenedDataForStrategy(predicate, name)).flat();
const weightedStates = getStateSortOrderByWeights(flattenedData);
const weightedStrategies = getStrategySortOrderByWeights(flattenedData)
return vl.markRect({tooltip: {content: 'data'}})
.data(flattenedData)
.encode(
vl.x().fieldN('strategy').axis({title: ''}).sort(weightedStrategies),
vl.y().fieldN('state').axis({title: ''}).sort(weightedStates),
vl.column('round').title(''),
vl.color().fieldQ(heatmapColorField).scale({scheme: "yelloworangered"})
)
}
import {select, radio } from "@jashkenas/inputs"
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.
