Data Visualization Designer. R, Python, JS.
drawNetwork(updatedGraph)
function drawNetwork(graph) {
const nodes = pack(graph.nodes);
const areaForceOnly = d3.scaleOrdinal()
.domain(["area", "employee"])
.range([true, false]);
const simulation = d3.forceSimulation(nodes)
.force("cluster", forceCluster(centroid))
.force("collide", forceCollide())
.force('x', d3.forceX()
.strength((d) =>d.data.type === "area" ? 1: 0.01)
.x((d) => d.data.type === "area" ? d.data.xRadial: width/2)
)
.force('y', d3.forceY()
.strength((d) =>d.data.type === "area" ? 1: 0.01)
.y((d) => d.data.type === "area" ? d.data.yRadial: height/2)
);
// settings
const stage = new PIXI.Container();
const renderer = PIXI.autoDetectRenderer({
width: width,
height: height,
antialias: true,
autoResize:true,
resolution: 2,
backgroundColor: 0x000000
});
const context = new PIXI.Graphics()
stage.addChild(context);
// allows to children to use zIndex sorting
stage.sortableChildren = true;
const svg = d3.select(DOM.svg(width, height));
//d3 radius scaling function
const radiusScale = d3.scaleSqrt()
.domain(d3.extent(nodes, d => d.data.nEmployee))
.range([3, 25]);
// d3 color scaling function
const color = (function(num, colorPalette = d3.schemeCategory10) {
let palette = ["#E0E0E0"];
if (viewValue) {
palette = palette.concat(colorPalette);
}
let scale = d3.scaleOrdinal(palette);
return scale;
// return (num) => parseInt(scale(num).slice(1), 16);
})();
const node = svg.append("g")
.selectAll("circle")
.data(nodes)
.join("circle")
.attr("cx", d => d.x)
.attr("cy", d => d.y)
.attr("fill", d => color(d.data.group))
.attr("r", d => radiusScale(d.data.nEmployee))
.call(drag(simulation));
simulation.on("tick", () => {
node
.attr("cx", d => d.x)
.attr("cy", d => d.y);
});
invalidation.then(() => simulation.stop());
return svg.node();
}
updatedLinks = network.links
updatedGraph = {
return {"nodes": updatedNodes, "links": updatedLinks}
}
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.
