Big walls, cities, computing, and design.
Public
Edited
Feb 23, 2023
Week 10 - deck.glSession 1.5b - Intro to D3.js: Mapping Data with D3Week 9a - Intro to D3.js: Making a ChartWeek 3 - Introduction to Exploratory Data VisualizationWeek 2b - Advanced JavascriptWeek 2a - Introduction to Javascript Part3Week 1b - Introduction to JavascriptWeek 1a - Introduction to HTML and JavascriptWeek 0 - Introduction to Observable
Week 4 - Introduction to Interactive Data Visualization and Mapping
treeData = fetch("https://data.cityofnewyork.us/resource/uvpi-gqnh.json").then(
(response) => response.json()
)
treeData
Type Table, then Shift-Enter. Ctrl-space for more options.
treeData[0].spc_common
treeSpecies = treeData.map((tree) => tree.spc_common)
uniqueTreeSpecies = new Set(treeSpecies)
viewof selectedSpecies = Inputs.select(uniqueTreeSpecies, { label: "Species" })
selectedTreeData = treeData.filter((tree) => tree.spc_common == selectedSpecies)
Plot.plot({
marks: [
Plot.rectY(
selectedTreeData,
Plot.binX({ y: "count" }, { x: "tree_dbh", fill: "steelblue" })
),
Plot.ruleY([0])
],
x: {
label: `Tree Diameter for ${selectedSpecies} species`
},
ariaLabel: "Distribution of tree diameters for selected species."
})
Inputs.range([0, 100], { label: "Amount", step: 1 })
viewof amount = Inputs.range([0, 100], { label: "Amount", step: 1 })
viewof button = Inputs.button("Click me")
viewof toggle = Inputs.toggle({ label: "Toggle", value: true })
viewof checkboxes = Inputs.checkbox(["A", "B"], {
label: "Check boxes",
value: ["A"]
})
viewof radios = Inputs.radio(["A", "B"], { label: "Radio buttons", value: "A" })
viewof date = Inputs.date({ label: "Date", value: "2022-12-22" })
viewof borough = Inputs.select(new Set(treeData.map((tree) => tree.boroname)), {
label: "Selected Borough",
value: "Queens"
})
viewof color = Inputs.color({ label: "Bars color", value: "#4682b4" })
viewof highlight = Inputs.color({ label: "Highlight color", value: "#ffa500" })
treesPerBorough = Plot.plot({
marks: [
Plot.barY(
treeData,
Plot.groupX(
{ y: "count" },
{
x: "boroname",
fill: (d) => (d.boroname === borough ? highlight : color),
sort: { x: "y", reverse: false }
}
)
),
Plot.ruleY([0])
],
marginLeft: 120,
caption: "Number of Trees per Borough",
ariaLabel: "Number of Trees per Borough"
})
viewof colorThreshold = Inputs.range([0, 60], {
step: 1,
label: "color threshold",
value: 10
})
Plot.plot({
marks: [
Plot.dot(treeData, {
x: "health",
y: "tree_dbh",
fill: (d) => d.tree_dbh > colorThreshold
})
],
y: { type: "log" },
color: { range: ["orange", "steelblue"] }
})
viewof reducer = Inputs.radio(["mean", "min", "max", "deviation", "sum"], {
value: "mean",
label: "Summary statistic (reducer):"
})
// lets update this code to color dots differently above and below a minimum amount paid
Plot.plot({
marks: [
Plot.barY(
treeData,
Plot.groupX(
{ y: reducer },
{
x: "health",
y: "tree_dbh",
fill: "boroname",
sort: { x: "y", reverse: true }
}
)
),
Plot.ruleY([0])
],
color: { legend: true }, // Include a legend for the fill color
caption: "Number of Trees per Borough"
})
nycShoreline = fetch(
"https://data.cityofnewyork.us/resource/59xk-wagz.geojson"
).then((response) => response.json())
nycBoroughs = fetch(
"https://data.cityofnewyork.us/resource/7t3b-ywvw.geojson"
).then((response) => response.json())
Plot.plot({
width: 900,
height: 600,
projection: { type: "albers", domain: nycBoroughs },
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.3 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 })
]
})
Plot.plot({
width: 900,
height: 600,
projection: { type: "albers", domain: nycBoroughs },
color: {
legend: true,
label: "Tree Radius",
type: "log",
range: ["red", "green"],
interpolate: "hcl" // uses d3.interpolateHcl
},
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.3 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 }),
Plot.dot(treeData, {
x: "longitude",
y: "latitude",
r: "tree_dbh",
// We need to parse the integers as floats to make sure we get a continuous range of colors
fill: (d) => parseFloat(d.tree_dbh)
})
]
})
Plot.plot({
width: 900,
height: 600,
projection: { type: "albers", domain: nycBoroughs },
color: {
legend: true,
label: "Tree Radius",
type: "log",
range: ["red", "green"],
interpolate: "hcl" // uses d3.interpolateHcl
},
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.3 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 }),
Plot.dot(treeData, {
x: "longitude",
y: "latitude",
r: "tree_dbh",
// We need to parse the integers as floats to make sure we get a continuous range of colors
fill: (d) => parseFloat(d.tree_dbh)
}),
Plot.dot(treeData, {
// Can you figure out what this additional Plot.dot layer adds?
x: "longitude",
y: "latitude",
r: "tree_dbh",
fill: (d) => parseFloat(d.tree_dbh),
stroke: "black",
filter: (d) => d.tree_dbh > 35
}),
Plot.text(treeData, {
// Add text to the map using data from treeData
x: "longitude", // Place text horizontally at plant longitude
y: "latitude", // Place text vertically at plant latitude
text: "spc_common", // The text that appears is the value from the spc_common column,
filter: (d) => d.tree_dbh > 35, // Only add text for trees wider than 35
fontSize: 14, // Increased font size
fontWeight: 600, // Increased font weight
stroke: "white", // Adds white outer stroke to text (for readability)
fill: "black", // Text fill color
textAnchor: "start", // Left align text with the x- and y-coordinates
dx: 15 // Shifts text to the right (starting from left alignment with coordinate)
})
]
})
viewof selectHealth = Inputs.select(
treeData.map((d) => d.health),
{
unique: true,
label: "Select tree health(s) to visualize:",
multiple: true,
value: ["Good", "Poor"]
}
)
Plot.plot({
width: 900,
height: 600,
projection: { type: "albers", domain: nycBoroughs },
color: {
legend: true,
label: "Tree Health"
},
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.3 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 }),
Plot.dot(treeData, {
x: "longitude",
y: "latitude",
r: 1,
// We need to parse the integers as floats to make sure we get a continuous range of colors
fill: "black"
}),
Plot.density(treeData, {
x: "longitude",
y: "latitude",
bandwidth: 10,
thresholds: 10,
stroke: "health",
fill: "health",
fillOpacity: 0.25,
opacity: (d) => (selectHealth.includes(d.health) ? 0.7 : 0), // (transparent unless health type selected)
mixBlendMode: "multiply",
weight: (d) => parseFloat(d.tree_dbh)
})
]
})
Plot.plot({
width: 900,
height: 600,
projection: { type: "albers", domain: nycBoroughs },
color: {
legend: true,
label: "Number of trees:",
scheme: "cool"
},
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.3 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 }),
Plot.dot(
treeData,
Plot.hexbin(
{ r: "count", fill: "count" },
{ x: "longitude", y: "latitude" }
)
)
]
})
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.
