PhD student at the University of Edinburgh
chart = {
const svg = d3.select(DOM.svg(width, height))
.style("width", width)
.style("height", height)
.style('background-color', '#eee')
.attr("font-family", "sans-serif")
.attr("text-anchor", "middle");
const leaf = svg.selectAll("g")
.data(root.leaves())
.join("g")
.attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);
leaf.append("circle")
.attr("id", d => (d.leafUid = DOM.uid("leaf")).id)
.attr("r", d => d.r)
.attr("fill", d => (d.data.name === 'Drugs' ? '#ff8900' : '#888'));
leaf.append("text")
.selectAll('tspan')
.data(d => [d.data.name, formatPerc(d.data.perc)])
.join('tspan')
.attr('x', 0)
.attr('y', (d, i, nodes) => `${i * 1.3 - (nodes.length / 2) + 1}em`)
.attr('font-weight', (d, i) => (i == 0 ? 'bold' : 'normal'))
.attr('font-size', (d, i) => (i == 0 ? 16 : 14))
.text(d => d);
leaf.append("title")
.text(d => d.name);
return svg.node();
}
root = pack(data);
data = {
var dat = [{name: 'Property', value: 60000},
{name: 'Other', value: 1700},
{name: 'Violent', value: 53900},
{name: 'Drugs', value: 60200},
{name: 'Public Order', value: 31800}];
// add percentage
var total = d3.sum(dat, d=> d.value)
dat.map(function(d) { d.perc = d.value / total; return d })
return dat
}
pack = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(d3.hierarchy({children: data})
.sum(d => d.value))
width = 932
height = width
// format = d3.format(",d")
formatPerc = d3.format(".1%")
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.
