Public
Edited
Mar 4, 2023
Fork of PSET 4
Insert cell
Insert cell
Insert cell
Insert cell
nyc_census_income = FileAttachment("nyc_census_income.geojson").json()
Insert cell
trees2005 = fetch("https://data.cityofnewyork.us/resource/29bw-z7pj.json").then(
(response) => response.json()
)
Insert cell
trees2005
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
trees1995 = fetch("https://data.cityofnewyork.us/resource/kyad-zm4j.json").then(
(response) => response.json()
)
Insert cell
trees1995
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
trees2015 = fetch("https://data.cityofnewyork.us/resource/uvpi-gqnh.json").then(
(response) => response.json()
)
Insert cell
trees2015
Type Table, then Shift-Enter. Ctrl-space for more options.

Insert cell
nycShoreline = fetch(
"https://data.cityofnewyork.us/resource/59xk-wagz.geojson"
).then((response) => response.json())
Insert cell
nycBoroughs = fetch(
"https://data.cityofnewyork.us/resource/7t3b-ywvw.geojson"
).then((response) => response.json())
Insert cell
Insert cell
// Your code here
Plot.plot({
width: 700,
height: 800,
projection: { type: "mercator", domain: nycBoroughs },
color: {
legend: true,
label: "Tree Diameter",
color: ["orrd"],
},
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.4 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 }),
Plot.dot(selectedData.includes("1995") ? trees1995 : [] , {
x: "longitude",
y: "latitude",
r: "diameter",
fill: "diameter"
}),
Plot.dot(selectedData.includes("2005") ? trees2005 : [], {
x: "longitude",
y: "latitude",
r: "tree_dbh",
fill: (d) => parseFloat(d.tree_dbh)
}),
Plot.dot(selectedData.includes("2015") ? trees2015 : [], {
x: "longitude",
y: "latitude",
r: "tree_dbh",
fill: "spc_common"
})
]
})
Insert cell
viewof selectedData = Inputs.checkbox(["1995", "2005", "2015"], { label: "Tree Year" })
Insert cell
Insert cell
// your code here
Plot.plot({
width: 700,
height: 800,
projection: { type: "mercator", domain: nycBoroughs },
color: {
legend: true,
label: "Mean Income",
range: ["yellow", "blue"],
interpolate: "hcl" // uses d3.interpolateHcl
},
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.4 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 }),
Plot.geo(nyc_census_income.features, {stroke:"grey", strokeOpacity: 0.5, fill: d => d.properties.MeanHHInco})]})
Insert cell
Insert cell
Insert cell
Plot.plot({
width: 700,
height: 800,
projection: { type: "mercator", domain: nycBoroughs },
color: {
legend: true,
label: "Mean Income",
range: ["yellow", "blue"],
interpolate: "hcl" // uses d3.interpolateHcl
},
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.4 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 }),
Plot.geo(nyc_census_income.features, {stroke:"blue", strokeOpacity: 0.1, fill: d => tree_census.get(d.properties.NAME10).trees})
]})
Insert cell
{
trees2015.forEach( tree =>{
if (tree.census_tract) {
var cT = tree.census_tract
if (tree_census.get(cT)) {
tree_census.get(cT).trees++
}
} }
)
return tree_census
}
Insert cell
Insert cell
// Your code here
Plot.plot({
width: 700,
height: 800,
projection: { type: "mercator", domain: nycBoroughs },
color: {
legend: true,
label: "Mean Income",
range: ["yellow", "blue"],
interpolate: "hcl" // uses d3.interpolateHcl
},
marks: [
Plot.geo(nycBoroughs, { stroke: "black", strokeOpacity: 0.4 }),
Plot.geo(nycShoreline, { stroke: "blue", strokeOpacity: 0.1 }),
Plot.dot(nyc_census_income.features, {
x: "INTPTLON10",
y: "INTPTLAT10",
r: "MultiPolygon",
fill: (d) => parseFloat(d.MultiPolygon)
}),
Plot.geo(nyc_census_income.features, {stroke:"grey", strokeOpacity: 0.5, fill: d => d.properties.MeanHHInco}),
]})
Insert cell
nyc_census_income.features[0]
Insert cell
Insert cell

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.
Learn more