Skip to content

Instantly share code, notes, and snippets.

Last active December 2, 2019 08:25
  • Star 4 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
Star You must be signed in to star a gist
Save auremoser/e39c800ea5673723d8ea6468a12f5404 to your computer and use it in GitHub Desktop.
DSI - Graphs Class

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:


  1. Graph Basics
    • Definitions
    • Anatomy of a Graph
  2. Graph Data
    • Examples + Formats
  3. Graph Tools
    • Libraries + Frameworks
  4. Building A Narrative
  5. Resources

Graph Basics


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: FaceBook Graph

Think about difference Facebook Graph Visualizations:

Anatomy of a Graph

Complete Graphs

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).

family tree

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:

Graph Data

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

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.

Visual Complexity


Linked Jazz

Linked Jazz Project, NYPL Labs


Gene Expression

Gene Ontology Data, Damian Kao


iTunes representation

iTunes Library Graph, Christopher Martin

Also check out this cool graph project with Spotify data.


Oscar Contenders

Oscar Article, NYTimes, Mike Bostock


Middle East

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

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


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.



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.



<!-- OSM <> BKX Test
* Bikestorming
* @auremoser -->
<!DOCTYPE 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="">
@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;
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;
<script type="text/javascript" src="d3.v3.min.js"></script>
<div class="row">
<div class="large-12 columns">
<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>
<p>Tags available on searching <a href ="" target="_blank">Open Street Map's</a> folksonomic tagging schema via the <a href="" target="_blank">Tag Info API</a>.
| <a href ="" target="_blank">Github</a> | <a href="" target="_blank">About</a></p>
<!-- 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 -->
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment