Published
Edited
Apr 11, 2021
Importers
globe={
let svg=d3.create("svg")
.attr('width',width)
.attr('height',height)
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", 'url("#outline")');
let g=svg.append('g')
g.selectAll('path')
.data(countries.features, d => d.properties.name)
.enter().append('path')
.attr('class', 'geometry')
.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('path')
.datum(graticule)
.attr('d',path)
.attr('stroke','#ccc')
.attr('fill','none')
.attr('stroke-width',0.5);
svg.append("path")
.datum(outline)
.attr("d", path)
.attr("fill", "none")
.attr("stroke", lineColor)
return svg.node();
}
import {viewof location} from "@mbostock/solar-path"
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.
