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 radarflow circlespct 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 charactermodulo operation to create a grid v2Partition diagramD3 | single stacked barD3 | enclosing diagram | circle packline %Japan square map
Reusable proportional circle area chart
circlePct(value) // render the chart
function circlePct(datum, {
axis = [25, 50, 75, 100], // Default axis values
size = 400, // Default size of the SVG
strokeAxis = '#00b8b8', // Default color for the axis lines
axisLabelsFill = '#00b8b8', // Default color for axis labels
circleFill = '#de3d83', // Default fill color for the value circle
valueFill = '#e4bd0b' // Default fill color for the value text
} = {}) {
// Create SVG element with specified width and height
const svg = d3.create("svg").attr("width", size).attr("height", size + 20);
// Define a square root scale for transforming values into visual space
const sqrtScale = d3.scaleSqrt()
.domain([0, 100]) // Domain of input values
.range([0, 200]); // Range of output values
// Append group for axis circles and use `join` for data-driven elements
svg.append('g')
.attr('class', 'axis-wrap')
.selectAll('circle')
.data(axis)
.join('circle') // Using join to handle enter selection
.attr('r', d => sqrtScale(d))
.attr('cx', size / 2)
.attr('cy', size / 2)
.style('fill', 'none')
.style('stroke', strokeAxis)
.style('opacity', 0.5);
// Append group for axis labels, also using `join`
svg.append('g')
.attr('class', 'axis-labels-wrap')
.selectAll('text')
.data(axis)
.join('text') // Using join here as well
.attr('x', size / 2)
.attr('y', d => size / 2 + sqrtScale(d) + 5)
.style('text-anchor', 'middle')
.style('fill', axisLabelsFill)
.text(d => d + '%');
// Append a circle for the datum value
svg.append('circle')
.attr('cx', size / 2)
.attr('cy', size / 2)
.style('fill', circleFill)
.style('opacity', 0.9)
.attr('r', sqrtScale(datum));
// Append datum value as text
svg.append('text')
.attr('x', size / 2)
.attr('y', size / 2 + 12)
.style('text-anchor', 'middle')
.style('font-size', '48px')
.style('fill', valueFill)
.text(datum + '%');
return svg.node(); // Return the SVG node
}
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Space+Mono&display=swap" rel="stylesheet">
<style>
text {
font-family: 'Space Mono', monospace;
font-weight: 400;
}
</style>
randomNumber = (min, max) => {
return Math.floor((max - min + 1) * Math.random() + min)
}
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.
