Graph display from TSNE

.block

license: gpl-3.0

README.md

This example demonstrates a graph visualisation created using TSNE.

There is no TSNE code here - this is just code to display the results applied to the Les Mis network

edges.json

[{"from":0,"to":1,"weight":1},{"from":0,"to":2,"weight":8},{"from":2,"to":3,"weight":6},{"from":0,"to":3,"weight":10},{"from":0,"to":4,"weight":1},{"from":0,"to":5,"weight":1},{"from":0,"to":6,"weight":1},{"from":0,"to":7,"weight":1},{"from":0,"to":8,"weight":2},{"from":0,"to":9,"weight":1},{"from":10,"to":11,"weight":1},{"from":3,"to":11,"weight":3},{"from":2,"to":11,"weight":3},{"from":0,"to":11,"weight":5},{"from":11,"to":12,"weight":1},{"from":11,"to":13,"weight":1},{"from":11,"to":14,"weight":1},{"from":11,"to":15,"weight":1},{"from":16,"to":17,"weight":4},{"from":17,"to":18,"weight":4},{"from":16,"to":18,"weight":4},{"from":18,"to":19,"weight":4},{"from":17,"to":19,"weight":4},{"from":16,"to":19,"weight":4},{"from":19,"to":20,"weight":4},{"from":18,"to":20,"weight":3},{"from":17,"to":20,"weight":3},{"from":16,"to":20,"weight":3},{"from":18,"to":21,"weight":3},{"from":20,"to":21,"weight":5},{"from":19,"to":21,"weight":3},{"from":17,"to":21,"weight":3},{"from":16,"to":21,"weight":3},{"from":21,"to":22,"weight":4},{"from":20,"to":22,"weight":4},{"from":18,"to":22,"weight":3},{"from":19,"to":22,"weight":3},{"from":17,"to":22,"weight":3},{"from":16,"to":22,"weight":3},{"from":21,"to":23,"weight":4},{"from":20,"to":23,"weight":4},{"from":22,"to":23,"weight":4},{"from":18,"to":23,"weight":3},{"from":19,"to":23,"weight":3},{"from":17,"to":23,"weight":3},{"from":16,"to":23,"weight":3},{"from":12,"to":23,"weight":2},{"from":11,"to":23,"weight":9},{"from":23,"to":24,"weight":2},{"from":11,"to":24,"weight":7},{"from":24,"to":25,"weight":13},{"from":23,"to":25,"weight":1},{"from":11,"to":25,"weight":12},{"from":25,"to":26,"weight":1},{"from":24,"to":26,"weight":4},{"from":16,"to":26,"weight":1},{"from":11,"to":26,"weight":31},{"from":26,"to":27,"weight":1},{"from":25,"to":27,"weight":5},{"from":24,"to":27,"weight":1},{"from":23,"to":27,"weight":5},{"from":11,"to":27,"weight":17},{"from":27,"to":28,"weight":1},{"from":11,"to":28,"weight":8},{"from":27,"to":29,"weight":1},{"from":23,"to":29,"weight":1},{"from":11,"to":29,"weight":2},{"from":23,"to":30,"weight":1},{"from":30,"to":31,"weight":2},{"from":27,"to":31,"weight":1},{"from":23,"to":31,"weight":2},{"from":11,"to":31,"weight":3},{"from":11,"to":32,"weight":1},{"from":27,"to":33,"weight":1},{"from":11,"to":33,"weight":2},{"from":29,"to":34,"weight":2},{"from":11,"to":34,"weight":3},{"from":34,"to":35,"weight":3},{"from":29,"to":35,"weight":2},{"from":11,"to":35,"weight":3},{"from":34,"to":36,"weight":2},{"from":29,"to":36,"weight":1},{"from":35,"to":36,"weight":2},{"from":11,"to":36,"weight":2},{"from":34,"to":37,"weight":2},{"from":29,"to":37,"weight":1},{"from":36,"to":37,"weight":2},{"from":35,"to":37,"weight":2},{"from":11,"to":37,"weight":2},{"from":34,"to":38,"weight":2},{"from":29,"to":38,"weight":1},{"from":36,"to":38,"weight":2},{"from":37,"to":38,"weight":2},{"from":35,"to":38,"weight":2},{"from":11,"to":38,"weight":2},{"from":25,"to":39,"weight":1},{"from":25,"to":40,"weight":1},{"from":25,"to":41,"weight":3},{"from":24,"to":41,"weight":2},{"from":41,"to":42,"weight":2},{"from":25,"to":42,"weight":2},{"from":24,"to":42,"weight":1},{"from":27,"to":43,"weight":1},{"from":26,"to":43,"weight":1},{"from":11,"to":43,"weight":3},{"from":28,"to":44,"weight":3},{"from":11,"to":44,"weight":1},{"from":28,"to":45,"weight":2},{"from":46,"to":47,"weight":1},{"from":47,"to":48,"weight":2},{"from":27,"to":48,"weight":1},{"from":25,"to":48,"weight":1},{"from":11,"to":48,"weight":1},{"from":26,"to":49,"weight":3},{"from":11,"to":49,"weight":2},{"from":49,"to":50,"weight":1},{"from":24,"to":50,"weight":1},{"from":49,"to":51,"weight":9},{"from":26,"to":51,"weight":2},{"from":11,"to":51,"weight":2},{"from":51,"to":52,"weight":1},{"from":39,"to":52,"weight":1},{"from":51,"to":53,"weight":1},{"from":51,"to":54,"weight":2},{"from":49,"to":54,"weight":1},{"from":26,"to":54,"weight":1},{"from":51,"to":55,"weight":6},{"from":54,"to":55,"weight":1},{"from":49,"to":55,"weight":12},{"from":41,"to":55,"weight":5},{"from":48,"to":55,"weight":4},{"from":39,"to":55,"weight":1},{"from":26,"to":55,"weight":21},{"from":25,"to":55,"weight":2},{"from":16,"to":55,"weight":1},{"from":11,"to":55,"weight":19},{"from":55,"to":56,"weight":1},{"from":49,"to":56,"weight":1},{"from":55,"to":57,"weight":1},{"from":41,"to":57,"weight":1},{"from":48,"to":57,"weight":1},{"from":57,"to":58,"weight":1},{"from":55,"to":58,"weight":7},{"from":48,"to":58,"weight":7},{"from":27,"to":58,"weight":6},{"from":11,"to":58,"weight":4},{"from":57,"to":59,"weight":2},{"from":58,"to":59,"weight":15},{"from":55,"to":59,"weight":5},{"from":48,"to":59,"weight":6},{"from":59,"to":60,"weight":2},{"from":58,"to":60,"weight":4},{"from":48,"to":60,"weight":1},{"from":59,"to":61,"weight":5},{"from":60,"to":61,"weight":2},{"from":57,"to":61,"weight":1},{"from":58,"to":61,"weight":6},{"from":55,"to":61,"weight":1},{"from":48,"to":61,"weight":2},{"from":59,"to":62,"weight":13},{"from":60,"to":62,"weight":3},{"from":61,"to":62,"weight":6},{"from":57,"to":62,"weight":2},{"from":58,"to":62,"weight":17},{"from":55,"to":62,"weight":9},{"from":48,"to":62,"weight":7},{"from":41,"to":62,"weight":1},{"from":61,"to":63,"weight":3},{"from":62,"to":63,"weight":6},{"from":59,"to":63,"weight":5},{"from":60,"to":63,"weight":2},{"from":57,"to":63,"weight":2},{"from":58,"to":63,"weight":4},{"from":55,"to":63,"weight":1},{"from":48,"to":63,"weight":5},{"from":61,"to":64,"weight":6},{"from":62,"to":64,"weight":12},{"from":63,"to":64,"weight":4},{"from":59,"to":64,"weight":9},{"from":60,"to":64,"weight":2},{"from":57,"to":64,"weight":1},{"from":58,"to":64,"weight":10},{"from":55,"to":64,"weight":5},{"from":48,"to":64,"weight":5},{"from":11,"to":64,"weight":1},{"from":61,"to":65,"weight":5},{"from":62,"to":65,"weight":5},{"from":63,"to":65,"weight":5},{"from":64,"to":65,"weight":7},{"from":59,"to":65,"weight":5},{"from":60,"to":65,"weight":2},{"from":57,"to":65,"weight":1},{"from":58,"to":65,"weight":5},{"from":55,"to":65,"weight":2},{"from":48,"to":65,"weight":3},{"from":65,"to":66,"weight":2},{"from":61,"to":66,"weight":1},{"from":62,"to":66,"weight":2},{"from":63,"to":66,"weight":1},{"from":64,"to":66,"weight":3},{"from":59,"to":66,"weight":1},{"from":60,"to":66,"weight":1},{"from":58,"to":66,"weight":3},{"from":48,"to":66,"weight":1},{"from":57,"to":67,"weight":3},{"from":48,"to":68,"weight":1},{"from":41,"to":68,"weight":1},{"from":27,"to":68,"weight":1},{"from":25,"to":68,"weight":5},{"from":24,"to":68,"weight":1},{"from":11,"to":68,"weight":1},{"from":68,"to":69,"weight":6},{"from":48,"to":69,"weight":1},{"from":41,"to":69,"weight":1},{"from":27,"to":69,"weight":2},{"from":25,"to":69,"weight":6},{"from":24,"to":69,"weight":1},{"from":11,"to":69,"weight":1},{"from":68,"to":70,"weight":4},{"from":69,"to":70,"weight":4},{"from":58,"to":70,"weight":1},{"from":41,"to":70,"weight":1},{"from":27,"to":70,"weight":1},{"from":25,"to":70,"weight":4},{"from":24,"to":70,"weight":1},{"from":11,"to":70,"weight":1},{"from":68,"to":71,"weight":2},{"from":69,"to":71,"weight":2},{"from":70,"to":71,"weight":2},{"from":48,"to":71,"weight":1},{"from":41,"to":71,"weight":1},{"from":27,"to":71,"weight":1},{"from":25,"to":71,"weight":1},{"from":11,"to":71,"weight":1},{"from":27,"to":72,"weight":1},{"from":26,"to":72,"weight":2},{"from":11,"to":72,"weight":1},{"from":48,"to":73,"weight":2},{"from":73,"to":74,"weight":3},{"from":48,"to":74,"weight":2},{"from":68,"to":75,"weight":3},{"from":69,"to":75,"weight":3},{"from":70,"to":75,"weight":1},{"from":71,"to":75,"weight":1},{"from":48,"to":75,"weight":1},{"from":41,"to":75,"weight":1},{"from":25,"to":75,"weight":3},{"from":65,"to":76,"weight":1},{"from":66,"to":76,"weight":1},{"from":62,"to":76,"weight":1},{"from":63,"to":76,"weight":1},{"from":64,"to":76,"weight":1},{"from":58,"to":76,"weight":1},{"from":48,"to":76,"weight":1}]

index.html

<!DOCTYPE html>
<meta charset="utf-8">
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.8.3/underscore-min.js"></script>
<script src="test.js"></script>

nodes.json

[{"x":-7.274720191955566,"y":-2.462294578552246,"name":"Myriel"},{"x":-8.400680541992188,"y":-1.1285827159881592,"name":"Napoleon"},{"x":-7.818621635437012,"y":-2.657817840576172,"name":"MlleBaptistine"},{"x":-7.597622871398926,"y":-2.3984792232513428,"name":"MmeMagloire"},{"x":-8.47363567352295,"y":-4.082435131072998,"name":"CountessDeLo"},{"x":-1.1705321073532104,"y":9.604669570922852,"name":"Geborand"},{"x":-6.806884765625,"y":-3.951399803161621,"name":"Champtercier"},{"x":-5.9853620529174805,"y":-2.569401741027832,"name":"Cravatte"},{"x":-9.667695999145508,"y":-2.53764271736145,"name":"Count"},{"x":-6.703098297119141,"y":-1.1792324781417847,"name":"OldMan"},{"x":3.7962300777435303,"y":3.350186586380005,"name":"Labarre"},{"x":2.80132794380188,"y":0.2454499453306198,"name":"Valjean"},{"x":2.6632938385009766,"y":-4.71205997467041,"name":"Marguerite"},{"x":3.3094217777252197,"y":1.6454137563705444,"name":"MmeDeR"},{"x":2.146834135055542,"y":-1.2418652772903442,"name":"Isabeau"},{"x":3.8198251724243164,"y":0.5435492396354675,"name":"Gervais"},{"x":4.385030746459961,"y":-9.894917488098145,"name":"Tholomyes"},{"x":3.665651321411133,"y":-10.696525573730469,"name":"Listolier"},{"x":4.365941524505615,"y":-10.518183708190918,"name":"Fameuil"},{"x":3.438231945037842,"y":-10.040314674377441,"name":"Blacheville"},{"x":3.0702168941497803,"y":-9.063097953796387,"name":"Favourite"},{"x":3.117382764816284,"y":-8.560333251953125,"name":"Dahlia"},{"x":3.922775983810425,"y":-8.525094985961914,"name":"Zephine"},{"x":2.702303647994995,"y":-3.663031578063965,"name":"Fantine"},{"x":4.46572208404541,"y":-0.991399347782135,"name":"MmeThenardier"},{"x":4.626274108886719,"y":-0.5763689279556274,"name":"Thenardier"},{"x":2.135861873626709,"y":0.5472317337989807,"name":"Cosette"},{"x":2.4218764305114746,"y":-0.13937920331954956,"name":"Javert"},{"x":0.7468488216400146,"y":-1.927365779876709,"name":"Fauchelevent"},{"x":5.89515495300293,"y":4.836838722229004,"name":"Bamatabois"},{"x":2.8636271953582764,"y":7.3640947341918945,"name":"Perpetue"},{"x":2.8412094116210938,"y":6.695189952850342,"name":"Simplice"},{"x":6.813502311706543,"y":1.2873895168304443,"name":"Scaufflaire"},{"x":3.234074592590332,"y":-2.061326265335083,"name":"Woman1"},{"x":7.320878028869629,"y":5.262524127960205,"name":"Judge"},{"x":7.497217178344727,"y":4.709218502044678,"name":"Champmathieu"},{"x":8.626582145690918,"y":6.270557403564453,"name":"Brevet"},{"x":9.114800453186035,"y":5.212418556213379,"name":"Chenildieu"},{"x":9.540103912353516,"y":6.037910461425781,"name":"Cochepaille"},{"x":9.752280235290527,"y":0.3996357023715973,"name":"Pontmercy"},{"x":5.779280185699463,"y":-0.42642372846603394,"name":"Boulatruelle"},{"x":2.160210132598877,"y":2.3566901683807373,"name":"Eponine"},{"x":5.155226230621338,"y":1.7789686918258667,"name":"Anzelma"},{"x":0.8040445446968079,"y":-0.2779921591281891,"name":"Woman2"},{"x":0.6255813241004944,"y":-3.1640584468841553,"name":"MotherInnocent"},{"x":-0.4921444058418274,"y":-2.1389248371124268,"name":"Gribier"},{"x":-3.3763535022735596,"y":-5.412271022796631,"name":"Jondrette"},{"x":-3.440261125564575,"y":-4.780622959136963,"name":"MmeBurgon"},{"x":-5.99733304977417,"y":4.586952209472656,"name":"Gavroche"},{"x":0.7318434119224548,"y":2.123913526535034,"name":"Gillenormand"},{"x":1.754194736480713,"y":4.284945011138916,"name":"Magnon"},{"x":0.050799932330846786,"y":2.847193479537964,"name":"MlleGillenormand"},{"x":10.33323860168457,"y":0.6696469783782959,"name":"MmePontmercy"},{"x":-0.16329629719257355,"y":3.9911065101623535,"name":"MlleVaubois"},{"x":-1.1916395425796509,"y":2.640390396118164,"name":"LtGillenormand"},{"x":1.626569390296936,"y":1.1525481939315796,"name":"Marius"},{"x":-0.10945970565080643,"y":1.1299872398376465,"name":"BaronessT"},{"x":-8.424675941467285,"y":8.98406982421875,"name":"Mabeuf"},{"x":-4.505062580108643,"y":4.641534328460693,"name":"Enjolras"},{"x":-5.039002418518066,"y":5.065228462219238,"name":"Combeferre"},{"x":-4.490577697753906,"y":3.291067361831665,"name":"Prouvaire"},{"x":-4.206303119659424,"y":6.429642677307129,"name":"Feuilly"},{"x":-4.200884819030762,"y":4.930270671844482,"name":"Courfeyrac"},{"x":-6.217329025268555,"y":5.993104934692383,"name":"Bahorel"},{"x":-4.421194553375244,"y":5.651000499725342,"name":"Bossuet"},{"x":-5.23378849029541,"y":6.539233207702637,"name":"Joly"},{"x":-2.8020761013031006,"y":6.12843656539917,"name":"Grantaire"},{"x":-8.429736137390137,"y":8.994978904724121,"name":"MotherPlutarch"},{"x":6.591790199279785,"y":-2.789158582687378,"name":"Gueulemer"},{"x":6.252016067504883,"y":-2.3344690799713135,"name":"Babet"},{"x":7.378973960876465,"y":-2.1968915462493896,"name":"Claquesous"},{"x":8.005524635314941,"y":-3.348813056945801,"name":"Montparnasse"},{"x":-1.528643012046814,"y":-0.2232537418603897,"name":"Toussaint"},{"x":-8.240806579589844,"y":4.279861927032471,"name":"Child1"},{"x":-8.240806579589844,"y":4.279861927032471,"name":"Child2"},{"x":5.582363128662109,"y":-3.584704637527466,"name":"Brujon"},{"x":-4.938216686248779,"y":8.142094612121582,"name":"MmeHucheloup"}]

test.js

var width = 1024,
    height = 500;

var canvas = d3.select("body").append("canvas")
    .attr("width", width)
    .attr("height", height);

var force = d3.layout.force()
    .size([width, height]);

d3.json("nodes.json", function(error, nodes) {
  if (error) throw error;
  d3.json("edges.json", function(error, edges) {
    if (error) throw error;

        var scalingX = width/(2.5*_.chain(nodes).pluck("x").max().value());
        var scalingY = height/(2.5*_.chain(nodes).pluck("y").max().value());
        
        var context = canvas.node().getContext("2d");
        context.font = "8px Arial";

        context.translate(canvas.node().width/2,canvas.node().height/2);

        context.clearRect(0, 0, width, height);

        // draw links
        context.strokeStyle = "#ccc";
        context.beginPath();
        edges.forEach(function(d) {
          context.moveTo(nodes[d.from].x*scalingX, nodes[d.from].y*scalingY);
          context.lineTo(nodes[d.to].x*scalingX, nodes[d.to].y*scalingY);
          context.lineWidth = d.weight/20;
          context.stroke();
        });


        // draw nodes
        context.fillStyle = "steelblue";
        context.beginPath();
        nodes.forEach(function(d) {
            context.fillText(d.name, d.x*scalingX + 5, d.y*scalingY + 5);
            context.moveTo(d.x*scalingX, d.y*scalingY);
            context.arc(d.x*scalingX, d.y*scalingY, 4.5, 0, 2 * Math.PI);
        });
        context.fill();
      
      
        
   })
});