Published
Edited
May 7, 2020
md`# pzz`
chart3.update(layout)
chart1 = {
const arcs = pie(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", arc)
.append("title")
.text(d => `${d.data.name}: ${d.data.value}`);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.maxRadius));
return svg.node();
}
chart2 = {
const maxSize = _.chain(data).map(v => v.maxRadius).max().value();
const arcs = d3.pie()
.sort(null)
.value(d => 1)(data);
const svg = d3.create("svg")
.attr("viewBox", [-width / 2, -height / 2, width, height]);
svg.append("g")
.attr("stroke", "white")
.selectAll("path")
.data(arcs)
.join("path")
.attr("fill", d => color(d.data.name))
.attr("d", d => (d3.arc()
.innerRadius(0)
.outerRadius(((Math.min(width, height) / 2 - 1))*d.data.maxRadius/maxSize )(d))
)
.append("title")
.text(d => `${d.data.name}: ${d.data.value}`);
svg.append("g")
.attr("font-family", "sans-serif")
.attr("font-size", 12)
.attr("text-anchor", "middle")
.selectAll("text")
.data(arcs)
.join("text")
.attr("transform", d => `translate(${arcLabel.centroid(d)})`)
.call(text => text.append("tspan")
.attr("y", "-0.4em")
.attr("font-weight", "bold")
.text(d => d.data.name))
.call(text => text.filter(d => (d.endAngle - d.startAngle) > 0.25).append("tspan")
.attr("x", 0)
.attr("y", "0.7em")
.attr("fill-opacity", 0.7)
.text(d => d.data.maxRadius));
return svg.node();
}
chart0 = {
const pattern = '#'
const maxLength = 80
const maxSize = _.chain(data).map(v => v.maxRadius).max().value();
const div = d3.create('div')
// .style('font-family', 'monospace')
;
div.selectAll('p')
.data(data)
.enter()
.append('p')
.text(d => d.name + ':' + _.repeat(pattern, d.maxRadius*d.maxRadius / (maxSize*maxSize) * maxLength ))
;
return div.node()
}
data = {
const rawData = [
{ name : 'CC', radii : [ { l : '', v : 18.1 } ] },
{ name : 'PM', radii : [ { l : 'J', v : 18 }, { l : '', v : 13 } ] },
{ name : 'EM', radii : [ { l : '', v : 17.7 } ] },
{ name : 'PH', radii : [ { l : 'F', v : 15 }, { l : 'L', v : 13 }, { l : 'M', v : 10 } ] },
{ name : 'PJ', radii : [ { l : 'F', v : 14 }, { l : 'L', v : 12 }, { l : 'R', v : 9 } ] },
{ name : 'MP', radii : [ { l : 'L', v : 13.77 }, { l : 'M', v : 11 } ] },
{ name : 'DP', radii : [ { l : 'L', v : 13 }, { l : 'M', v : 10 } ] },
{ name : 'PS', radii : [ { l : 'L' , v : 12 } ] },
];
return _.chain(rawData)
.map(v => _.merge(v, { maxRadius : _.chain(v.radii).map(radius => radius.v).max().value() }) )
.sortBy([p => -p.maxRadius])
.value();
}
_ = require("lodash")
height = Math.min(width, 500)
pie = d3.pie()
.sort(null)
.value(d => d.maxRadius*d.maxRadius)
arcLabel = radius => d3.arc().innerRadius(radius).outerRadius(radius);
color = d3.scaleOrdinal()
.domain(data.map(d => d.name))
.range(d3.quantize(t => d3.interpolateSpectral(t * 0.8 + 0.1), data.length).reverse())
arc = d3.arc()
.innerRadius(0)
.outerRadius(Math.min(width, height) / 2 - 1)
d3 = require("d3@5")
//
// https://observablehq.com/@d3/pie-chart
// https://observablehq.com/@d3/stacked-to-grouped-bars?collection=@d3/d3-transition
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.
