Public
Edited
Feb 19, 2023
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
LambertCanada = {
// Width supplied by Observable.
const height = 600;

// Create and select SVG
const svg = d3.select(DOM.svg(width, height));

const padding = 20;
const projection = d3
.geoConicConformal()
.parallels([49, 77])
// Rotate along x-axis
.rotate([91.86667, 0])
.fitExtent(
[
[padding, padding],
[width - padding, height - padding]
],
canadaJson
);

const path = d3.geoPath().projection(projection);

svg
.selectAll("path")
.data(canadaJson.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "black")
.style("fill", "none");

return svg.node();
}
Insert cell
Insert cell
Insert cell
canadaJson = test2.clusters
Insert cell
test2 = FileAttachment("test@2.json").json()
Insert cell
MercatorCanada = {
// Width supplied by Observable.
const height = 960;
const width = 1000;

// Create and select SVG
const svg = d3.select(DOM.svg(width, height));

const padding = 20;
const projection = d3.geoMercator().center([-125.13, 54.8]).scale(2000);
//.scale(540).translate([1400, 720]);
// .fitExtent(
// [
// [padding, padding],
// [width - padding, height - padding]
// ],
// canadaJson.features
// );

const path = d3.geoPath().projection(projection);

svg
.selectAll("path")
.data(canadaJson.features)
.enter()
.append("path")
.attr("d", path)
.style("stroke", "black")
.style("fill", "none");

return svg.node();
}
Insert cell
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