Published
Edited
Nov 24, 2019
2 stars
Insert cell
Insert cell
chart = {
const root = pack(data);
const svg = d3.create("svg")
.attr("viewBox", [0, 0, width, height])
.attr("font-size", 10)
.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("path")
.attr("d", d => {
const h = (Math.sqrt(3)/2),
radius = d.r,
xp = 0,
yp = 0,
hexagonData = [
{ "x": radius+xp, "y": yp},
{ "x": radius/2+xp, "y": radius*h+yp},
{ "x": -radius/2+xp, "y": radius*h+yp},
{ "x": -radius+xp, "y": yp},
{ "x": -radius/2+xp, "y": -radius*h+yp},
{ "x": radius/2+xp, "y": -radius*h+yp}
];
return drawHexagon(hexagonData);
})
.attr("id", d => (d.leafUid = d.data.patientId))
.attr("fill", d => color(d.data.cluster))
.attr("stroke", d => color(d.data.cluster))
.attr("stroke-opacity", d => d.data.gender === 'Female' ? 0 : 1.0)
.attr("fill-opacity", d => d.data.gender === 'Female' ? 0 : 0.5);

leaf.append("circle")
.attr("id", d => (d.leafUid = d.data.patientId))
.attr("r", d => d.r)
.attr("fill", d => color(d.data.cluster))
.attr("stroke", d => color(d.data.cluster))
.attr("stroke-opacity", d => d.data.gender === 'Male' ? 0 : 1.0)
.attr("fill-opacity", d => d.data.gender === 'Male' ? 0 : 0.5);

leaf.append("clipPath")
.attr("id", d => (d.clipUid = d.data.patientId))
.append("use")
.attr("xlink:href", d => d.leafUid.href);

leaf.append("text")
.attr("clip-path", d => d.clipUid)
.text(d => d.data.patientId);
leaf.append("title")
.text(d => d.data.patientId);
return svg.node();
}
Insert cell
drawHexagon = d3.line()
.x(function(d) { return d.x; })
.y(function(d) { return d.y; })
.curve(d3.curveCardinalClosed.tension(0.5));
Insert cell
clusters = d3.csvParse(await FileAttachment("raw_result-time-0.csv").text(), (item) => {
Object.keys(item).forEach(el => {
item[el] = parseInt(item[el])
});
return item;
});
Insert cell
patients = d3.csvParse(await FileAttachment("patients_complete.csv").text());
Insert cell
data = clusters.filter(d => patients.find((patient) => patient.patientId === String(d.patientId)))
.map(d => ({...d, ...patients.find(patient => patient.patientId === String(d.patientId))}))
.sort((a,b) => b.cluster - a.cluster);
Insert cell
pack(data).leaves()
Insert cell
pack = data => d3.pack()
.size([width - 2, height - 2])
.padding(3)
(d3.hierarchy({children: data})
.sum(d => d.cluster + 1))
Insert cell
width = 932
Insert cell
height = width
Insert cell
format = d3.format(",d")
Insert cell
color = d3.scaleOrdinal().domain(d3.extent(data.map(d => d.cluster))).range(['red', 'orange', 'green'])
Insert cell
d3 = require("d3@5")
Insert cell
_ = require("lodash");
Insert cell

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