Public
Edited
Feb 14, 2023
1 fork
Insert cell
Insert cell
world_json = FileAttachment("world.json")
Insert cell
viewof step = html`<input type='range' min=1 max=50 step=1 value=30 />`
Insert cell
viewof rotate = html`<input type='range' min=1 max=300 step=1 value=40 />`
Insert cell
{
let width = 500;
let height = 500;
const sensitivity = 75;

let projection = d3
.geoOrthographic()
.scale(250)
.center([0, 0])
.rotate([0, -rotate])
.translate([width / 2, height / 2]);

const initialScale = projection.scale();
let path = d3.geoPath().projection(projection);

let svg = d3.create("svg").attr("width", width).attr("height", height);

let globe = svg
.append("circle")
.attr("fill", "none")
.attr("stroke", "#000")
.attr("stroke-width", "1")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", initialScale);

let map = svg.append("g");

const s = 360 / step;

const data = d3.geoGraticule().stepMinor([s, s]).stepMajor([s, s]).lines();

map
.append("g")
.attr("class", "countries")
.selectAll("path")
.data(data)
.enter()
.append("path")
.attr("d", path)
.attr("fill", "none")
.style("stroke", "black")
.style("stroke-width", 1);
return svg.node();
}
Insert cell
d3 = require("https://d3js.org/d3.v4.min.js")
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