M.P.S Data Analytics & Visualization Student @ MICA and 2020 B.S. Computer Science @ Virginia Tech
Plot.plot({
width: 975,
height: 610,
projection: "identity",
color: {
type: "quantize",
n: 9,
domain: [1, 100],
scheme: "blues",
label: "No Computer or Internet Estimate (%)",
legend: true
},
marks: [
Plot.geo(counties, Plot.centroid({
fill: d => nocomputer.get(d.id),
tip: true,
channels: {
County: d => d.properties.name,
State: d => statemap.get(d.id.slice(0,2)).properties.name
}
})),
Plot.geo(states, {stroke: "gray"})
]
})
nocomputer = new Map((await FileAttachment("data.csv").csv()).map(d => [d.id, +d["% No Computer or Internet Estimate"]]))
Plot.plot({
width: 975,
height: 610,
projection: "identity",
color: {
type: "quantize",
n: 9,
domain: [1, 100],
scheme: "blues",
label: "Crowded Conditions Estimate (%)",
legend: true
},
marks: [
Plot.geo(counties, Plot.centroid({
fill: d => crowded.get(d.id),
tip: true,
channels: {
County: d => d.properties.name,
State: d => statemap.get(d.id.slice(0,2)).properties.name
}
})),
Plot.geo(states, {stroke: "gray"})
]
})
crowded = new Map((await FileAttachment("data.csv").csv()).map(d => [d.id, +d["% Crowded Conditions Estimate"]]))
Plot.plot({
width: 975,
height: 610,
projection: "identity",
color: {
type: "quantize",
n: 9,
domain: [1, 100],
scheme: "blues",
label: "HHs with Vulnerable Jobs (%)",
legend: true
},
marks: [
Plot.geo(counties, Plot.centroid({
fill: d => jobs.get(d.id),
tip: true,
channels: {
County: d => d.properties.name,
State: d => statemap.get(d.id.slice(0,2)).properties.name
}
})),
Plot.geo(states, {stroke: "gray"})
]
})
jobs = new Map((await FileAttachment("data.csv").csv()).map(d => [d.id, +d["% HHs With Vulnerable Job Estimate"]]))
Plot.plot({
width: 975,
height: 610,
projection: "identity",
color: {
type: "quantize",
n: 9,
domain: [1, 100],
scheme: "blues",
label: "Single Parent Households (%)",
legend: true
},
marks: [
Plot.geo(counties, Plot.centroid({
fill: d => singleparent.get(d.id),
tip: true,
channels: {
County: d => d.properties.name,
State: d => statemap.get(d.id.slice(0,2)).properties.name
}
})),
Plot.geo(states, {stroke: "gray"})
]
})
singleparent = new Map((await FileAttachment("data.csv").csv()).map(d => [d.id, +d["% Single Parent Estimate"]]))
=====Plot.plot({
width: 975,
height: 610,
projection: "identity",
color: {
type: "quantize",
n: 9,
domain: [1, 100],
scheme: "blues",
label: "Poverty Estimate (%)",
legend: true
},
marks: [
Plot.geo(counties, Plot.centroid({
fill: d => poverty.get(d.id),
tip: true,
channels: {
County: d => d.properties.name,
State: d => statemap.get(d.id.slice(0,2)).properties.name
}
})),
Plot.geo(states, {stroke: "gray"})
]
})
poverty = new Map((await FileAttachment("data.csv").csv()).map(d => [d.id, +d["% Poverty (SAIPE Estimate)"]]))
us = FileAttachment("counties-albers-10m.json").json()
counties = topojson.feature(us, us.objects.counties)
states = topojson.feature(us, us.objects.states)
statemap = new Map(states.features.map(d => [d.id, d]))
statemesh = topojson.mesh(us, us.objects.states, (a, b) => a !== b)
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.
