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-shapeDonnées cartographiquesLa cartographie avec D3Leaflet et fonds de carte en tuilesCanvasGraphiques camembertTransitions avec D3BillboardApprentissage automatiqueTopojsonObservableD3 hierarchy / treeTrouver des coordonnéesLeaflet et D3
Représenter un réseau avec D3
DATA = ({
nodes: [
{ id: 'Baptiste', group: 1 },
{ id: 'Barthélemy', group: 1 },
{ id: 'Bastien', group: 2 },
{ id: 'Baudouin', group: 3 },
{ id: 'Beau', group: 1 },
{ id: 'Benoît', group: 2 },
{ id: 'Bernard', group: 1 },
{ id: 'Bertrand', group: 1 },
{ id: 'Blaise', group: 3 },
{ id: 'Blanchard', group: 2 },
{ id: 'Bruno', group: 1 },
{ id: 'Barbara', group: 3 },
{ id: 'Béatrice', group: 1 },
{ id: 'Bénédicte', group: 2 },
{ id: 'Bernadette', group: 2 },
{ id: 'Bijou', group: 3 },
{ id: 'Blanche', group: 1 },
{ id: 'Blanchefleur', group: 1 },
{ id: 'Brigitte', group: 1 },
],
edges: [
{ source: 'Brigitte', target: 'Blanchefleur' },
{ source: 'Brigitte', target: 'Blanche' },
{ source: 'Brigitte', target: 'Bijou' },
{ source: 'Brigitte', target: 'Bernadette' },
{ source: 'Brigitte', target: 'Bénédicte' },
{ source: 'Brigitte', target: 'Béatrice' },
{ source: 'Brigitte', target: 'Barbara' },
{ source: 'Brigitte', target: 'Bruno' },
{ source: 'Brigitte', target: 'Blanchard' },
{ source: 'Bruno', target: 'Blanchard' },
{ source: 'Bruno', target: 'Blaise' },
{ source: 'Bruno', target: 'Bertrand' },
{ source: 'Bruno', target: 'Bernard' },
{ source: 'Bernard', target: 'Benoît' },
{ source: 'Benoît', target: 'Beau' },
{ source: 'Benoît', target: 'Baudouin' },
{ source: 'Benoît', target: 'Bastien' },
{ source: 'Bastien', target: 'Baptiste' },
]
})
graph = {
const svg = d3.select(DOM.svg(WIDTH, HEIGHT))
// les liens représentés par des lignes
const links = svg.selectAll('line')
.data(DATA.edges)
.enter()
.append('line')
.attr('stroke', 'black')
// les personnes représentées par des cercles
const circles = svg.selectAll('circle')
.data(DATA.nodes)
.enter()
.append('circle')
.attr('r', RADIUS)
.attr('fill', d => COLORS[d.group - 1])
// définir les forces de la simulation
// documentation: https://github.com/d3/d3-force#forceSimulation
const simulation = d3.forceSimulation(DATA.nodes)
.force('link', d3.forceLink(DATA.edges).id(d => d.id))
.force('charge', d3.forceManyBody())
.force('center', d3.forceCenter(WIDTH / 2, HEIGHT / 2))
// mettre à jour les attributs en cours de simulation
simulation.on('tick', () => {
links
.attr('x1', d => d.source.x)
.attr('y1', d => d.source.y)
.attr('x2', d => d.target.x)
.attr('y2', d => d.target.y);
circles
.attr('cx', d => d.x)
.attr('cy', d => d.y);
})
// définir ce qui ce passe quand un élément est "tiré"
const drag = () =>
d3.drag()
.subject(e => simulation.find(e.x, e.y))
.on('start', e => {
if (!e.active) { simulation.alphaTarget(0.3).restart() }
e.subject.fx = e.subject.x
e.subject.fy = e.subject.y
})
.on('drag', e => {
e.subject.fx = e.x
e.subject.fy = e.y
})
.on('end', e => {
if (!e.active) simulation.alphaTarget(0)
e.subject.fx = null
e.subject.fy = null
})
// appliquer "drag" aux cercles
circles.call(drag())
return svg.node()
}
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.
