ACS_NYCHA.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
// Your code here
import { tidy, mutate, arrange, desc } from "@pbeshai/tidyjs"
//1
acs_nycha1 = tidy(
acs_nycha,
mutate({ pop15under: d => d.pop5t9P + d.popu5P + d.pop10t14P }),
arrange(desc('pop15under'))
)
//2
acs_nycha2 = tidy(
acs_nycha1,
mutate({ pop15t24: d => d.pop15t19P + d.pop20t24P }),
arrange(desc('pop15t24'))
)
//3
acs_nycha3 = tidy(
acs_nycha2,
mutate({ pop25t60: d => d.pop25t29P + d.pop30t34P + d.pop35t39P + d.pop40t44P + d.pop45t49P + d.pop50t54P + d.pop55t59P}),
arrange(desc('pop25t60'))
)
//4
acs_nycha4 = tidy(
acs_nycha3,
mutate({ pop60up: d => d.pop60t64P + d.pop65t69P + d.pop70t74P + d.pop75t79P + d.pop80t84P + d.pop85plP}),
arrange(desc('pop60up'))
)
//5
acs_nycha_clean = tidy(
acs_nycha4,
mutate({ development_cost_2: (d) => {return Number(d["DEVELOPMENT COST"].replace(/[$,]/g, ""))}
})
)
//6
acs_nycha_clean2 = tidy(
acs_nycha_clean,
mutate({ avg_monthly_gross_rent_2: (d) => {return Number(d["AVG MONTHLY GROSS RENT"].replace(/[$,]/g, ""))}
})
)
//7
acs_nycha_clean3 = tidy(
acs_nycha_clean2,
mutate({ unbuilt_area: d => (Number(d["CUBAGE CU FT"].replace(/[$,]/g, "")) - (d["BLDG COVERAGE SQ FT"].replace(/[$,]/g, "")))
})
)
// your code here
Plot.dot(acs_nycha_clean3, {
x: "pop25t60",
y: "unbuilt_area",
fill: "blue",
}).plot({
x: { label: "Population 25 to 60 yr Old" },
y: { label: "Unbuilt Area" }
})
// Your code here
Plot.dot(acs_nycha_clean3, {
x: "pop25t60",
y: "unbuilt_area",
fill: (d) => d["AVG MONTHLY GROSS RENT"]
}).plot({
color: { scheme: "blues" },
x: { label: "Population 25 to 60 yr Old" },
y: { label: "Unbuilt Area" }
})
// Your code here
Plot.dot(acs_nycha_clean3, {
x: "pop25t60",
y: "unbuilt_area",
fill: (d) => d.BOROUGH
}).plot({
color: { scheme: "cool" },
x: { label: "Population 25 to 60 yr Old" },
y: { label: "Unbuilt Area" }
})
// Your code here
Plot.rect(
acs_nycha_clean3,
Plot.bin(
{ fillOpacity: "count" },
{
x: "pop25t60",
y: "unbuilt_area",
fill: (d) => d.BOROUGH
}
)
).plot({ color: { scheme: "cool" } })
//make new column
acs_nycha_clean4 = tidy(
acs_nycha_clean3,
mutate({ pop15t24count: d => d.pop15t24/100 * d["TOTAL POPULATION"]}),
arrange(desc('pop15t24count'))
)
// Your code here
//barchart
Plot.plot({
marks: [
Plot.rectY(
acs_nycha_clean4,
Plot.binX({ y: "count" }, { x: "pop15t24count" })
),
Plot.ruleY([0])
],
grid: true,
color: { legend: true }
})
// Your code here
Plot.plot({
marks: [
Plot.rectY(
acs_nycha_clean4,
Plot.binX({ y: "count" }, { x: "pop15t24count", fill: "BOROUGH" })
),
Plot.ruleY([0])
],
grid: true,
color: { scheme: "magma", legend: true, label: "Borough" }
})
// Your code here
Plot.plot({
marks: [
Plot.rectY(
acs_nycha_clean4,
Plot.binX({ y: "count" }, { x: "pop15t24count", fill: "BOROUGH" })
),
Plot.ruleY([0]),
Plot.text(acs_nycha_clean4, {x: "pop15t24count", y: "count", text: "count", textAnchor: "end", dy: 6})
],
x: { label: "Population Between 15 and 24 Years Old" },
y: { label: "Number of Developments" },
grid: true,
color: { scheme: "magma", legend: true, label: "Borough" }
})
Boroughs = acs_nycha_clean4.map((borough) => borough.BOROUGH)
selectedborough = acs_nycha_clean4.filter((borough) => borough.BOROUGH == "BROOKLYN")
// Your code here
Plot.plot({
marks: [
Plot.rectY(
selectedborough,
Plot.binX({ y: "count" }, { x: "pop15t24count", fill: "steelblue" })
),
Plot.ruleY([0])
],
x: {
label: ` Brooklyn Population Between 15 to 24 Years Old`
},
ariaLabel: "Brooklyn Population Between 15 to 24 Years Old"
})
boroughage = {
const ages = acs_nycha_clean4.slice(1); // not sure which columns to slice?
return Object.assign(ages.flatMap(age => acs_nycha_clean4.map(d => ({borough: d.BOROUGH, ages, population_perc: d[ages] }))), {ages});
} //not sure how to build object properly with the necessary data
// Your code here
Plot.plot({
x: {
axis: null,
domain: boroughage.ages
},
y: {
grid: true,
tickFormat: "s"
},
color: {
domain: boroughage.ages,
scheme: "spectral"
},
fx: {
domain: d3.groupSort(boroughage, v => d3.sum(v, d => -d.population_perc), d => d.BOROUGH).slice(0, 6),
label: null,
tickSize: 6
},
facet: {
data: boroughage,
x: "borough"
},
marks: [
Plot.barY(boroughage, {x: "age", y: "population_perc", fill: "age", title: "age"}),
Plot.ruleY([0])
]
})
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.
