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 barcodeflow 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
Triangle radar
vis = html`<div class="vis-rb"></div>`
viewof val_a = Inputs.range([0, 1], {label: "Value A:", step: 0.1, value: 0.20})
viewof val_b = Inputs.range([0, 1], {label: "Value B:", step: 0.1, value: 0.44})
viewof val_c = Inputs.range([0, 1], {label: "Value C:", step: 0.1, value: 0.86})
radar(data, {
bind: d3.select(vis), // pass in the selection
})
function radar (data, {
bind = null,
f = d3.format('.1f'),
margin = { top: 100, right: 100, bottom: 50, left: 100 },
height = 300,
width = 300,
factorLegend = 0.95,
radians = 2 * Math.PI,
labelKey = 'label',
keyValues = {
label: 'label',
value: 'value',
},
strokeWidth = 8, // width of the stroke around each blob
strokeColour = '#0d75ff',
axisColour = '#D9D9D9',
axisLabelColour = '#c7c7c7',
dataLabelColour = '#454545',
outerRadius = height / 2 - 10,
bgdCol = '#f1f2f0'
} = {}) {
// set the dimensions and margins of the graph
const w = width + margin.left + margin.right
const h = height + margin.top + margin.bottom
const angle = d3.scaleLinear()
.range([0, 2 * Math.PI])
const radius = d3.scaleLinear()
.range([0, outerRadius])
const line = d3.lineRadial()
.curve(d3.curveCardinalClosed)
.angle((d, i) => angle(i))
.radius(d => radius(d.value))
bind.selectAll('svg').remove();
const svg = bind.append('svg')
.attr('width', w)
.attr('height', h)
const g = svg.append('g')
.attr('transform', `translate(${margin.left}, ${margin.top})`)
// extend the domain slightly to match the range of [0, 2π].
angle.domain([0, d3.max(data, (d, i) => i + 1)])
radius.domain([0, 1])
// axis
g.append('g')
.selectAll('g.axis')
.data(d3.range(angle.domain()[1]))
.join('g')
.attr('class', 'axis')
.append('line')
.attr('x1', width / 2)
.attr('y1', height / 2)
.attr('x2', (d, i) => (width / 2) * (1 - factorLegend * Math.sin((i * radians) / 3)))
.attr('y2', (d, i) => (height / 2) * (1 - factorLegend * Math.cos((i * radians) / 3)))
.attr('stroke', axisColour)
.attr('stroke-width', 2)
// line
g.append('g')
.attr('transform', `translate(${width / 2}, ${height / 2})`)
.selectAll('path.layer')
.data([data])
.join('path')
.attr('class', 'layer')
.attr('d', d => line(d))
.attr('stroke', strokeColour)
.attr('stroke-width', strokeWidth)
.attr('fill', 'none')
const labelX = (d, i) => (width / 2) * (1 - factorLegend * Math.sin((i * radians) / 3)) - 20 * Math.sin((i * radians) / 3)
const labelY = (d, i) => (height / 2) * (1 - Math.cos((i * radians) / 3)) - 20 * Math.cos((i * radians) / 3)
// category labels
g.append('g')
.selectAll('g.label')
.data(data)
.join('text')
.attr('class', 'label')
.attr('x', (d, i) => labelX(d, i))
.attr('y', (d, i) => labelY(d, i))
.attr('transform', (d, i) => (i === 0) ? 'translate(0, -10)' : 'translate(0, -30)')
.attr('dy', '1.5em')
.attr('text-anchor', 'middle')
.attr('fill', axisLabelColour)
.text(d => d[keyValues.label])
// value labels
g.append('g')
.selectAll('g.value')
.data(data)
.join('text')
.attr('class', 'label')
.attr('x', (d, i) => labelX(d, i))
.attr('y', (d, i) => labelY(d, i))
.attr('transform', (d, i) => (i === 0) ? 'translate(0, -30)' : 'translate(0, -10)')
.attr('dy', '1.5em')
.attr('text-anchor', 'middle')
.attr('fill', dataLabelColour)
.text(d => f(d[keyValues.value]))
return svg;
}
data = [
{
"value": val_a,
"label": "A"
},
{
"value": val_b,
"label": "B"
},
{
"value": val_c,
"label": "C"
}
]
visWrap = html`<div class="vis-1 flex flex-wrap "></div>`
{ // have a way of updating the cell put not creating extra dom elements
if (d3.select(visWrap).empty()) { // don't reload on any cell refreshes
testMultipleRender(visWrap );
} else {
d3.select(visWrap).selectAll('div').remove();
testMultipleRender(visWrap );
}
}
flexWidth = 165
function testMultipleRender(sel) { // render dom and bind svg visual to itd3.range(10).map(d => {
return d3.range(6).map(d => {
return [ // some dummy data
{
value: d3.randomUniform(0.2, 1)(),
label: 'A',
},
{
value: d3.randomUniform(0.2, 1)(),
label: 'B',
},
{
value: d3.randomUniform(0.2, 1)(),
label: 'C',
}
]
}).forEach((d, i) => {
const div = d3.select(sel).append('div').attr('class', 'm1 ref-' + i).style('background', '#efefef');
d3.select('.ref-' + i).append('h3').attr('class', 'ml2 normal label mb0 pb0 pt2').text('group: ' + (i + 1));
radar(d, {
bind: d3.select('.ref-' + i),
width: flexWidth,
height: flexWidth,
strokeColour: randomColor(0.8, 0.8),
});
})
}
import {randomColor} from "@fil/random-colors"
<hr>
<link href="https://fonts.googleapis.com/css?family=Space+Mono" rel="stylesheet">
<link href="https://unpkg.com/basscss@8.0.2/css/basscss.min.css" rel="stylesheet">
<style>
text {
font-family:'Space Mono',monospace;
fill: #130C0E;
font-size: 11px;
}
.label {
font-family:'Space Mono',monospace;
color: #454545;
font-size: 13px;
}
</style>
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.