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 tuilesGraphiques camembertTransitions avec D3BillboardApprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
Canvas
canvas1 = {
const WIDTH = width
const HEIGHT = width / 4
const context = DOM.context2d(WIDTH, HEIGHT)
// un rectangle rouge
context.fillStyle = 'indianred'
context.fillRect(0, 0, WIDTH / 2, HEIGHT / 2)
// un rectangle avec un contour bleu
context.strokeStyle = 'steelblue'
context.strokeRect(WIDTH / 4, HEIGHT / 3, WIDTH / 2, HEIGHT / 2)
// un rectangle qui efface une supérficie
context.clearRect(20, 20, WIDTH / 5, HEIGHT / 5)
return context.canvas
}
canvas3 = {
const WIDTH = width
const HEIGHT = width / 4
const context = DOM.context2d(WIDTH, HEIGHT)
const center = { x: WIDTH / 2, y: HEIGHT / 2 }
// un cercle jaune fixe
context.beginPath()
context.arc(center.x, center.y, HEIGHT / 3, 0, Math.PI * 2)
context.fillStyle = 'gold'
context.fill()
// un arc où le rayon et l'angle d'arrivée sont le résultat des "sliders" plus haut
context.beginPath()
context.arc(WIDTH / 2, HEIGHT / 2, rayon, angleDeDepart, angleDArrivee)
context.lineWidth = 5
context.stroke()
return context.canvas
}
canvas2 = {
const WIDTH = width
const HEIGHT = width / 4
const context = DOM.context2d(WIDTH, HEIGHT)
// décrire le tracé
context.moveTo(WIDTH / 2, 0)
context.lineTo(WIDTH, HEIGHT)
context.lineTo(0, HEIGHT)
context.quadraticCurveTo(WIDTH / 2, HEIGHT / 2, WIDTH / 2, 0)
// remplir
context.fillStyle = 'lightblue'
context.fill()
// contour
context.strokeStyle = 'steelblue'
context.stroke()
return context.canvas
}
canvas4 = {
const WIDTH = width
const HEIGHT = width / 4
const context = DOM.context2d(WIDTH, HEIGHT)
// un chemin SVG (le même que dans l'example ci-dessus)
const d = `
M ${WIDTH / 2}, 0
L ${WIDTH}, ${HEIGHT}
L 0, ${HEIGHT}
Q ${WIDTH / 2}, ${HEIGHT / 2}, ${WIDTH / 2}, 0
Z`
// converti en chemin CANVAS
const path = new Path2D(d)
// remplir
context.fillStyle = 'lightblue'
context.fill(path) // <-- "path" doit être passé ici
// contour
context.strokeStyle = 'steelblue'
context.stroke(path) // <-- "path" doit être passé ici
return context.canvas
}
canvas5 = {
const WIDTH = width
const HEIGHT = width / 4
const context = DOM.context2d(WIDTH, HEIGHT)
// le centre du canvas
const center = { x: WIDTH / 2, y: HEIGHT / 2 }
// "Salut" en haut à gauche
context.font = '48px serif'
context.fillText('Salut', 10, 50)
// la ligne rouge au centre
context.moveTo(center.x, 0)
context.lineTo(center.x, HEIGHT)
context.strokeStyle = 'indianred'
context.stroke()
// le style des textes au centre
context.font = '20px sans'
context.strokeStyle = 'steelblue'
// les différents alignements
context.textAlign = 'start'
context.strokeText('text-align=start', center.x, center.y - 20)
context.textAlign = 'center'
context.strokeText('text-align=center', center.x, center.y)
context.textAlign = 'end'
context.strokeText('text-align=end', center.x, center.y + 20)
return context.canvas
}
canvas6 = {
const WIDTH = width
const HEIGHT = width / 4
const context = DOM.context2d(WIDTH, HEIGHT)
// Créer une image
var img = new Image()
// Ajouter la source
img.src = 'https://mdn.mozillademos.org/files/5397/rhino.jpg'
// Utiliser l'image une fois qu'elle est chargée
img.addEventListener('load', () => {
context.drawImage(img, 0, 0, 300, 150)
context.drawImage(img, 350, 100, 100, 100)
}, false)
return context.canvas
}
canvas7 = {
const WIDTH = width
const HEIGHT = width / 4
const BAR_WIDTH = WIDTH / VILLES.length
const MARGIN = 5
const context = DOM.context2d(WIDTH, HEIGHT)
// l'échelle pour la hauteur (seule fonction D3 utilisée)
const heightScale = d3.scaleLinear()
.domain([0, d3.max(VILLES, d => d.population)])
.range([0, HEIGHT])
// une fonction pour dessiner un bâton
const drawBar = (d, i) => {
const x = i * BAR_WIDTH
const y = HEIGHT - heightScale(d.population)
const w = BAR_WIDTH - MARGIN
const h = heightScale(d.population)
context.fillRect(x, y, w, h)
}
// une fonction pour écrire les noms des villes
const writeText = (d, i) => {
const x = i * BAR_WIDTH + BAR_WIDTH / 2
const y = HEIGHT - MARGIN * 2
context.textAlign = 'center'
context.fillStyle = 'white'
context.fillText(d.nom, x, y)
}
// appliquer les fonctions sur toutes les données
VILLES.forEach(drawBar)
VILLES.forEach(writeText)
return context.canvas
}
canvas8 = {
const WIDTH = width
const HEIGHT = width / 2
const context = DOM.context2d(WIDTH, HEIGHT)
// projection
const projection = d3.geoEqualEarth()
// créateur d'attribut "d" pour <path> en svg
const pathCreator = d3.geoPath().projection(projection)
// dessiner les côtes en bleu
const drawCoast = collection => {
const d = pathCreator(collection) // attribut "d" pour <path>
const path = new Path2D(d) // transformer un "d" en svg à un chemin en canvas
context.strokeStyle = 'LightBlue'
context.lineWidth = 50
context.lineJoin = 'round'
context.stroke(path) // dessiner le chemin
}
// passer la collection GeoJSON à "drawCoast"
drawCoast(PAYS)
// dessiner chaque pays en vert avec un contour blanc
const drawCountry = feature => {
const d = pathCreator(feature) // attribut "d" pour <path>
const path = new Path2D(d) // transformer un "d" en svg à un chemin en canvas
context.fillStyle = 'DarkSeaGreen'
context.fill(path) // dessiner l'interieur en vert
context.strokeStyle = 'white'
context.lineWidth = 0.5
context.stroke(path) // dessiner le contour blanc
}
// passer chaque "Feature" GeoJSON à "drawCountry"
PAYS.features.forEach(drawCountry)
return context.canvas
}
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.
