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 Graph

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];
}