Back

Network graph - nodes with custom thumbnails

Website sitemap visualized as a JavaScript graph chart. Each website page displayed as a node with its own thumbnail. Initial view shows the top level directories, and clicking will reveal its subdirectories or files.

Documentation Open in JSFiddle
Start Free Trial Purchase

HTML

HTML 
<script src="https://cdn.zoomcharts-cloud.com/1/nightly/zoomcharts.js"></script>
<div id="demo"></div>

CSS

CSS 
//No CSS for this example

JavaScript

JavaScript 
var t = new NetChart({
    container: document.getElementById("demo"),
    data:{ url: "/dvsl/data/net-chart/map-mst.json" },
    navigation:{
        initialNodes:["https://zoomcharts.com/en/"],
        mode:"focusnodes",
        focusNodeExpansionRadius: 1
    },
    style:{
        nodeStyleFunction: nodeStyle,
        nodeLabel:{
            padding:1,
            backgroundStyle: {
                fillColor:'#09c'
            },
            textStyle: {
                fillColor: "white" 
            }
        }
    }
});

function nodeStyle(node){
    if (node.data.label){
        node.label = node.data.label;
    } else {
        node.label = node.id;
    }

	node.image = "/dvsl/doc/net-chart/images/screenshots-min/" + 
		node.label
			.replace(new RegExp("[^a-zA-Z0-9]", "g"), " ")
			.trim()
			.replace(new RegExp("[ -]+", "g"), "-") + 
			".jpg";


	node.label = node.label
		.replace(new RegExp("https:\/\/zoomcharts\\.com\/", "g"), "")
		.split("/")
		.join("/");

    var radius = 0;
    if (node.dataLinks && node.dataLinks.length){
        radius = node.dataLinks.length+10;
    }
    node.radius = radius;

    //add plus marks on nodes that have hidden links
    if (node.dataLinks.length > node.links.length){
        node.items = [{px: 0,py:-1, text:"+", backgroundStyle:{fillColor: "orange"}}];
    }else{
        node.items = [];
    }

}

Data

Data 
//Data too large to output
Download Data