Public
Edited
Apr 16, 2023
1 star
Insert cell
Insert cell
visWrap = html`<div class="vis-1 flex flex-wrap "></div>`
Insert cell
data = setTotals._data.count.data
Insert cell
data.forEach((d, i) => {
const div = d3.select(visWrap).append('div').attr('class', 'ref-' + i);
concentricPctLines(d, {
bind: d3.select('.ref-' + i),
swatch: i,
margin: {top: 30, right: 30, bottom: 50, left: 10},
max: d3.max(data) + 10,
})
})
Insert cell
setTotals = aq.from(colours)
.groupby('swatch')
.count()

Insert cell
setTotals
Insert cell
setTotals.view()
Insert cell
setTotals
Insert cell
setTotals._data.count.data
.reduce((a, b) => a +b );

Insert cell
Plot.plot({
x: {
label: "set"
},
y: {
grid: true
},
marks: [
Plot.barY(setTotals, {x: d => d.swatch + 1, y: "count"})
]
})
Insert cell
Insert cell
viewof table = Inputs.table(colours.filter(d => d.swatch === set))
Insert cell
Insert cell
function concentricPctLines (datum, {
bind = null, // pass in a d3 selection i.e d3.select('class/div')
f = d3.format('.1f'),
swatch = null,
margin = {top: 10, right: 10, bottom: 30, left: 10},
circleSize = 350,
width = (circleSize * 2) + (margin.left + margin.right),
height = circleSize * 1.8 + (margin.top + margin.bottom),
max = 100,
domain = [0, max], // max in data
range = [0, circleSize],
} = {}) {

// set the dimensions and margins of the graph
const w = width - margin.left - margin.right
const h = height - margin.top - margin.bottom

const colourArray = colours.filter(obj => obj.swatch === swatch)
bind.selectAll('svg').remove();
const sel = bind.append('svg')
.attr('width', width)
.attr('height', height)
.append('g')
.attr('transform', `translate(${margin.left},${margin.top})`);

const scale = d3.scaleLinear();
scale.domain(domain).range(range);

const r = scale(circleSize); // radius of full circle
const translate = `translate(${width / 2},${(height - margin.bottom) / 2 })`;

const active = sel.append('g')
.attr('class', 'g-active-wrap')
.attr('transform', translate);

active.selectAll('circle')
.data(d3.range(datum))
.join('circle')
.attr('r', d => scale(d + 1))
.attr('fill', 'none')
.attr('stroke', d => {
const obj = colourArray[d]
const rgb = d3.rgb(obj.rgb[0], obj.rgb[1], obj.rgb[2]);
return rgb;
})
.attr('stroke-width', 4);
// show pct
active.append('text')
.attr('class', 'percent-label')
.attr('y', scale(datum))
.attr('dy', 35)
.style('text-anchor', 'middle')
.text(datum);

return sel;

}
Insert cell
import {aq, op} from "@uwdata/arquero"
Insert cell
function isOdd(num) { return num % 2;}
Insert cell
Insert cell
Insert cell
colours = coloursJson.map((d, i) => {
const o = {...d};
o.index = i + 1; // have an index reference
return o;
})
Insert cell
Insert cell
<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;
}
</style>
Insert cell

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.
Learn more