vis_app_1

Basic force directed layout

by Simon Raper

HTML

<script src="http://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
<script src="https://underscorejs.org/underscore-min.js"></script>
<div id ="chart"></div>

CSS

.node {
    stroke: #fff;
    stroke-width: 1.5px;
}
.link {
    stroke: #999;
    stroke-opacity: .6;
}

JavaScript

//Data

progs = {"younger_segment": {
    "nodes": [{
        "name": "Cops",
        "group": 1,
        "audience_size": 34
    }, {
        "name": "The Day This Morning",
        "group": 1,
        "audience_size": 16
    }, {
        "name": "Love Rats",
        "group": 2,
        "audience_size": 11
    }, {
        "name": "Big Feet",
        "group": 2,
        "audience_size": 28
    }, {
        "name": "Another Reality Show",
        "group": 2,
        "audience_size": 10
    }, {
        "name": "Star Wars Makeovers",
        "group": 3,
        "audience_size": 4
    }, {
        "name": "Film Night",
        "group": 3,
        "audience_size": 8
    }, {
        "name": "The Evening News",
        "group": 1,
        "audience_size": 44
    }, {
        "name": "Bored",
        "group": 3,
        "audience_size": 18
    }],
    "links": [{
        "source": 0,
        "target": 1,
        "value": 20
    }, {
        "source": 0,
        "target": 2,
        "value": 30
    }, {
        "source": 1,
        "target": 4,
        "value": 22
    }, {
        "source": 6,
        "target": 2,
        "value": 5
    }, {
        "source": 1,
        "target": 7,
        "value": 5
    }, {
        "source": 3,
        "target": 8,
        "value": 15
    }, {
        "source": 5,
        "target": 8,
        "value": 15
    }]
},
    "older_segment": {
        "nodes": [{
            "name": "Cops",
            "group": 1,
            "audience_size": 12
        }, {
            "name": "The Day This Morning",
            "group": 1,
            "audience_size": 55
        }, {
            "name": "The Parson's Daughter",
            "group": 2,
            "audience_size": 74
        }, {
            "name": "Big Feet",
            "group": 2,
            "audience_size": 8
        }, {
            "name": "Inspector Peabody Investigates",
            "group": 2,
            "audience_size": 27
        }, {
            "name": "Watercolour...