ACS_NYCHA.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
import { tidy, mutate, arrange, desc, summarize, sort, replace } from "@pbeshai/tidyjs"
// 1.1 Has a new column of the population percentage under 15 years old
Nycha1_1 = tidy
(
acs_nycha,
mutate ({ under15: d => d.popu5P + d.pop5t9P + d.pop10t14P }),
arrange (desc('under15'))
)
Nycha1_1
Type Table, then Shift-Enter. Ctrl-space for more options.
// 1.2 Has a new column of the population percentage between 15 and 24 years old
Nycha1_2 = tidy
(
acs_nycha,
mutate ({ between15_24: d => d.pop15t19P + d.pop20t24P }),
)
// 1.3 Has a new column of the population percentage between 25 and 60 years old
Nycha1_3 = tidy
(
acs_nycha,
mutate ({ between25_60: d => d.pop25t29P + d.pop30t34P + d.pop35t39P + d.pop40t44P +d.pop45t49P + d.pop50t54P + d.pop55t59P }),
)
// 1.4 Has a new column of the population percentage older than 60 years
Nycha1_4 = tidy
(
acs_nycha,
mutate ({ moreThan60: d => d.pop60t64P + d.pop65t69P + d.pop70t74P + d.pop75t79P + d.pop80t84P + d.pop85plP }),
)
// 1.5 Has a new column that formats the DEVELOPMENT COST as a number.
Nycha1_5 = tidy
(
acs_nycha,
mutate ({ developmentCosts: d => Number(d['DEVELOPMENT COST'].replace(/[$,]/g, '') )}
))
// 1.6 Has a new column that formats the AVG MONTHLY GROSS RENT as a number.
Nycha1_6 = tidy
(
acs_nycha,
mutate ({ avgRent: d => Number(d['AVG MONTHLY GROSS RENT'].replace(/[$,]/g, ''))})
)
// 1/7 Has a new column that shows the amount of unbuilt areas in a development as a number (ie. CUBAGE CU FT -BLDG COVERAGE SQ FT)
Nycha1_7 = tidy
(
acs_nycha,
mutate ({ unbuiltAreas: d => Number(d['CUBAGE CU FT'].replace(/[$,]/g, '')) - Number(d['BLDG COVERAGE SQ FT'].replace(/[$,]/g, ''))})
)
// credit to Calvin Zhong's organizational skills https://observablehq.com/d/26631bf2bb6f59ee
myPlot = tidy
(acs_nycha,
mutate({ under15: d => d.pop5t9P + d.pop10t14P + d.popu5P,
between15_24: d => d.pop15t19P + d.pop20t24P,
between25_60: d => d.pop25t29P + d.pop30t34P + d.pop35t39P + d.pop40t44P + d.pop45t49P + d.pop50t54P + d.pop55t59P,
moreThan60: d => d.pop60t64P + d.pop65t69P + d.pop70t74P + d.pop75t79P + d.pop80t84P + d.pop85plP,
allAges: d => d.popu5P + d.pop5t9P + d.pop10t14P + d.pop15t19P + d.pop20t24P + d.pop25t29P + d.pop30t34P + d.pop35t39P + d.pop40t44P + d.pop45t49P + d.pop50t54P + d.pop55t59P + d.pop60t64P + d.pop65t69P + d.pop70t74P + d.pop75t79P + d.pop80t84P + d.pop85plP,
developmentCosts: d => Number(d['DEVELOPMENT COST'].replace(/[$,]/g, '')),
avgRent: d => Number(d['AVG MONTHLY GROSS RENT'].replace(/[$,]/g, '')),
noDev: d => d.DEVELOPMENT,
unbuiltAreas: d=> Number(d['CUBAGE CU FT'].replace(/[$,]/g, '')) - Number(d['BLDG COVERAGE SQ FT'].replace(/[$,]/g, ''))}
))
myPlot
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.dot(myPlot, {
y: "between25_60",
x: "unbuiltAreas",
fill: "orange"
}).plot()
Plot.dot(myPlot, {
y: "between25_60",
x: "unbuiltAreas",
fill: (d) => d['AVG MONTHLY GROSS RENT']
}).plot({
color: { scheme: "blues" }
})
Plot.dot(myPlot, {
y: "between25_60",
x: "unbuiltAreas",
fill: (d) => d['BOROUGH']
}).plot({
color: { scheme: "oranges" }
})
// I am confused as to how to add the number of developments to the bin
Plot.rect(
myPlot,
Plot.bin(
{ fillOpacity: "count" },
{
x: "between25_60",
y: "unbuiltAreas",
fill: (d) => d.noDev > 15
}
)
).plot({ color: { range: ["orange", "steelblue"] } })
// Your code here
Plot.plot({
x: {
round: true,
label: "POPULATION BTWN 15 AND 24"
},
y: {
grid: true
},
marks: [
Plot.rectY(myPlot, Plot.binX({y: "count"}, {x: "between15_24"})),
Plot.ruleY([0])
]
})
// Your code here
Plot.plot({
color: "rdpu",
x: {
round: true,
label: "POPULATION BTWN 15 AND 24"
},
y: {
grid: true
},
marks: [
Plot.rectY(myPlot, Plot.binX({y: "count"}, {x: "between15_24", fill: "BOROUGH"})),
Plot.ruleY([0])
]
})
// I've tried different ways! Can't get it to work
Plot.plot({
color: "rdpu",
x: {
round: true,
label: "POPULATION BTWN 15 AND 24"
},
y: {
grid: true
},
marks: [
Plot.rectY(myPlot, Plot.binX({y: "count"}, {x: "between15_24", fill: "BOROUGH"})),
Plot.text(myPlot, {x: "between15_24", y: "count", text: "BOROUGH", dy: -5}),
Plot.ruleY([0])
]
})
// How do i change the color?
Plot.plot({
color: "pink",
x: {
round: true,
label: "POPULATION BTWN 15 AND 24"
},
y: {
grid: true
},
marks: [
Plot.rectY(myPlot.filter(borough=>borough.BOROUGH == "BROOKLYN"), Plot.binX({y: "count"}, {x: "between15_24", fill: "BOROUGH"})),
Plot.ruleY([0])
]
})
// Your code here
facetAge = {
const ages = myPlot.slice(1); // convert wide data to tidy data
return Object.assign(ages.flatMap(data => myPlot.map(d=> [d.under15, d.between15_24, d.between25_60, d.moreThan60])))
}
facetAge
Type Table, then Shift-Enter. Ctrl-space for more options.
Plot.plot({
x: {
domain: facetAge.ages
},
y: {
grid: true,
// tickFormat: "s"
},
color: {
//domain: facetAge.ages,
scheme: "spectral",
tickSize: 6,
facet: {
data: "ages",
x: "count"
}},
marks: [
Plot.rectY(myPlot, Plot.groupY({x: "count"}, Plot.binX({y: "count"}, {x: "between15_24", fill: "AGES"}))),
Plot.ruleY([0])
]
})
Plot.plot({
color: "pink",
x: {
round: true,
label: "POPULATION BTWN 15 AND 24"
},
y: {
grid: true
},
marks: [
Plot.rectY(myPlot.filter(borough=>borough.BOROUGH == "BROOKLYN"), Plot.binX({y: "count"}, {x: "between15_24", fill: "BOROUGH"})),
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.
