map1 = {
const WIDTH = width
const HEIGHT = width * 0.6
let container = DOM.element('div', { style: `width:${WIDTH}px;height:${HEIGHT}px;background-color:white` })
yield container
const map = L.map(container).setView([0, 0], 2)
const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
// D3
// initialiser une couche SVG dans leaflet
L.svg().addTo(map)
// la selectioner avec D3
const overlay = d3.select(map.getPanes().overlayPane)
const svg = overlay.select('svg')
// un groupe qui est caché en cours de zoom
const g = svg.append('g').attr('class', 'leaflet-zoom-hide')
// convertir un point en coordonnées courantes dans Leaflet
const projectPoint = function(x, y) {
const point = map.latLngToLayerPoint(new L.LatLng(y, x))
this.stream.point(point.x, point.y)
}
// la projection D3
const projection = d3.geoTransform({point: projectPoint})
// une fonction pour créer les attributs "d" de l'élément "path"
const pathCreator = d3.geoPath().projection(projection)
// couleur
const random255 = () => Math.round(Math.random() * 255)
const getColor = () => `rgb(${random255()},${random255()},${random255()})`
// ajouter un élément path par feature (pays)
const countryPaths = g.selectAll('path')
.data(countries.features)
.enter()
.append('path')
.attr('opacity', 0.2)
.attr('fill', getColor)
// une fonction pour placer le svg quand la carte est zoomée
const onZoom = () => countryPaths.attr('d', pathCreator)
// initialiser la postion des pays
onZoom()
// appeller reset quand la position de la carte est zoomée
map.on('zoomend', onZoom)
}
villes = ({
type: 'FeatureCollection',
features: [
{
type: 'Feature',
properties: { name: 'Yverdon', data: [1, 3, 5] },
geometry: { type: 'Point', coordinates: [6.6412, 46.7785] }
},
{
type: 'Feature',
properties: { name: 'Lausanne', data: [2, 8, 3] },
geometry: { type: 'Point', coordinates: [6.6323, 46.5197] }
},
]
})
map2 = {
const WIDTH = width
const HEIGHT = width * 0.6
let container = DOM.element('div', { style: `width:${WIDTH}px;height:${HEIGHT}px;background-color:white` })
yield container
const map = L.map(container).setView([46.65192, 6.63574], 10)
const tileLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map)
const DATA = villes.features.map(f => {
const c = f.geometry.coordinates
// ajouter latlng au format Leaflet
return {
...f,
// ajouter latlng au format Leaflet
latlng: new L.LatLng(c[1], c[0]),
// ajouter pieData pour les camenberts
pieData: d3.pie()(f.properties.data)
}
})
// initialiser une couche SVG dans leaflet
L.svg().addTo(map)
// la selectioner avec D3
const overlay = d3.select(map.getPanes().overlayPane)
const svg = overlay.select('svg')
// un groupe qui est caché en cours de zoom
const g = svg.append('g').attr('class', 'leaflet-zoom-hide')
// un élément "g" par ville
const cities = g.selectAll('g')
.data(DATA)
.enter()
.append('g')
.attr('opacity', 0.5)
// pour créer le camenbert
const arcCreator = d3.arc()
.innerRadius(0)
.outerRadius(30)
// pour la couleur des tranches de camenbert
const getColor = (d, i) => {
if (i === 0) { return 'blue' }
if (i === 1) { return 'red' }
return 'green'
}
// ajouter un camenbert à chaque ville
cities.selectAll('path')
.data(d => d.pieData)
.enter()
.append('path')
.attr('d', arcCreator)
.attr('fill', getColor)
.attr('stroke', 'white')
// une fonction appellée quand la carte est zoomée
const onZoom = () => {
cities.attr('transform', ({ latlng }) => {
const { x, y } = map.latLngToLayerPoint(latlng)
return `translate(${x}, ${y})`
})
}
// positionner les camemberts
onZoom()
// repositionner quand la carte est zoomée
map.on('zoomend', onZoom)
}
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.