DataViz
Skills
Visualization
Force-Directed Layout
Cytoscape Skills Data Visualization
Scott C. Krause | Saturday, Feb 20, 2021
I love interaction. I create websites that engage, excite, and inform in a way that is fun. Most of my day is spent enchanting websites with the little details that you will never find in a sea of boring template sites.
It's important to present information in a way that tells a story. Like a mystery it should give up its secrets with a few inspired clicks.
To that end, I've been experimenting with network graphs to display complex information in a way that is instantly intuitive, discoverable, and fun.
Cytoscape.js seemed like the logical next step after working with D3.js for a while.
For the Cytoscape graph I use the same dataset that I used in the D3 graph. That is a hierarchical view of my skill set in JSON. Here I present the JavaScript code to convert the JSON from it's D3 format to one that can be easily consumed by Cytoscape.
This graph utilizes the fCoSE layout plugin.
Pro ⚡ Tips
💡 Create a link to download a PNG image of the CURRENT graph on the canvas.
document.body.dataset.cyReady = "true";
var text, name, file;
var eA = document.getElementById("downloadPNG");
if( eA ){ // Download image of graph
eA.addEventListener("mouseover", (ev)=>{
text = window.cy.png({'output': 'blob'});
name = "skills_graph.png"; type = "image/png";
file = new Blob([text], { type: type });
eA.href = URL.createObjectURL(file);
eA.download = name;
});
}
Cytoscape Format
Fetch JSON
fetch("skills_strategic_competencies.json")
.then(response => response.json()) // Get skills
.then((aSkills) => {
doCyto( doCYSP_json(aSkills) );
});
Reformat JSON
function doCYSP_json( aSkills ){ // Convert to Cytoscape format
let aCYSP_nodes = [], aCYSP_edges = [];
aSkills.map( (dSkill, nDx) =>{
aCYSP_nodes.push( {"data":{"id": "n"+nDx, "name": dSkill.name}});
dSkill.target.forEach(nTarget => {
aCYSP_edges.push( {"data":{"source": "n"+nDx, "target": "n" + nTarget }});
});
});
return [aCYSP_nodes, aCYSP_edges];
}
