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 pageReusable proportional circle area chartmodulo operation to create a grid v2Partition diagramD3 | single stacked barD3 | enclosing diagram | circle packline %Japan square map
Bar chart with just pipe character
barPipes(randomData)
function barPipes(data, {
width = 800,
padding = 20
} = {}) {
const sel = d3.create('div')
.attr('class', 'bar-pipe');
sel.append('ul')
.style('min-width', width + 'px')
.selectAll('li')
.data(data)
.join('li')
.attr('class', 'block pb1')
.attr('color', 'pipeColor')
.html(d => {
const pipes = repeatStringNumTimes('|', d.value)
return `${d.label} : <span class='pipe'>${pipes}</span> ${d.value}`
});
function repeatStringNumTimes (string, times) {
return times > 0 ? string.repeat(times) : '';
};
return sel.node();
}
randomNumber = (min, max) => {
return Math.floor((max - min + 1) * Math.random() + min)
}
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
<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>
.bar-pipe {
font-size: 14px;
font-family: 'Space Mono', monospace;
font-weight: 400;
color: #454545;
padding-bottom: 20px
}
.pipe {
color: tomato;
font-weight: bold;
letter-spacing: -5px;
font-size: 18px;
}
</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.
