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 D3Apprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
Billboard
villesPop = [
{ nom: 'Lausanne', population: 138905 },
{ nom: 'Yverdon', population: 30143 },
{ nom: 'Montreux', population: 26574 },
{ nom: 'Renens', population: 21036 },
{ nom: 'Nyon', population: 20533 },
{ nom: 'Vevey', population: 19827 },
]
bb.generate({
data: {
json: {
population: villesPop.map(({ population }) => population),
}
},
bindto: graph1
})
bb.generate({
data: {
json: {
population: villesPop.map(({ population }) => population),
},
type: 'bar', // nouveau
},
bindto: graph2
})
bb.generate({
data: {
json: {
population: villesPop.map(({ population }) => population),
},
type: 'bar',
},
/* Nouveau - début */
axis: {
x: {
type: 'category',
categories: villesPop.map(({ nom }) => nom),
}
},
/* Nouveau - fin */
bindto: graph3
})
bb.generate({
data: {
json: {
population: villesPop.map(({ population }) => population),
},
type: 'bar',
},
axis: {
x: {
type: 'category',
categories: villesPop.map(({ nom }) => nom),
}
},
/* Nouveau - début */
color: {
pattern: ['indianred'],
},
/* Nouveau - fin */
bindto: graph4
})
villes = [
{ nom: 'Lausanne', population: 138905, superficie: 41.38 },
{ nom: 'Yverdon', population: 30143, superficie: 11.28 },
{ nom: 'Montreux', population: 26574, superficie: 33.37 },
{ nom: 'Renens', population: 21036, superficie: 2.96 },
{ nom: 'Nyon', population: 20533, superficie: 6.79 },
{ nom: 'Vevey', population: 19827, superficie: 2.38 },
]
bb.generate({
data: {
json: {
population: villes.map(({ population }) => population),
superficie: villes.map(({ superficie }) => superficie),
},
// définir les axes y et y2
axes: {
population: 'y',
superficie: 'y2',
},
type: 'bar',
},
axis: {
x: {
type: 'category',
categories: villes.map(({ nom }) => nom)
},
// Nommer l'axe y
y: {
tick:{
format: x => `${x/1000}k`
},
label: 'Population',
},
// Montrer et nommer l'axe y2
y2: {
show: true,
label: 'Superficie',
},
},
bindto: graph5,
})
eurInChf.map(d => d.date)
bb.generate({
data: {
x: 'date',
json: {
date: eurInChf.map(d => d.date),
'Prix de l\'euro en francs suisses': eurInChf.map(d => d.price)
},
// le format des dates dans le jeu de données
xFormat: '%m/%d/%y'
},
axis: {
x: {
// le type de données sur l'axe x
type: 'timeseries',
tick: {
// le nombre d'intervales que nous souhaitons voir
count: 5,
// le format des dates affichées
format: '%y-%m-%y'
}
},
},
point: {
// ne pas montrer un point par valeur
show: false,
},
bindto: graph6
})
iceCreamSales = [
{ temperature: 14.2, sales: 215 },
{ temperature: 16.4, sales: 325 },
{ temperature: 11.9, sales: 185 },
{ temperature: 15.2, sales: 332 },
{ temperature: 18.5, sales: 406 },
{ temperature: 22.1, sales: 522 },
{ temperature: 19.4, sales: 412 },
{ temperature: 25.1, sales: 614 },
{ temperature: 23.4, sales: 544 },
{ temperature: 18.1, sales: 421 },
{ temperature: 22.6, sales: 445 },
{ temperature: 17.2, sales: 408 },
]
bb.generate({
data: {
xs: {
// l'axe est "temperature"
sales: 'temperature',
},
json: {
temperature: iceCreamSales.map(({ temperature}) => temperature),
sales: iceCreamSales.map(({ sales }) => sales)
},
type: "scatter"
},
// nommer les axes
axis: {
x: {
label: 'Température',
},
y: {
label: 'Ventes de glaces en CHF',
},
},
bindto: graph7
})
bb.generate({
data: {
xs: {
sales: 'temperature',
},
json: {
temperature: iceCreamSales.map(({ temperature}) => temperature),
sales: iceCreamSales.map(({ sales }) => sales)
},
type: "scatter"
},
point: {
// le "point" peut avoir la forme que l'on veut
pattern: [
`<g>
<path d="M 0 8 L 20 8 L 10 35 Z" fill="tan" stroke="none" />
<circle r="7" transform="translate(5, 8)" fill="chocolate" stroke="white" />
<circle r="7" transform="translate(10, 0)" fill="orange" stroke="white" />
<circle r="7" transform="translate(15, 8)" fill="lime" stroke="white" />
</g>`
]
},
axis: {
x: {
label: 'Température',
},
y: {
label: 'Ventes de glaces en CHF',
},
},
// ne pas montrer la légende
legend: {
show: false,
},
tooltip: {
// modifier les infobulles
contents: ([{ x, value }],) => `
<div style="background-color:black;padding:5px;font-family:sans-serif;font-size:0.6em">
<span style="color:white">
Nous avons vendus<br/>
des glaces pour <b>${value} francs</b><br/>
quand il faisait <b>${JSON.stringify(x)}°</b>
</span>
<div>
`
},
bindto: graph8
})
transports = [
{ nom: 'Baptiste', transport: 'Vélo' },
{ nom: 'Barthélemy', transport: 'Vélo' },
{ nom: 'Bastien', transport: 'Bus' },
{ nom: 'Baudouin', transport: 'Voiture' },
{ nom: 'Beau', transport: 'Vélo' },
{ nom: 'Benoît', transport: 'Bus' },
{ nom: 'Bernard', transport: 'Vélo' },
{ nom: 'Bertrand', transport: 'Vélo' },
{ nom: 'Blaise', transport: 'Voiture' },
{ nom: 'Blanchard', transport: 'Bus' },
{ nom: 'Bruno', transport: 'Vélo' },
{ nom: 'Barbara', transport: 'Voiture' },
{ nom: 'Béatrice', transport: 'Vélo' },
{ nom: 'Bénédicte', transport: 'Bus' },
{ nom: 'Bernadette', transport: 'Bus' },
{ nom: 'Bijou', transport: 'Voiture' },
{ nom: 'Blanche', transport: 'Vélo' },
{ nom: 'Blanchefleur', transport: 'Vélo' },
{ nom: 'Brigitte', transport: 'Vélo' },
]
bb.generate({
data: {
json: {
velo: transports.map(({ transport }) => transport === 'Vélo' ? 1 : 0),
bus: transports.map(({ transport }) => transport === 'Bus' ? 1 : 0),
voiture: transports.map(({ transport }) => transport === 'Voiture' ? 1 : 0),
},
type: 'pie',
},
bindto: graph9
})
bb.generate({
data: {
json: {
velo: transports.map(({ transport }) => transport === 'Vélo' ? 1 : 0),
bus: transports.map(({ transport }) => transport === 'Bus' ? 1 : 0),
voiture: transports.map(({ transport }) => transport === 'Voiture' ? 1 : 0),
},
type: 'donut', // le type "donut"
},
color: {
// définir les couleurs
pattern: [
'darkgreen',
'steelblue',
'indianred',
]
},
// la légende à droite du graphique
legend: {
position: 'right',
},
bindto: graph10
})
bb.generate({
data: {
x: 'hero',
columns: [
['hero', 'Intelligence', 'Strength', 'Speed', 'Durability', 'Energy', 'Fighting Skills'],
['Captain America', 3,3,2,3,1,6],
['Iron Man', 6,6,5,6,6,4],
['Hulk', 6,7,3,7,1,4],
['Thor', 2,7,7,6,6,4],
],
type: 'radar',
},
bindto: graph11,
})
bb.generate({
data: {
x: 'x',
columns: [
["x", "N", "NW", "W", "SW", "S", "SE", "E", "NE"],
["Wind direction", 95, 75, 33, 28, 45, 55, 34, 67],
],
type: 'radar',
},
bindto: graph12,
})
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.
