Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Introduction to graph visualization in d3.js

Piotr Migdał
September 30, 2013

Introduction to graph visualization in d3.js

Piotr Migdał

September 30, 2013
Tweet

More Decks by Piotr Migdał

Other Decks in Technology

Transcript

  1. at my PhD... 0 1 2 3 4 5 6

    7 8 1 2 3 4 5 6 7 8 9 10 11 12 13 14 quantum community detection
  2. Graphs in d3.js 101 { "nodes":[ {"name":"Myriel","group":1}, {"name":"Labarre","group":2}, {"name":"Valjean","group":2}, {"name":"Marguerite","group":3},

    ... ], "links":[ {"source":1,"target":0,"value":1}, {"source":2,"target":0,"value":8}, {"source":3,"target":0,"value":10}, {"source":3,"target":2,"value":6}, ... ] } <script src="http://d3js.org/d3.v3.min.js"></script> <script> var width = 960, height = 500; var color = d3.scale.category20(); var force = d3.layout.force() .charge(-120) .linkDistance(30) .size([width, height]); var svg = d3.select("body").append("svg") .attr("width", width) .attr("height", height); d3.json("miserables.json", function(error, graph) { force .nodes(graph.nodes) .links(graph.links) .start(); var link = svg.selectAll(".link") .data(graph.links) .enter().append("line") .attr("class", "link") .style("stroke-width", function(d) { return Math.sqrt(d.value); }); var node = svg.selectAll(".node") .data(graph.nodes) .enter().append("circle") .attr("class", "node") .attr("r", 5) .style("fill", function(d) { return color(d.group); }) .call(force.drag); node.append("title") .text(function(d) { return d.name; }); force.on("tick", function() { link.attr("x1", function(d) { return d.source.x; }) .attr("y1", function(d) { return d.source.y; }) .attr("x2", function(d) { return d.target.x; }) .attr("y2", function(d) { return d.target.y; }); node.attr("cx", function(d) { return d.x; }) .attr("cy", function(d) { return d.y; }); }); }); </script> <!DOCTYPE html> <meta charset="utf-8"> <style> .node { stroke: #fff; stroke-width: 1.5px; } .link { stroke: #999; stroke-opacity: .6; } </style> <body> http://bl.ocks.org/mbostock/4062045
  3. Size (and force) • Constant • Area = counts •

    Selected... nodes .attr("r", function (d) { return Math.sqrt(d.count); }); force .charge(function (d) { return - Math.sqrt(d.count); });
  4. UNIX command survey http://jvns.ca/projects/unix-command-survey/graph.html 163 git 95 cd 59 ls

    49 python 25 pyserv 13 vim 13 ipython 8 up2 8 ipyinline 8 grunt 6 npm 5 pip 5 cp 4 rm 4 mongod 3 mkdir 3 highlight
  5. SDUVLQJ RV[ ZLQGRZVSKRQH DSL WH[W [FRGH G\QDPLF UHVW GDWHWLPH QRGHMV

    VHVVLRQ OLQTWRVTO P\VTO TXHU\ DUFKLWHFWXUH [PO LSDG MDYDHH UXE\RQUDLOV IODVK IRUPV RSHQFY KWPO PDWODE PXOWLWKUHDGLQJ LPDJH KRPHZRUN FVV IOH[ VWULQJ S\WKRQ PHPRU\PDQDJHPHQW ZFI LQWHUQHWH[SORUHU GDWDELQGLQJ ZLQGRZV VVO IDFHERRN GHSOR\PHQW FDNHSKS PVDFFHVV FRPSLOHU GHVLJQSDWWHUQV VLOYHUOLJKW VRUWLQJ TW DQGURLGOD\RXW JXL QHW OLVW F HYHQWV DUUD\V YHUVLRQFRQWURO EODFNEHUU\ DVSQHWPYF VHFXULW\ OLVWYLHZ PRGUHZULWH EXWWRQ YLHZ YLVXDOVWXGLR FRRNLHV JRRJOH VWRUHGSURFHGXUHV QHWEHDQV VSULQJ WZLWWHU WHVWLQJ ZHEVHUYLFHV LPDJHSURFHVVLQJ GHVLJQ XVHULQWHUIDFH SOXJLQV ORRSV ZHEDSSOLFDWLRQV VLOYHUOLJKW VTOVHUYHU FDQYDV ZSI ZLQGRZV VFDOD SKRQHJDS DFWLRQVFULSW GHOSKL VTOVHUYHU GOO XQLWWHVWLQJ U WHPSODWHV JHQHULFV VSULQJPYF ERRVW HPDLO PDWK DQGURLG UHGLUHFW KLEHUQDWH DVVHPEO\ [VOW ZLQDSL MDYDVFULSW F PDYHQ FRFRDWRXFK DMD[ KWPO XEXQWX MTXHU\XL OD\RXW SRVW GLY EDVK JRRJOHFKURPH YED SRVWJUHVTO FRGHLJQLWHU GUXSDO YEQHW JRRJOHDSSHQJLQH JZW PYF VZLQJ SGI XLYLHZ MTXHU\DMD[ FRUHGDWD ILUHIR[ UXE\RQUDLOV HQFRGLQJ VHDUFK YDULDEOHV YLP FRFRD DSDFKH XQL[ KDVNHOO XUO OLQX[ WDEOH LRV VRFNHWV VHOHFW UHJH[ JLW QHWZRUNLQJ VHUYLFH RSHQJO FVV HQFU\SWLRQ LSKRQHVGN SHUO YLVXDOVWXGLR MSD MVRQ ZRUGSUHVV LSKRQH PHPRU\ HPDFV LLV [SDWK VKHOO LLV F [DPO F OLQT RRS JUDSKLFV WVTO ORJJLQJ MTXHU\SOXJLQV UXE\ MTXHU\ H[FHSWLRQ MRLQ DOJRULWKP DVSQHWPYF KWDFFHVV SRLQWHUV GRP HFOLSVH GDWDEDVHGHVLJQ JRRJOHPDSV ZLQIRUPV ]HQGIUDPHZRUN LIUDPH DFWLYHUHFRUG MTXHU\PRELOH YLGHR SRZHUVKHOO EURZVHU IXQFWLRQ VTOLWH ILOH PYYP GDWDVWUXFWXUHV ELQGLQJ DQW REMHFWLYHF PDJHQWR XLWDEOHYLHZ FXUO ILOHXSORDG IDFHERRNJUDSKDSL JFF MDYDVFULSWHYHQWV LQKHULWDQFH DVSQHW VTOVHUYHU VKDUHSRLQW H[FHO HQWLW\IUDPHZRUN DSSOLFDWLRQ DXWKHQWLFDWLRQ DQLPDWLRQ SKS DFWLRQVFULSW SHUIRUPDQFH QKLEHUQDWH VRDS YLVXDOVWXGLR GHEXJJLQJ MVI KWWS PRQJRGE FODVV REMHFW LRV XSGDWH DVSQHWPYF GDWDEDVH MVS RUDFOH VTO GDWH VHULDOL]DWLRQ SKS GDWD H[WMV [FRGH VYQ YDOLGDWLRQ JULGYLHZ UHIOHFWLRQ WRPFDW MDYD PRELOH RSWLPL]DWLRQ HQWLW\IUDPHZRUN JUDLOV GMDQJR YLVXDOF FDFKLQJ DXGLR VHUYOHWV https://github.com/stared/tag-graph-map-of-stackexchange/wiki
  6. P(tag1 and tag2) P(tag1)P(tag2) 4 an edge between two tags

    when observered expected (for tags occuring independently ) so called “observed to expected ratio”
  7. Graph checklist • Nodes & edges • Size & color

    • Labels • Force used wisely • Non-overlaping • Interaction • Zoom / highlighting
  8. Math cheat sheet P(a and b) P(a)P(b) = #( a

    and b )#posts # a # b nodes .attr("r", function (d) { return Math.sqrt(d.count); }); force .charge(function (d) { return - Math.sqrt(d.count); });
  9. If not d3.js... http://sigmajs.org/ http://gephi.org/ + numerical processing + ‘photoshop

    for graphs’ - for static graphs + nice for graphs - not a penknife