Published
Edited
Nov 9, 2021
1 star
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
function hexDistort() {
const max = Math.max(...nodes.map(n => n.x), Math.abs(Math.min(...nodes.map(n => n.x))))
nodes.forEach(n => { n.activeColor = null })
nodes.filter((n, i) => i >= 0).forEach(n => {
n.activeColor = 'orange'
console.log(n.y, n.x)
const angleRadians = Math.atan2(n.y, n.x) + Math.PI / 2 + Math.PI * 2;
n.activeColor = highlightColor(angleRadians % (Math.PI / 3))
n.x *= 0.8 + 0.2 * distortFactor(angleRadians % (Math.PI / 3))
n.y *= 0.8 + 0.2 * distortFactor(angleRadians % (Math.PI / 3))
console.log(angleRadians, n.activeColor)
})
// for (let node of nodes) {
// // Of the positions exceed the box, set them to the boundary position.
// // You may want to include your nodes width to not overlap with the box.
// // node.x = Math.max(-radius, Math.min(radius, node.x));
// // node.y = Math.max(-radius, Math.min(radius, node.y));
// }
}
data = FileAttachment("graph.json").json()
height = 600
distortFactor = d3.scaleLinear().domain([0, Math.PI / 6, Math.PI / 3]).range([1, 0, 1])
highlightColor = d3.scaleLinear().domain([0, Math.PI / 6, Math.PI / 3]).range(['blue', 'red', 'blue'])
color = {
const scale = d3.scaleOrdinal(d3.schemeCategory10);
return d => scale(d.group);
}
drag = simulation => {
function dragstarted(d) {
if (!d3.event.active) simulation.alphaTarget(0.3).restart();
d.fx = d.x;
d.fy = d.y;
}
function dragged(d) {
d.fx = d3.event.x;
d.fy = d3.event.y;
}
function dragended(d) {
if (!d3.event.active) simulation.alphaTarget(0);
d.fx = null;
d.fy = null;
}
return d3.drag()
.on("start", dragstarted)
.on("drag", dragged)
.on("end", dragended);
}
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.
