Published
Edited
Apr 12, 2021
1 fork
2 stars
map = {
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height]);
let path = d3.geoPath(projection);
let defs = svg.append("defs");
defs.append("path")
.attr("id", "outline")
.attr("d", path(outline));
defs.append("clipPath")
.attr("id", "clip")
.append("use")
.attr("xlink:href", new URL("#outline", location));
let gra=svg.append("path")
.attr("d", path(graticule))
.attr("stroke", "#ccc")
.attr("fill", "none");
let g = svg.append("g")
.attr("clip-path", `url(${new URL("#clip", location)})`);
// g.append("use")
// .attr("xlink:href", new URL("#outline", location))
// .attr("fill", "#fff");
g.selectAll('path')
.data(countries.features)
.enter().append('path')
.attr('d', path)
.attr('stroke', lineColor)
.attr('stroke-width', 1).attr('fill', landColor)
.on('mouseover', function (d) {
d3.select(this)
.attr('opacity',0.7)
.attr("stroke", '#fffff0')
.attr("stroke-width", 5);
})
.on('mouseout', function (d) {
d3.select(this)
.attr('opacity',1)
.attr("stroke", lineColor)
.attr("stroke-width", 1);
});
svg.append("use")
.attr("xlink:href", new URL("#outline", location))
.attr("stroke", "#000")
.attr("fill", "none");
function render() {
console.log("Render")
path = d3.geoPath(projection)
g.attr("d", path)
gra.attr('d',path(graticule))
}
svg
.call(drag(projection)
.on("drag.render", () => render()))
.call(() => render())
return svg.node();
}
import {color} from "@jashkenas/inputs"
countries=topojson.feature(worldmeta,worldmeta.objects.countries)
height = {
const [[x0, y0], [x1, y1]] = d3.geoPath(projection.fitWidth(width, outline)).bounds(outline);
const dy = Math.ceil(y1 - y0), l = Math.min(Math.ceil(x1 - x0), dy);
projection.scale(projection.scale() * (l - 1) / l).precision(0.2);
return dy;
}
outline = ({type: "Sphere"})
graticule = d3.geoGraticule10()
worldmeta = FileAttachment("countries-110m.json").json()
topojson = require("topojson-client@3")
d3 = require("d3@6")
import{viewof location as yourLocation }from '@mbostock/solar-path'
import{drag}from'@vpascual/draggable-svg-world-map'
versor = require("versor@0.0.3")
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.
