playing with space, shape, colour & composition
square barsSemi-circle reusable bubble chartpercentage flow diagram movers, leavers, promotionsUS simple hex map using threshold scalevoronoi treemapcapsule barsPct circles infographicsimple barcodeTriangle radarpct ratio bardumbbell plotwaffle chartconcentric pct linesconcentric pair [row]reusable circle legendsankey/chord chartDot tile v4Dot tile v3Dot tile v2.1Dot tile v2Dot tile v1SVG visual for Contents pageBar chart with just pipe characterReusable proportional circle area chartmodulo operation to create a grid v2Partition diagramD3 | single stacked barD3 | enclosing diagram | circle packline %Japan square map
flow circles
flowCircles(data, {
valueKey: 'population',
width: width
})
function flowCircles (data, {
f = d3.format(','),
margin = {top: 10, right: 100, bottom: 30, left: 80},
labelKey = 'label', // key for group in data
valueKey = 'value', // key for group in data
width = 900,
height = 300,
stroke = '#454545',
fill = '#fff',
textFill = 'tomato',
circleSizeMax = 80
} = {}) {
// set the dimensions and margins of the graph
const w = width - margin.left - margin.right
const h = height - margin.top - margin.bottom
const max = d3.max(data, d => d[valueKey]);
const center = (h + margin.top) / 2;
const svg = DOM.svg(width, height);
const sel = d3.select(svg)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
const sqrtScale = d3.scaleSqrt()
.domain([0, max])
.range([0, circleSizeMax])
const linearScale = d3.scaleLinear()
.domain([0, data.length])
.range([(circleSizeMax/2), width]);
sel.append('line')
.attr('x1', margin.left)
.attr('x2', w - 100)
.attr('y1', center)
.attr('y2', center)
.attr('stroke', stroke)
.style('stroke-dasharray', 2);
const groups = sel.selectAll('g.g-fc')
.data(data)
.join('g')
.attr('class', 'g-fc')
.attr('transform', (d, i) => `translate(${linearScale(i)},${(h + margin.top) / 2})`);
groups.append('circle')
.attr('class', 'c-100')
.attr('r', d => sqrtScale(d[valueKey]))
.attr('fill', fill)
.attr('stroke', stroke)
.style('stroke-dasharray', 2)
.attr('stroke-width', 2);
groups.append('text')
.attr('x', 0)
.attr('dy', 5)
.style('fill', textFill)
.style('text-anchor', 'middle')
.text(d => d[labelKey])
groups.append('text')
.attr('x', 0)
.attr('y', d => sqrtScale(d[valueKey]))
.attr('dy', 15)
.style('text-anchor', 'middle')
.text(d => f(d[valueKey]))
return svg;
}
data = [
{
label: '2021',
population: 3000
},
{
label: 'HIRED',
population: hired,
},
{
label: 'LEFT',
population: left
},
{
label: '2022',
population: 2400 + (hired - left)
}
]
<hr>
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<style>
text {
font-family:'Space Mono',monospace;
fill: #130C0E;
font-size: 11px;
}
</style>
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.
