PhD Candidate @densitydesign
Published
Edited
Jan 12, 2021
chart = {
const svg = d3.select(DOM.svg(width, height));
var radialGradient = svg
.append("defs")
.append("radialGradient")
.attr("id", "radial-gradient");
var blur = svg
.append("defs")
.append("filter")
.attr("id", "blur")
.append("feGaussianBlur")
.attr("stdDeviation", 2);
let sharpen = svg
.append("defs")
.append("filter")
.attr("id", "sharpen")
.append("feColorMatrix")
.attr("in", "blur")
.attr("mode", "matrix")
.attr("values", "1 0 0 0 0 0 1 0 0 0 0 0 1 0 0 0 0 0 19 -9");
radialGradient
.append("stop")
.attr("offset", "0%")
.attr("stop-color", "#DBD2E0");
radialGradient
.append("stop")
.attr("offset", "75%")
.attr("stop-color", "rgb(254,134,74)");
radialGradient
.append("stop")
.attr("offset", "100%")
.attr("stop-color", "#e91e03");
//svg.attr("filter", "url(#sharpen)");
var groups = _(nodes)
.map('cluster')
.uniq()
.sort()
.value();
// mutate to add the group
_.each(nodes, (n, i) => {
n.group = nodes[i].cluster;
});
// now group by group
const nodeGroups = _.groupBy(nodes, 'group');
console.log(nodeGroups);
const hulls = svg
.append("g")
.selectAll('path')
.data(groups)
.enter()
.append('path')
.style('stroke', "rgba(0,0,0,0.5)")
.style('fill', d => background(d))
.style('stroke-width', 3)
.style('stroke-opacity', 1)
.style('fill-opacity', 1)
.attr('stroke-linejoin', 'round');
//.attr("filter", "url(#blur)");
const node = svg
.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 2)
.attr("fill", d => color(d.affiliation))
.attr("fill-opacity", 1);
simulation.on("tick", () => {
node.attr("cx", d => d.x).attr("cy", d => d.y);
hulls.attr('d', g => {
let hullPoints = nodeGroups[g].map(n => {
return [n.x, n.y];
});
const hullData = d3.polygonHull(hullPoints);
if (hullData === null) {
return;
}
hullData.push(hullData[0]);
return d3.line()(hullData);
});
});
invalidation.then(() => simulation.stop());
return svg.node();
}
color = d3.scaleOrdinal(d3.schemeDark2)
background = d3.scaleOrdinal(d3.schemeSet3)
nodes = data.map(d => {
return {
type: d.type,
affiliation: d.affiliation,
cluster: d.affiliation,
topic: d.topic,
prize: d.prize
};
})
height = 300
simulation = d3
.forceSimulation(nodes)
.force(
"forceInABox",
forceInABox()
.strength(0.2) // Strength to cluster center
.template("treemap") // Either treemap or force
.groupBy("cluster") // Node attribute to group
.links([]) // If you have links you can also use them
.forceNodeSize(0.5)
.size([width, height])
)
.force(
"collide",
d3
.forceCollide()
.radius(3)
.strength(0.8)
.iterations(5)
)
d3 = require("d3@5", "d3-array@2")
_ = require('lodash@4.17.10')
`const node = svg
.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("cx", width / 2)
.attr("cy", height / 2)
.attr("r", 2)
.attr("fill", d => color(d.type))
.attr("fill-opacity", 1);
node.attr("cx", d => d.x).attr("cy", d => d.y);
`
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.
