NYCHA_Development_Data_Book.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
url = "https://data.cityofnewyork.us/resource/evjd-dqpz.csv"
nycha_fetched_data = d3.csv(url, d3.autoType)
// using an index to select an item from an array
nycha_fetched_data[0]
// this is like extracting a column from the data
nycha_fetched_data.map((d) => d.development)
// calculate the minimum of a column
d3.min(nycha_fetched_data, (d) => d.total_number_of_apartments)
// calculate the minimum and maximum of a column
d3.extent(nycha_fetched_data, (d) => d.total_population)
// get a sample of the data
sample = nycha_fetched_data.filter((d) => d.total_population > 400)
Number(nycha_fetched_data[0].avg_monthly_gross_rent.replace(/[^0-9.-]+/g, ""))
import { tidy, mutate, arrange, desc } from "@pbeshai/tidyjs"
nycha_clean_data = tidy(
nycha_fetched_data,
// 1. Cast Monthly Gross Rent as Numbers
mutate({
avg_monthly_gross_rent: (d) => {
if (d.avg_monthly_gross_rent !== null)
return Number(d.avg_monthly_gross_rent.replace(/[^0-9.-]+/g, ""));
else return 0;
}
})
)
// Type your code here:
// your code here
Plot.dot(nycha_clean_data, {
x: (d) => d.avg_monthly_gross_rent / d.avg_no_r_r_per_apartment,
y: "total_number_of_apartments",
fill: "blue"
}).plot()
Plot.dot(nycha_clean_data, {
x: (d) => d.avg_monthly_gross_rent / d.avg_no_r_r_per_apartment,
y: "total_number_of_apartments",
// This applies a function to interpolate the color values based on the rent/no. of rooms
fill: (d) => d.avg_monthly_gross_rent / d.avg_no_r_r_per_apartment
}).plot({
color: { scheme: "reds" }
})
Let's color the stroke of our dots according to whether the average gross rent is larger than $600:
Plot.dot(nycha_clean_data, {
x: (d) => d.avg_monthly_gross_rent / d.avg_no_r_r_per_apartment,
y: "total_number_of_apartments",
// This applies a function to interpolate the color values based on the rent/no. of rooms
fill: (d) => d.avg_monthly_gross_rent > 600
}).plot({
color: { range: ["orange", "steelblue"] }
})
Plot.rect(
nycha_clean_data,
Plot.bin(
{ fillOpacity: "count" },
{
x: "avg_monthly_gross_rent",
y: "total_number_of_apartments",
// This applies a function to interpolate the color values based on the rent/no. of rooms
fill: (d) => d.avg_monthly_gross_rent > 600
}
)
).plot({ color: { range: ["orange", "steelblue"] } })
Plot.plot({
marks: [
Plot.rectY(
nycha_clean_data,
Plot.binX({ y: "count" }, { x: "avg_monthly_gross_rent" })
),
Plot.ruleY([0])
],
grid: true,
color: { legend: true }
})
Plot.barX(
nycha_clean_data,
Plot.groupY(
{ x: "mean" },
{
x: "avg_monthly_gross_rent",
y: "borough",
sort: { y: "x", reverse: false }
}
)
).plot({ marginLeft: 120 })
Plot.plot({
marks: [
Plot.rectY(
nycha_clean_data,
Plot.binX(
{ y: "count" },
{ x: "avg_monthly_gross_rent", fill: "borough" }
)
),
Plot.ruleY([0])
],
x: { label: "Average Monthly Gross Rent" },
y: { label: "Number of Developments" },
grid: true,
color: { scheme: "cool", legend: true, label: "Borough" }
})
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.
