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 infographicTriangle 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 characterReusable proportional circle area chartmodulo operation to create a grid v2Partition diagramD3 | single stacked barD3 | enclosing diagram | circle packline %Japan square map
simple barcode
function dualBarcode (data, {
// f = d3.format(','),
parentLabelKey = 'p_label', // key for background bars
parentValueKey = 'parent_value', // key for value/foreground bars
domain = [0, data[parentValueKey]], // domain based on parent values
height = 40, // svg height (without margins)
width = 600, // svg width (without margins)
line_height = height *0.8, // height of lines
stroke_width= 1, // stroke width of lines
stroke = '#0077B7', // colour of child lines
stroke_parent = '#ccc', // colour of parent lines
margin = {top: 15, right: 30, bottom: 0, left: 5}, // svg margins
} = {}) {
// set the dimensions and margins of the graph
const w = width - margin.left - margin.right
const h = height - margin.top - margin.bottom
const xScale = d3.scaleLinear()
.domain(domain)
.range([0, w])
const svg = DOM.svg(width, height);
const sel = d3.select(svg)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);
sel.selectAll('line')
.data(d3.range(data.parent_value))
.join('line')
.attr('x1', d => xScale(d))
.attr('x2', d => xScale(d))
.attr('y1', 0)
.attr('y2', line_height)
.attr('stroke-width', stroke_width)
.attr('stroke', d => {
if ((d + 1) <= data.child_value) {
return stroke
} else {
return stroke_parent
}
})
sel.append('text')
.attr('x', d => xScale(data.child_value -1))
.attr('y', -2)
.attr('font-size', '11px')
.attr('text-anchor', 'end')
.attr('fill', stroke)
.text(data.child_value)
sel.append('text')
.attr('x', d => xScale(data.parent_value -1))
.attr('y', -2)
.attr('font-size', '11px')
.attr('text-anchor', 'end')
.attr('fill', '#888')
.text(data.parent_value)
return svg;
}
<hr>
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<style>
text {
font-family:'Space Mono',monospace;
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.
