SVGQuartet d'AnscombeMarkdownIntroduction à D3Graphiques en bâtonsD3 - Joindre des données à des élémentsTypes de visualisation de donnéesMéthodes sur une liste (Array)Structures de données javascriptFonctions RamdaD3 - définir les axesD3-shapeReprésenter un réseau avec D3Données cartographiquesLa cartographie avec D3Leaflet et fonds de carte en tuilesCanvasGraphiques camembertTransitions avec D3BillboardApprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnées
Leaflet et D3
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)
}
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.
