Published
Edited
Oct 21, 2020
1 fork
2 stars
Insert cell
Insert cell
Insert cell
map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([42.7799, -75.7923], 6.5);
L.tileLayer(
"https://a.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}@2x.png"
).addTo(map);
const statesLayer = L.geoJson(ny, {
style: function(feature) {
return {
color: "black",
weight: .1,
fillColor: nyfill[feature.properties.ZCTA5CE10],
fillOpacity: .7
};
}
}).addTo(map);

statesLayer.bindPopup(layer => {
return layer.feature.properties.ZCTA5CE10;
});
}
Insert cell
nyfill = {
return data.reduce((acc, d) => {
const zip = `${d.RegionName}`;
acc[zip] = color(d.PriceIndex);
return acc;
}, {});
}
Insert cell
color = d3
.scaleSequential()
.domain([d3.min(data, d => d.PriceIndex), 1000000])
.interpolator(d3.interpolatePurples)
Insert cell
data = FileAttachment("cleanedodata@1.csv").csv({ typed: true })
Insert cell
ny = d3.json(
"https://raw.githubusercontent.com/OpenDataDE/State-zip-code-GeoJSON/master/ny_new_york_zip_codes_geo.min.json",
d3.autoType
)
Insert cell
path = d3.geoPath().projection(projection)
Insert cell
projection = d3.geoAlbersUsa()
Insert cell
height = 610;
Insert cell
width = 975;
Insert cell
import { legend } from "@d3/color-legend"
Insert cell
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