Public
Edited
Dec 12, 2022
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
shells = [
"BROWN UNIVERSITY",
"Brown University",
"Brown",
"Fairview",
"Farview Inc",
"River House Holdings I LLC"
]
Insert cell
Insert cell
Insert cell
viewof properties1770File = fileInput({
title: "1770.geojson",
readAs: "localFile"
})
Insert cell
// viewof properties1770File = fileInput({
// title: "1770.geojson",
// readAs: "localFile"
// })
Insert cell
// properties1770 = properties1770File.json()
Insert cell
properties = propertyOutput.csv()
Insert cell
properties.filter((p) => p.ADDRESS.toLowerCase().replace(/,? unit.+$/, "") == '37 barnes st')
Insert cell
// propertiescustom = propertyOutputcustom.csv()
Insert cell
roads = roadsFile.json()
Insert cell
messed = new Set()
Insert cell
messed
Insert cell
d3
.sort([...new Set([...messed].map((m) => m[0]))], (d) => d.split(" ")[1])
.join("\n")
Insert cell
parcels.features.filter((f) =>
f.properties.parc_add?.toLowerCase().includes("young orchard")
)
Insert cell
farview = properties
.filter((p) => shells.includes(p.OWNER))
.flatMap((p) => {
let result = parcels.features.find(
(f) =>
f.properties.parc_add?.toLowerCase() ==
p.ADDRESS.toLowerCase()
.trim()
.replace(/, Unit.+$/, "")
);
// if (!result) {
// if (p.DATAYEAR !== "2007") messed.add([p.ADDRESS, p.DATAYEAR]);
// return [];
// }
return [
{
...result,
properties: {
address: p.ADDRESS,
owner: p.OWNER,
// value: parseInt(p.ASSMT),
year: p.DATAYEAR
}
}
];
})
Insert cell
parcels = geojsonFile.json()
Insert cell
parcels.features.filter((f) => !f.properties.ownername)
Insert cell
scale = d3
.scaleSequentialLog(d3.interpolateReds)
.domain([10e3, d3.max(farview, (d) => d.properties.value)])
.unknown("blue")

Insert cell
scaleShell = d3
.scaleSequentialLog(d3.interpolatePurples)
.domain([10e3, d3.max(farview, (d) => d.properties.value)])
.unknown("blue")

Insert cell
Legend(scale, {
title: "Property Value (2022)"
})

Insert cell
rect = (lat0, lng0, lat1, lng1) =>
[
[lat0, lng0],
[lat0, lng1],
[lat1, lng1],
[lat1, lng0]
].map((x) => x.reverse())
Insert cell
projection.scale()
Insert cell
mutable targetCentroid = [-71.40255578573417, 41.82625795004477]
Insert cell
parcels.features
.filter((f) => {
const centroid = d3.geoCentroid(f);
return (
Math.sqrt(
(centroid[0] - targetCentroid[0]) ** 2 +
(centroid[1] - targetCentroid[1]) ** 2
) < 0.00000000000001
);
})
.map((d) => d.properties)
Insert cell
bounds = ({ bottom: 41.812, left: -71.44, top: 41.850, right: -71.34 })
Insert cell
projection = d3
.geoMercator()
.center([
d3.mean([bounds.left, bounds.right]),
d3.mean([bounds.top, bounds.bottom])
])
.scale((width * 30) / (bounds.right - bounds.left))
.translate([width / 2, height / 2])
Insert cell
makeSVG = {
const tl = projection([bounds.left, bounds.top]);
const br = projection([bounds.right, bounds.bottom]);
return async (make) => {
const svg = d3
.create("svg")
.attr("viewBox", `${tl.join(" ")} ${br[0] - tl[0]} ${br[1] - tl[1]}`);
await make(svg);
return svg.node();
};
}
Insert cell
Insert cell
Insert cell
Insert cell
viewof year = Inputs.range([2002, 2022], { label: "Year", step: 2 })
Insert cell
Insert cell
viewof propertyupload1 = fileInput({
title: "Upload 1",
readAs: "localFile"
})
Insert cell
viewof propertyupload2 = fileInput({
title: "Upload 2",
readAs: "localFile"
})
Insert cell
viewof propertyupload3 = fileInput({
title: "Upload 3",
readAs: "localFile"
})
Insert cell
viewof propertyupload4 = fileInput({
title: "Upload 4",
readAs: "localFile"
})
Insert cell
viewof propertyupload5 = fileInput({
title: "Upload 5",
readAs: "localFile"
})
Insert cell
// file1 = {
// const data = await propertyupload2.json();
// data.features[0].geometry.coordinates[0].reverse()
// return data
// }
Insert cell
// propertyupload2.json()
Insert cell
mapyear = makeSVG(async (svg) =>
svg
.append("g")
.selectAll("path")
.data([
// ...addressedproperties,
// ...file1.features,
...(await propertyupload2.json()).features,
// ...(await propertyupload3.json()).features,
// ...(await propertyupload4.json()).features,
// ...(await propertyupload5.json()).features,
])
.join("path")
.attr("fill", "#59260b")
.attr("stroke", "white")
.attr("stroke-width", 0.2)
.attr("d", path)
)
Insert cell
bad = []
Insert cell
bad
Insert cell
parcels.features.filter(p => p.properties.parc_add?.includes('69 Brown')).map(p => p.properties.parc_add)
Insert cell
Insert cell
// addressedproperties = {
// let result = parcels.features.find(
// (f) =>
// f.properties.parc_add?.toLowerCase().replace(/,? unit.+$/, "") == '26 cooke st'
// );
// // if (!result) bad.push(p);
// return [
// {
// ...result,
// properties: {
// // address: p.ADDRESS
// }
// }
// ];
// }
Insert cell
mapAll = makeSVG((svg) =>
svg
.append("g")
.selectAll("path")
.data(
parcels.features.filter(
(f) => !f.properties.owner?.toLowerCase().includes("brown")
)
)
.join("path")
.attr("fill", "rgba(0, 255, 0, 0.1)")
.attr("d", path)
.append("title")
.text((f) => `${f.properties.owner} x ${f.properties.parc_add}`)
)
Insert cell
d3.geoCentroid(parcels.features[0])
Insert cell
path = d3.geoPath(projection)
Insert cell
width = 600
Insert cell
height = (width * (bounds.top - bounds.bottom)) / (bounds.right - bounds.left)
Insert cell
ratio = width / height
Insert cell
Insert cell
Insert cell
GeoTIFF = require("geotiff")
Insert cell
contours = d3
.contours()
.size([raster.width, raster.height])
.thresholds(Array.from({ length: 40 }, (_, i) => 5 * i))(
raster[0].map((d) => d * 3.1)
)
Insert cell
d3.geoEquirectangular()
Insert cell
raster = tiff.readRasters({
pool,
bbox: [...projection.invert([0, 0]), ...projection.invert([width, height])],
width,
height
})
Insert cell
pool = new GeoTIFF.Pool()
Insert cell
tiff = await GeoTIFF.fromArrayBuffer(await tiffData.arrayBuffer())
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