Published
Edited
Dec 8, 2019
md `# Map`
md `## Imports`
md`## Style`
leafletCSS
md`## Code`
{
yield openStreetMapLayer;
yield mapContainer;
}
md `## d3`
Wcities = FileAttachment("map@2.geojson").json()
Dots = {
const width = 600
const height = 400
const svg = d3.select(DOM.svg(width, height))
const projection = d3.geoMercator().fitExtent([[50,50], [width-50, height-50]], Wcities) ;
const points = svg.selectAll('circle')
.data(Wcities.features)
.join('circle')
.attr("fill", "steelblue")
.attr("cx", d => projection(d.geometry.coordinates)[0])
.attr("cy", d => projection(d.geometry.coordinates)[1])
.attr("r", 5)
.on('mouseover', function() {
d3.select(this).transition()
.duration('150')
.attr("fill", "red")
.attr('r', 10)
})
.on('mouseout', function() {
d3.select(this).transition()
.duration('150')
.attr("fill", "steelblue")
.attr('r', 5)
});
const text = svg.selectAll('text')
.data(Wcities.features)
.join('text')
.attr("font-size", '9')
.attr("dy", 3)
.attr("x", d => projection(d.geometry.coordinates)[0]+5)
.attr("y", d => projection(d.geometry.coordinates)[1])
.text(d => d.properties.Name)
return svg.node();
}
import {
leafletCSS,
mapContainer,
openStreetMapLayer
} from '@yangchengkai1/leaflet-map'
d3 = require('d3')
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.
