Big walls, cities, computing, and design.
Public
Edited
Feb 6, 2024
5800a0a2-6acd-41a3-9fe0-1bf7b038750d.csv
Type Table, then Shift-Enter. Ctrl-space for more options.
url_boston = "https://data.boston.gov/datastore/dump/5800a0a2-6acd-41a3-9fe0-1bf7b038750d?bom=True"
boston_fetched_data = d3.csv(url_boston, d3.autoType)
url = "https://data.cityofnewyork.us/resource/evjd-dqpz.csv"
// using an index to select an item from an array
boston_fetched_data[0]
// this is like extracting a column from the data
boston_fetched_data.map((d) => d.tract20_nbhd)
// calculate the minimum of a column
d3.min(boston_fetched_data.slice(1), (d) => d.P0020001)
// calculate the minimum and maximum of a column
d3.extent(boston_fetched_data.slice(1), (d) => d.P00x0001)
// get a sample of the data
sample = boston_fetched_data.filter((d) => d.P0020001 > 40000)
Math.floor(boston_fetched_data[1].hhsize)
import { tidy, mutate, arrange, desc } from "@pbeshai/tidyjs"
boston_clean_data = tidy(
boston_fetched_data,
// 1. Cast Monthly Gross Rent as Numbers
mutate({
hhsize_int: (d) => {
if (d.hhsize !== null) return Math.floor(d.hhsize);
else return 0;
}
})
)
// Type your code here:
// your code here
Plot.dot(boston_clean_data, {
x: (d) => d.P0020005 / d.P0020001,
y: "P0020001",
// This applies a function to interpolate the color values based on the total population / white population
fill: (d) => d.P0020005 / d.P0020001
}).plot({
color: { scheme: "reds" }
})
Let's color the stroke of our dots according to whether the total population is more than 40,000:
Plot.dot(boston_clean_data, {
x: (d) => d.P0020005,
y: "P0020001",
// This applies a function to interpolate the color values based on the rent/no. of rooms
fill: (d) => d.P0020001 > 40000
}).plot({
color: { range: ["orange", "steelblue"] }
})
Plot.rect(
boston_clean_data,
Plot.bin(
{ fillOpacity: "count" },
{
x: "P0020001",
y: "P0020005",
// This applies a function to interpolate the color values based on the rent/no. of rooms
fill: (d) => d.P0020001 > 40000
}
)
).plot({ color: { range: ["orange", "steelblue"] } })
Plot.plot({
marks: [
Plot.rectY(boston_clean_data, Plot.binX({ y: "count" }, { x: "P0020001" })),
Plot.ruleY([0])
],
grid: true,
color: { legend: true }
})
Plot.plot({
marks: [
Plot.rectY(
boston_clean_data,
Plot.binX({ y: "count" }, { x: "P0020001", fill: "P0020001" })
),
Plot.ruleY([0])
],
x: { label: "Total Population" },
y: { label: "Number of Neighborhoods" },
grid: true,
color: { scheme: "cool", legend: true, label: "Total Population" }
})
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.
