Public
Edited
Dec 24, 2020
Insert cell
Insert cell
chicagoSvg(chicagoGeoJson)
Insert cell
chicagoSvg = function(geoJsonFeaturesCollection) {
const height = 1.3 * width;
const projection = d3.geoTransverseMercator()
.rotate([88 + 20 / 60, -36 - 40 / 60]) // NAD83 / Illinois East (EPSG:26971) state plan
.fitSize([width, height], geoJsonFeaturesCollection);

const pathGenerator = d3.geoPath()
.projection(projection);
const svg = d3.create('svg')
.attr("viewBox", [0, 0, width, height]);

const g = svg.append('g')
.selectAll('path')
.data(geoJsonFeaturesCollection.features)
.enter()
.append('path')
.attr('d', pathGenerator)
.attr('fill', d => 'lightSkyBlue');
return svg.node();
}
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
d3 = require("d3")
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