I love to build dataviz for insight discovery. I also love to put technology to the service of humanity
Published
Edited
Oct 14, 2021
Importers
viewof rotation = Inputs.range([0, 360], {
label: "Rotation",
step: 1,
value: 0
})
path = d3.geoPath(project).pointRadius(1.5)
mapCentroids = {
const mapCentroids = new Map(
countries.features.map(c => [c.properties.name, path.centroid(c)])
);
mapCentroids.set("Worldwide", [width * .45, height * 0.8]);
mapCentroids.set("Online", [width * .15, height * 0.8]);
return mapCentroids;
}
Array.from(mapCentroids.keys())
.sort()
.filter(d => d.startsWith("U"))
// Draws a map for reference. Receives the context where to draw
function drawMap(context) {
// console.log("drawMap", width, height);
const borderColor = "#ccc";
context.save();
const path = d3.geoPath(project, context).pointRadius(1.5);
context.fillStyle = "#fefefe";
context.fillRect(0, 0, width, height);
context.strokeStyle = borderColor;
context.strokeRect(0, 0, width, height);
context.beginPath();
path(countries);
context.strokeStyle = borderColor;
context.stroke();
// context.beginPath();
// for (let [country, c] of mapCentroids) {
// console.log(country, c);
// context.fillStyle = "#333";
// context.fillText(country, ...c);
// }
context.restore();
}
{
const context = DOM.context2d(width, height);
drawMap(context);
context.beginPath();
const [x, y] = mapCentroids.get("Online");
console.log(x, y);
context.strokeStyle = "black";
context.arc(x, y, 5, 0, 2 * Math.PI);
context.stroke();
return context.canvas;
}
world = d3.json(
"https://cdn.jsdelivr.net/npm/world-atlas@2/countries-110m.json"
)
project = {
if (projection == "geoAzimuthalEquidistant") {
return d3[projection]()
.rotate([100, -90])
.fitSize([width, height * 1.15], { type: "Sphere" })
.scale(width / 3.5);
} else {
return d3[projection]()
.rotate([rotation, 0])
.precision(0.1)
.fitSize([width, height * 1.15], { type: "Sphere" });
}
}
height = 300
width = 600
countries = {
world.objects.countries.geometries = world.objects.countries.geometries.filter(
d => d.properties.name !== "Antarctica"
);
const countries = topojson.feature(world, world.objects.countries);
return countries;
}
countries.features[0]
topojson = require("topojson-client@3")
d3 = require("d3@7")
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.
