Public
Edited
Nov 21, 2022
Insert cell
# test3 voronoi
Insert cell
d3 = require("d3@6")
Insert cell
viewof fuelType = Inputs.radio(fuelTypes, {
value: fuelTypes[0],
label: html`<p>Alternative Fuel Type</p>`,
format: (x) =>
html`<span style="text-transform: capitalize; border-bottom: solid 2px ${x.color}; margin-bottom: -2px;">${x.name}`
})
Insert cell
{
const container = html`<div style='height:600px;' />`;

yield container;

let map = new mapboxgl.Map({
container,
center: [config.lng, config.lat],
zoom: config.zoom,
style: "mapbox://styles/mapbox/light-v10"
});
// disable map rotation using right click + drag
map.dragRotate.disable();

map.on("viewreset", function () {
render(container, map);
});
map.on("move", function () {
render(container, map);
});
map.on("render", function () {
render(container, map);
});
map.on("load", function () {
render(container, map);
});
render(container, map);

// Be careful to clean up the map's resources using \`map.remove()\` whenever
// this cell is re-evaluated.
invalidation.then(() => map.remove());
}
Insert cell
render = (container, map) => {
const pixelbbox = container.getBoundingClientRect();
const width = pixelbbox.width;
const height = pixelbbox.height;

const geobbox = map.getBounds();

const projectPoint = ([x, y]) => [
((x - geobbox._sw.lng) / (geobbox._ne.lng - geobbox._sw.lng)) * width,
height -
((y - geobbox._sw.lat) / (geobbox._ne.lat - geobbox._sw.lat)) * height
];

const points = stations.map(([x, y]) => projectPoint([x, y]));
const delaunay = d3.Delaunay.from(points);
const voronoi = delaunay.voronoi([0.5, 0.5, width - 0.5, height - 0.5]);
const voronoiPath = voronoi.render();

let canvasContainer = map.getCanvasContainer();
d3.select("svg").remove();
let svg = d3
.select(canvasContainer)
.append("svg")
.attr("width", width)
.attr("height", height);
svg.attr("style", "position: relative;");
let pathSvg = svg
.append("path")
.attr("d", voronoiPath)
.attr("stroke", fuelType.color)
.attr("stroke-width", 0.5);
points.map(([x, y]) =>
svg
.append("circle")
.attr("cx", x)
.attr("cy", y)
.attr("r", 2)
.attr("fill", fuelType.color)


);
}
Insert cell
config = ({
lng: -77.0353,
lat: 38.8895,
zoom: 10
})
Insert cell
mapboxgl = {
let mapboxgl = await require("mapbox-gl@2.8.2");
mapboxgl.accessToken =
"pk.eyJ1Ijoia2VuYnVucm9rdTQyNSIsImEiOiJjbDBmaGduazEwb2gzM2pucmJqMjlnY3BtIn0.ASCIEOOK9FAxXg0axqpj5A";

const href = await require.resolve("mapbox-gl@2.8.2/dist/mapbox-gl.css");
document.head.appendChild(html`<link href=${href} rel=stylesheet>`);
return mapboxgl;
}
Insert cell
fuelTypesORD = [
{ name: "Electric", color: color[0], code: "ELEC" },
{ name: "Biodiesel", color: color[1], code: "BD" },
{ name: "Compressed Natural Gas", color: color[2], code: "CNG" },
{ name: "Ethanol (E85)", color: color[3], code: "E85" },
{ name: "Propane (LPG)", color: color[4], code: "LPG" }
]
Insert cell
fuelTypes = [
{ name: "1976 - Original", color: color[0], code: "1976" },
{ name: "1978", color: color[1], code: "1978" },
{ name: "1983", color: color[1], code: "1983" },
{ name: "1991", color: color[1], code: "1991" },
{ name: "2004", color: color[1], code: "2004" },
]
Insert cell
color = [
"#1f77b4",
"#ff7f0e",
"#2ca02c",
"#d62728",
"#9467bd",
"#8c564b",
"#e377c2",
"#7f7f7f",
"#bcbd22",
"#17becf"
]
Insert cell
stations = {
let s = dataDCNEW.features.filter(
(d) =>
d.properties.YEAR_ADDED <= 2040

);

s = s.map((d) => {
return d.geometry.coordinates;
});
return s;
}
Insert cell
dataORIGINAL = fetch(
"https://data.cityofchicago.org/resource/f7f2-ggz5.geojson?$limit=1500"
).then((res) => res.json())
Insert cell
dataDC = fetch(
"https://maps2.dcgis.dc.gov/dcgis/rest/services/DCGIS_DATA/Transportation_WebMercator/MapServer/51/query?outFields=*&where=1%3D1&f=geojson"
).then((res) => res.json())
Insert cell
dataDCNEW = FileAttachment("dcVORstops3_testonly.geojson").json()
Insert cell
DClines = FileAttachment("DClinesFUTURE_5.geojson").json()
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