Instantly share code, notes, and snippets.

# auremoser/graph.md

Last active December 2, 2019 08:25
Star You must be signed in to star a gist
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:

### Outline

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

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

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

##### 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

BIOLOGY/SCIENCE

Gene Ontology Data, Damian Kao

MUSIC

iTunes Library Graph, Christopher Martin

Also check out this cool graph project with Spotify data.

SOCIAL NETWORKS

Oscar Article, NYTimes, Mike Bostock

POLITICAL NETWORKS

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.

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

#### Resources

This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters. Learn more about bidirectional Unicode characters
 OSM + BKX

OSM FOLKSONOMY

Tags available on searching Open Street Map's folksonomic tagging schema via the Tag Info API. | Github | About

to join this conversation on GitHub. Already have an account? Sign in to comment