PhD student at the University of Edinburgh
Are Diaper Sizes Standard?Food Prices of India, 1994–2021Sneaker Sales by State for Off-White and Yeezy from StockXAtheletic Running ShoesShoe Brands on the Grouse GrindNike Quarterly StatementMonthly Retail Trade Report: Time machineIndustry, Pricing, OpportunityMonthly Retail Trade ReportRetail Commodity Sales
Sneaker Colour Circle Chart
chart = {
const w = 960;
const h = w;
const svg = d3.select(DOM.svg(w,h))
const g = svg.append("g").attr("transform", "translate(" + w/2 + "," + h/2 + ")");
// define outer arc
const arcOuter = d3.arc()
.innerRadius(.225 * w)
.outerRadius(.4 * w)
.padAngle(0.001*tau)
// define inner arc
const arcInner = d3.arc()
.innerRadius(.17 * w)
.outerRadius(.2225 * w)
.padAngle(0.0015*tau)
// define separate arc for labels on the outer arc
const arcOuterLabels = d3.arc()
.innerRadius(.245 * w)
.outerRadius(.245 * w)
// add start and end angle to data
const seg = tau / outer.length;
outer.forEach(function(el, i, arr) {
el.startAngle = i*seg;
el.endAngle = (i+1)*seg
})
// draw inner pie
const pieInner = g.selectAll(".inner")
.data(inner)
.enter()
.append("path")
.classed("inner", true)
.attr("id", function(d,i) { return "innerArc_"+i; })
.style("fill", function(d) {return d.hex})
.attr("d", function(d,i) {return arcInner({startAngle:d.s*seg, endAngle:d.e*seg})});
// draw outer pie
const pieOuter = g.selectAll(".outer")
.data(outer)
.enter()
pieOuter.append("path")
.classed("outer", true)
.style("fill", function(d) {return d.hex})
.attr("d", arcOuter);
// add labels on the inner part
g.selectAll(".innerLabel")
.data(inner)
.enter()
.append("text")
.attr("x", 10)
.attr("dy", 25)
.style("fill", "#fff")
.attr("class", ".innerLabel")
.append("textPath")
.attr("xlink:href", function(d,i) {return "#innerArc_"+i;})
.attr("dominant-baseline", "central")
.text(function(d){return d.name;})
.attr("font-size", (11/750)*w + "px");
// add labels on the outer part
pieOuter.append("text")
.attr("id", function(d) {return d.name})
.attr("transform", function(d) { return "translate(" + arcOuterLabels.centroid(d) + ") rotate(" + ((d.startAngle + d.endAngle) * 180 / tau - 90) + ")"; })
.attr("dominant-baseline", "central")
.text(function(d) { return d.name;})
.attr("font-size", (11/750)*w + "px")
.style("fill", "#fff")
// pick the one white piece and colour the text grey
svg.select("#white").style("fill", "#ccc")
return svg.node()
}
outer = [
{hex:"#D8E30B", name:"volt"},
{hex:"#E9CF3A", name:"tour yellow"},
{hex:"#F76323", name:"total orange"},
{hex:"#FA5852", name:"hot punch"},
{hex:"#B3242B", name:"speed red"},
{hex:"#EE2851", name:"solar red"},
{hex:"#BC2772", name:"fuchsia blast"},
{hex:"#9C2364", name:"hyper magenta"},
{hex:"#744080", name:"hyper grape"},
{hex:"#ABC7CE", name:"ocean bliss"},
{hex:"#0086BB", name:"photo blue"},
{hex:"#2F3F87", name:"ultramarine"},
{hex:"#006B85", name:"neo turquoise"},
{hex:"#009A87", name:"clear emerald"},
{hex:"#565030", name:"medium olive"},
{hex:"#9A7F6E", name:"sepia stone"},
{hex:"#D9A89A", name:"coral stardust"},
{hex:"#BBAFAB", name:"desert sand"},
{hex:"#BEB0B4", name:"moon particle"},
{hex:"#E4E5E2", name:"barely grey"},
{hex:"#FFFFFF", name:"white"},
{hex:"#D1D9DE", name:"pure platinum"},
{hex:"#959FAB", name:"light pumice"},
{hex:"#48484A", name:"anthracite"},
{hex:"#151112", name:"oil grey"},
{hex:"#000000", name:"black"}
]
inner = [
{hex:"#efe41c", name:"yellows", s:0, e:2},
{hex:"#b9121a", name:"reds", s:2, e:9},
{hex:"#0068bb", name:"blues", s:9, e:14},
{hex:"#a7a7a7", name:"neutrals", s:14, e:26}
]
tau = 2 * Math.PI;
html`
<link href="https://fonts.googleapis.com/css?family=Raleway" rel="stylesheet">
<style>
svg {
font-family: "Raleway", serif;
text-transform: uppercase;
}
</style>
`
d3 = require("d3@5")
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.
