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 D3CanvasGraphiques camembertTransitions avec D3BillboardApprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
Leaflet et fonds de carte en tuiles
map1 = {
/*
Specifique à observable
Dans le contexte d'une page web, il nous faut une <div>
avec des propriétés height et width définies
*/
const WIDTH = width
const HEIGHT = width * 0.6
let container = DOM.element('div', { style: `width:${WIDTH}px;height:${HEIGHT}px` })
yield container
// Monter la carte sur la <div>
// Dans une page web, passez l'id de la <div> à L.map
const map = L.map(container)
// définir la position de la carte "[latitude, longitude], zoom"
// ATTENTION les valeurs latitude et longitude sont inversée par rapport à un point GeoJSON
.setView([46.7785, 6.6412], 14)
// Fond de carte
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)
// Ajouter des données au format GeoJSON
L.geoJSON(
// un objet GeoJSON
{
type: 'Feature',
properties: { name: 'Yverdon' },
geometry: { type: 'Point', coordinates: [6.6412, 46.7785] }
},
// options
// ici nous ajoutons un "popup" à chaque "feature" affichant la propriété "name"
{
onEachFeature: (feature, layer) => layer.bindPopup(feature.properties.name),
}
).addTo(map)
}
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.
