D3. Part 1 - HTML, SVG and a Basic Bar ChartD3. Part 1 - Exercise: Bar Chart and Scatter PlotD3. Part 1 - Exercise SolutionD3. Part 2 - Click InteractionD3. Part 2 - Importing and combining ChartsD3. Part 2 - Animated Bar Chart RaceD3. Part 2 - Exercise: Interactive ChartsD3. Part 2 - Exercise SolutionD3. Part 3 - Brushing and LinkingD3. Essentials - selection.join explainedD3. Essentials - ColorD3. Essentials - Further Learning VideosD3. Advanced - Maps
D3. Advanced - Drawing custom Shapes
html`
<svg width=100 height=100 style='overflow: visible; margin: 5px;'>
<path d='M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'
fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
`
html`
<svg width=100 height=100 style='border: 1px dashed'>
<path d='${smiley}' fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
<code>100px</code>
`
smiley = `
M 0 20
A 40 40 0 0 1 0 100
A 40 40 0 0 1 0 20
M 0 60
C 13 57 13 73 0 70
M 0 85
A 5 5 0 0 1 10 85
A 5 5 0 0 1 0 85
M -15 40
L -13 50
M 15 40
L 13 50
`
/*smiley = `M 0 0
a 50 50 0 0 1 0 100
a 50 50 0 0 1 0 -100
M 0 55
c 8 0 18 10 0 10
c -8 0 -8 -10 0 -10
M -20 75
q 20 15 40 0
M -20 35
a 5 5 0 0 1 0 10
a 5 5 0 0 1 0 -10
M 20 35
a 5 5 0 0 1 0 10
a 5 5 0 0 1 0 -10
M 15 40
h 10`*/
html`
<svg width=100 height=100 style='border: 1px dashed'>
<path d='${petalPath}' fill='none' stroke='#000' stroke-width=2 transform='translate(50,0)' />
</svg>
<code>100px</code>
`
petalPath = `
M 0 0
C 50 55 40 90 0 100
C -40 90 -50 55 0 0`
{
window.localStorage.petalPath = petalPath || 'M0,0 C50,40 50,70 20,100 L0,85 L-20,100 C-50,70 -50,40 0,0'
}
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.
