Back

Bubble map (mind map)

Javascript mind map example that shows each idea as a node. Uses 'Radial' layout mode to arrange nodes in a circle that stem from the central parent node.

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 
chart= new NetChart({
    "navigation": {
        "focusNodeExpansionRadius": 2,
        "initialNodes": [
            "node1"
        ],
        "mode": "focusnodes"
    },
    "layout": {
        "mode": "radial",
        "nodeSpacing": 45
    },
    "style": {
        "node": {
            "display": "roundtext"
        }
    },
    "container": "demo",
    "data": [
        {
            "url": "/dvsl/data/extra/ideas.json"
        }
    ],
    "toolbar": {
        "fullscreen": true,
        "enabled": true
    },
    "interaction": {
        "resizing": {
            "enabled": false
        }
    }
})

Data

Data 
{
    "nodes": [
        {
            "id": "node1",
            "loaded": true,
            "style": {
                "label": "Ideas"
            }
        },
        {
            "id": "node2",
            "loaded": true,
            "style": {
                "label": "Idea #2"
            }
        },
        {
            "id": "node3",
            "loaded": true,
            "style": {
                "label": "Idea #3"
            }
        },
        {
            "id": "node4",
            "loaded": true,
            "style": {
                "label": "Idea #4"
            }
        },
        {
            "id": "node5",
            "loaded": true,
            "style": {
                "label": "Idea #5"
            }
        },
        {
            "id": "node6",
            "loaded": true,
            "style": {
                "label": "Idea #6"
            }
        },
        {
            "id": "node7",
            "loaded": true,
            "style": {
                "label": "Idea #7"
            }
        }
    ],
    "links": [
        {
            "id": "link1",
            "from": "node1",
            "to": "node2"
        },
        {
            "id": "link2",
            "from": "node1",
            "to": "node3"
        },
        {
            "id": "link3",
            "from": "node1",
            "to": "node4"
        },
        {
            "id": "link4",
            "from": "node1",
            "to": "node5"
        },
        {
            "id": "link5",
            "from": "node1",
            "to": "node6"
        },
        {
            "id": "link6",
            "from": "node1",
            "to": "node7"
        }
    ]
}
Download Data