I am interested in Information visualisation, graph drawing and layout algorithms. I am also interested in full-stack software development & agile software development process.
Published
Edited
Jan 12, 2021
3 stars
graph = {
let graph = {
nodes: [],
links: []
};
for (let i = 0; i < numberOfNodes; i++) {
graph.nodes.push({
id: i,
name: i + 1 + "",
width: 60,
height: 40,
visible: true,
relativeX: 0,
relativeY: 5
});
for (let j = i + 1; j < numberOfNodes; j++) {
graph.links.push({ source: i, target: j, visible: true });
}
}
svgs.selectAll(".cleanOnInit").remove();
return graph;
}
svgs = d3.select(visual)
color = d3.scaleOrdinal(d3.schemeCategory10);
nodeGroup = {
let nodeGroup = svgs.selectAll(".draggableNodeGroup")
.data(graph.nodes)
.enter().append("g")
.attr("class", "draggableNodeGroup cleanOnInit")
.style("visibility", function (d) {
return d.visible == true ? "visible" : "hidden";
})
.attr("draggable", true)
.call(d3cola.drag()
.on("start", (d) => {
d.fx = d.x;
d.fy = d.y;
})
.on("drag", (d) => {
d.fx = d3.event.x;
d.fy = d3.event.y;
})
.on("end", (d) => {
d.fx = null;
d.fy = null;
})
);
return nodeGroup;
}
node = {
let node = nodeGroup
.append("circle")
.attr("class", "node cleanOnInit")
.attr("r", 20)
.attr("cx", 0)
.attr("cy", 0)
.attr("stroke-width", "4px")
.attr("stroke", "black")
.style("fill", function (d) { return color(d.id); });
node.append("title")
.text(function (d) { return d.name; });
nodeGroup.append("text")
.attr("class", "label cleanOnInit")
.text(function (d) { return d.name; })
.attr("x", function (d) {
return d.relativeX;
})
.attr("y", function (d) {
var that = this;
return d.relativeY;
});
return node;
}
link = {
let link = svgs.selectAll(".link")
.data(graph.links)
.enter().append("line")
.attr("class", "link cleanOnInit")
.style("visibility", function (d) {
return "visible";
});
return link;
}
configuration = new Object(
{
"originX": 0,
"originY": 0,
"dragStartX":0,
"dragStartY": 0,
"width": 30000,//Number.MAX_SAFE_INTEGER,
"height": 30000,//Number.MAX_SAFE_INTEGER
"svgWidth": 600,
"svgHeight": 600
});
d3cola = cola
.d3adaptor(d3)
.linkDistance(240)
.avoidOverlaps(true)
.size([configuration.svgWidth, configuration.svgHeight])
.nodes(graph.nodes)
.links(graph.links)
.on("tick", () => {
updateRender();
})
.start()
svgGroup = {
let svgGroup = svgs.selectAll(".draggableGroup")
.data([{"x": 0, "y": 0}])
.enter()
.append("g")
.attr("class", "draggableGroup" + " cleanOnInit")
// .attr("class", "draggableGroup")
.attr("id", "parentGroup")
.attr("draggable", true)
.lower()
.call(d3.drag()
.on('start', () => {
configuration.dragStartX = d3.event.x;
configuration.dragStartY = d3.event.y;
})
.on("drag", () => {
//apply transforma to graph
transformGroup(d3.event.x - configuration.dragStartX, d3.event.y - configuration.dragStartY);
updateRender();
configuration.dragStartX = d3.event.x;
configuration.dragStartY = d3.event.y;
})
.on("end", () => {
//apply transforma to graph
transformGroup(d3.event.x - configuration.dragStartX, d3.event.y - configuration.dragStartY);
updateRender();
configuration.dragStartX = d3.event.x;
configuration.dragStartY = d3.event.y;
})
);
return svgGroup;
}
rectangle = {
let rectangle = svgGroup
.selectAll(".background")
.data([{"x": 0, "y": 0}])
.enter()
.append("rect")
.attr("x", configuration.originX)
.attr("y", configuration.originY)
.attr("rx", 0)
.attr("ry", 0)
.attr("width", configuration.width)
.attr("height", configuration.height)
.attr("class", "background" + " cleanOnInit")
.style("stroke", "black")
.style("fill", "white")
.lower();
return rectangle;
}
transformGroup = (offsetX, offsetY) => {
console.log("graph.length: "+graph.nodes.length);
for (let node of graph.nodes){
node.x += offsetX;
node.y += offsetY;
}
}
function updateRender(){
let svg = d3.select("#mainSvg");
let nodeGroup = svg.selectAll(".draggableNodeGroup");
let link = svg.selectAll(".link");
let label = svg.selectAll(".label");
//update
nodeGroup.attr("transform", function (d) {
return "translate("+ (d.x) +","+ (d.y)+")";
});
link.attr("x1", function (d) { return (d.source.x); })
.attr("y1", function (d) { return (d.source.y); })
.attr("x2", function (d) { return (d.target.x); })
.attr("y2", function (d) { return (d.target.y); })
.style("visibility", function (d) {
return d.visible == true ? "visible" : "hidden";
});
}
html`<style>
.node {
stroke: #fff;
stroke-width: 1.5px;
cursor: move;
}
.link {
stroke: #999;
stroke-width: 3px;
stroke-opacity: 1;
}
.label {
fill: white;
font-family: Verdana;
font-size: 13px;
text-anchor: middle;
cursor: move;
}
.draggableGroup {
cursor: move;
transition: stroke-width 0.1s ease-out,
fill 0.1s ease-out,
stroke 0.1s ease-out;
stroke: white;
stroke-width: 0.25;
}
</style>
`
d3 = require("d3@5")
cola = require("webcola@3/WebCola/cola.min.js")
One platform to build and deploy the best data apps
Experiment and prototype by building visualizations in live JavaScript notebooks. Collaborate with your team and decide which concepts to build out.
Use Observable Framework to build data apps locally. Use data loaders to build in any language or library, including Python, SQL, and R.
Seamlessly deploy to Observable. Test before you ship, use automatic deploy-on-commit, and ensure your projects are always up-to-date.