DSI - Graphs Class

graph.md

Intro to Network + Graph Data

###SVA-DSI ###Metrics and Data Visualiation I October 25th, 2016

Interactive to inspire: Tanahashi, Y., UC Davis, StoryLines You can read their paper on the topic here.

Find this document here:

• Gist: http://tinyurl.com/sva-graphs

Outline

1. Graph Basics
   • Definitions
   • Anatomy of a Graph
2. Graph Data
   • Examples + Formats
3. Graph Tools
   • Libraries + Frameworks
4. Building A Narrative
   • Case Study 1: NYC Graphiti Graph
   • Case Study 2: OSM Tag Graph
   • Bl.ocks for Mapping display
5. Resources

Graph Basics

Definitions

Network or Graph Data is data the involves connections between entities where those relationships can be described/explained/made to have value.

It should be noted that this definition of graph is distinct from "charts and graphs" which could involve any type of chart.

Exammple: Facebook Graph:

Think about difference Facebook Graph Visualizations:

• NEXUS Friend Grapher
• Thomas Fletcher's Friend Wheel

Anatomy of a Graph

A graph is composed (visibly) of points and lines that connect them, these are sometimes called:

• Nodes: the points/things existing in the network.
• Edges: the lines or relationships that connect the nodes to eachother and create a larger network.

In a graph of your family, for example, the family tree would be a kind of graph visualization, illustrating both the people in the family (nodes) and the connections between them like "daughter of" "son of" (edges).

You might also read:

• Vectors: like in math, vectors apply directionality to the edges, so parent->child nodes on a family tree have their relational edge describing that the "child" is the daughter and not the other way around.

• Force-directed: way of drawing graphs such that the nodes and edges spread out agreeably.

Try drawing your own graph here: http://bl.ocks.org/mbostock/929623

Graph Data

You can source graph data in a few places, but you might just want to make your own.

• Facebook Graph Data Download | Graph API | Graph Explorers
• Google Public Data Directory
• Les Miserables Character Connections
• Gexf Sample Datasets
• Middle Eastern Country Relationships

Examples and Formats

There are all types of graph visualizations. You might check out Manuel Lima's blog Visual Complexity for examples of the kinds of narratives you can build with graphs.

SEMANTIC NETWORKS

Linked Jazz Project, NYPL Labs

• Code: https://github.com/thisismattmiller/linked-jazz-network
• Demo: https://linkedjazz.org/network/

BIOLOGY/SCIENCE

Gene Ontology Data, Damian Kao

• Explanation: http://blog.nextgenetics.net/?e=19
• Demo: http://blog.nextgenetics.net/demo/entry0019/demo.zip
• Demo: http://blog.nextgenetics.net/demo/entry0019/demo.html

MUSIC

iTunes Library Graph, Christopher Martin

• Code: http://cgmartin.com/itunes-library-network-graph/
• Demo: https://github.com/cgmartin/iTunes-Library-Network-Graph

Also check out this cool graph project with Spotify data.

SOCIAL NETWORKS

Oscar Article, NYTimes, Mike Bostock

• Explanation: http://emptypipes.org/2015/02/15/selectable-force-directed-graph/
• Demo: http://www.nytimes.com/interactive/2013/02/20/movies/among-the-oscar-contenders-a-host-of-connections.html

POLITICAL NETWORKS

• Explanation: http://www.informationisbeautiful.net/2014/who-likes-whom-in-the-middle-east-key-players-relationships/
• Data: http://bit.ly/KIB_MiddleEast
• Demo: http://www.informationisbeautiful.net/visualizations/islamic-sects-schools-branches-movements/

Things like the inspiration graph for this week, and this Baby Name Graph, are pseudo-graphical, but not quite like the examples above because they show layers of data relative to time factors, but do not illustrate intersection points between the lines, or how babynames have "mutated/merged/interacted," which would bring you closer to a graph visualizations.

Graph Tools

There are lots of ways to approach graph information, you can use Javascript and D3 to draw your graph, or you can use a library/framework that specializes in graph information.

Libraries and Frameworks

• Sigma.JS
• Arbor.JS
• Gephi
• D3: data driven documents, loads of examples of graph/force-directed visualizations here
• RelFinder
• GraphSub: a JS plugin for D3 JS

Check out some of the examples in each of those libraries, and see if you can play with the data they provide to make something that is useful to you.

Building a Narrative

NYC Graphiti Visualization

• Code: https://github.com/auremoser/graphitiNEt
• Demo: https://github.com/auremoser/graphitiNEt

This visualization uses data from Freebase about Graffiti artists and the art movements they list has influencing their work. It uses Gexf, which is a javascript wrapper for Gephi, and uses color to indicate the artists' country of origin.

Source + Target columns in an excel file fed the construction of the graph in Gephi, the desktop application, and then the wrapper allowed me to display it on the web.

BKX OSM

• Code: https://github.com/auremoser/bkx-osm
• Demo: http://auremoser.github.io/bkx-osm/#

This visualization used D3 to draw a graph representing the myriad OSM tags related to "bicycle" in the Open Street Map Tag Library. We wanted to work on collecting data for Public Space and Pedestrian data too but the tags were way too messy.

Graphing in Bl.ocks

There are loads of bl.ocks made for Graph information should you want to use D3, unfortunately, warning: the data format can be a bit tough, but if you have data to support this kind of structure, let me know and we can talk about working with it for your final projects.

• Draw your own Graph
• Directional Force Layout
• Force-directed Graph Demo
• Expand/collapse force layout
• Weighted Collapsable Force Layout
• Tarot Card Reader?

Resources

• D3.forcebundle
• Short Tutorial on Getting Started with D3 Graphs.
• Krempel, L., Network Visualization.
• Tamassia, R., Handbook of graph drawing and visualization.
• Tarawneh, R.M., et al., A general introduction to graph visualization techniques.

index.html

<!-- OSM <> BKX Test
* Bikestorming
* @auremoser -->
<!DOCTYPE html>
<html>
  <title>OSM + BKX</title>
  <meta charset="utf-8">
  <link rel="stylesheet" href="assets/normalize.css">
  <link rel="stylesheet" href="assets/foundation.min.css">
  <link rel="shortcut icon" href="https://raw.githubusercontent.com/auremoser/bkx-osm/master/assets/favicon.ico">
  <style>
    @font-face {
        font-family: Commodore;
        src: url(fonts/commodore_pixelized/commodore.ttf);
    }
    @font-face {
        font-family: Commodore;
        src: url(fonts/commodore_pixelized/commodore-webfont.ttf);
    }
    html, body {
      /*background-color: #252525;*/
      font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
      width: 100%;
      height: 100%;
      margin: 0;
      top: 10px;
      background: url(assets/space-background.png) no-repeat center center fixed;
      -webkit-background-size: cover;
      -moz-background-size: cover;
      -o-background-size: cover;
      background-size: cover;
    }
    h1,h5,h6,li,a {
      font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
      color: #ff4455;
    }
    p {
      font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
      color: #ff99a1;
      text-align: center;
    }
    h2,h3,h4{
      font-family: "Commodore";
      color: #ff4455;
    }
    .node {
      cursor: pointer;
      stroke: #4d004b;
      stroke-width: 1.5px;
    }
    .link {
      fill: none;
      stroke: #ff7783;
      stroke-width: 1.5px;
    }
    .labels {
      font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
      font-size: 10px;
      text-shadow: 0 1px 0 #ff99a1, 1px 0 0 #ff99a1, -1px 0 0 #ff99a1, 0 -1px 0 #ff99a1;
      pointer-events: none;
    }
    #graph {
      margin: 0 0;
      padding: 0 0;
    }
    #key {
      border: 3px, #ff4455;
      float: left;
      position: absolute;
      padding: 5px;
      z-index: 99999;
      width: 300px;
      height: 400px;
      right: 100px;
      top: 30px;
      background-color: none;
      font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
      /*pointer-events: none;*/
    }
    #key > p, h5 {
      font-color: #ffff;
      padding: 5px;
      margin: 0 0;
      font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
      text-align: center;
    }
    #key > h1, h2 {
      padding: 10px;
      margin: 0 0;
      font-family: "Futura-CondensedExtraBold", Futura, sans-serif;
      text-align: center;
      text-shadow: 0 .5px 0 #ff4455, .5px 0 0 #ff4455, -.5px 0 0 #ff4455, 0 -.5px 0 #ff4455;
    }
  </style>
<body>
  <script type="text/javascript" src="d3.v3.min.js"></script>

  <div class="row">
     <div class="large-12 columns">
        <!-- HEADER BIKE/PED/PUBLIC SPACE DATA TOGGLE -->
         <header class="row">
          <div class="large-12 columns"><br/>
           <div class="row">
             <div class="large-12 columns">
                 <ul class="inline-list right">
                   <li><a href="#">Bicycle <img src="assets/bike-data-in-osm.png" height="80" width="80"></a></li>
                   <li><a href="#">Pedestrian<img src="assets/walking-data-in-osm.png" height="80" width="80"></a></li>
                   <li><a href="#">Public Space<img src="assets/public-space-in-osm.png" height="80" width="80"></a></li>
                 </ul>
                 <h2>OSM FOLKSONOMY</h2>
                 <p>Tags available on searching <a href ="http://www.openstreetmap.org" target="_blank">Open Street Map's</a> folksonomic tagging schema via the <a href="http://taginfo.openstreetmap.org/" target="_blank">Tag Info API</a>.
                 | <a href ="https://github.com/auremoser/bkx-osm" target="_blank">Github</a> | <a href="https://github.com/auremoser/bkx-osm/blob/master/README.md" target="_blank">About</a></p>
             </div>
           </div>
          </div>
        </header>
      </div>
      <br/>
      <!-- GRAPH -->
        <div class="row">
          <div class="large-6 columns" style="border: 2px #ff4455">
            <div id="graph"><script src="graph.js"></script></div>
          </div> <!-- END INFO KEY 6-COLUMNS -->
         </div> <!-- END ROW MAIN CONTENT-->
     </div> <!-- END 12 LARGE COLUMNS -->
   </div> <!-- OUTERMOST ROW -->

</body>
</html>

thumbnail.png