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 automatiqueTopojsonObservableTrouver des coordonnéesLeaflet et D3
D3 hierarchy / tree
svg`
<svg viewBox="0 0 ${size.svg.width} ${size.svg.height}">
<g transform="translate(${size.svg.width / 2}, 50)">
${drawLinks(root.links())}
${drawNodes(root.descendants())}
</g>
</svg>
`
size = ({
svg: { width, height: width / 5 },
node: { width: 200, height: 50 },
})
root = d3.hierarchy(data)
treeGenerator = d3.tree().nodeSize([size.node.width, size.node.height])
tree = treeGenerator(root)
drawNodes = nodes => svg`
<g text-anchor="middle">
${
nodes.map(d => svg`
<g transform="translate(${d.x}, ${d.y})">
<text fill="white" stroke="white" stroke-width="10">${d.data.name}</text>
<text>${d.data.name}</text>
</g>
`)
}
</g>
`
linkGenerator = d3.linkVertical()
.x(d => d.x)
.y(d => d.y)
drawLinks = links => svg`
<g>
${
links.map(d => svg`
<path d="${linkGenerator(d)}" fill="none" stroke="lightgray" />
`)
}
</g>
`
d3 = require("d3@6")
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.
