Notebooks 2.0 is here.
map = htl.html`<svg viewBox="0 0 ${width} ${800}" style="display: block;">
<path d="${path(outline)}" fill="#fff"></path>
<path d="${path(graticule)}" stroke="#ccc" fill="none"></path>
<path d="${path(land)}"></path>
<path d="${path(borders)}" fill="none" stroke="#fff"></path>
<path d="${path(outline)}" fill="none" stroke="#000"></path>
</svg>`
{
let width = 1600
let height = 800
let svg = d3.create('svg').attr("viewBox", [[0, 0], [width, height]])
let projection = d3.geoMercator().scale(400).center([-123,40])
let createPath = d3.geoPath(projection)
let land = topojson.feature(world, world.objects.countries)
let borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
const zoom = d3.zoom()
.scaleExtent([1, 8])
.translateExtent([[0, 0], [width, height]])
.on('zoom', zoomed);
function zoomed(event){
console.log(event)
svg.selectAll('path').attr('transform', event.transform)
svg.selectAll('circle').attr('transform', event.transform)
}
let landPolygon = svg.append('g')
.selectAll('path')
.data(land.features)
.join('path')
.attr('d', d => createPath(d))
.attr('fill', (d, i) => {
//console.log(d, i, d.properties.name)
return (i % 2 == 0) ? '#757575' : '#000000'
})
let bordersLine = svg.append('path')
.attr('d', createPath(borders))
.attr('stroke', '#ff0000')
.attr('fill', 'none')
const getCentroid = (feature) => createPath.centroid(feature)
let points = svg.append('g')
.selectAll('circle')
.data(land.features)
.join('circle')
.attr('r', 10)
.attr("fill", '#ff0000')
.attr('cx', d => {
//console.log(getCentroid(d))
return getCentroid(d)[0]
})
.attr('cy', d => getCentroid(d)[1])
svg.call(zoom)
return svg.node()
}
projection = d3.geoMercator().scale(140).center([123, 23])
path = d3.geoPath(projection)
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()
land = topojson.feature(world, world.objects.land)
borders = topojson.mesh(world, world.objects.countries, (a, b) => a !== b)
world = FileAttachment("countries-50m.json").json()
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.
