Skip to content

Instantly share code, notes, and snippets.

@auremoser

auremoser/graph.md

Last active December 27, 2018 17:16
Show Gist options
  • Star 5 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save auremoser/affa7b18003841800148 to your computer and use it in GitHub Desktop.
Save auremoser/affa7b18003841800148 to your computer and use it in GitHub Desktop.
Download ZIP
Parsons: Webgraphs
Raw
graph.md

Intro to Network + Graph Data

###Parsons: Journalism + Design ###Web Coding for Interactive Design October 14th, 2015

Storylines

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.

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

Visual Complexity

SEMANTIC NETWORKS

Linked Jazz

Linked Jazz Project, NYPL Labs

BIOLOGY/SCIENCE

Gene Expression

Gene Ontology Data, Damian Kao

MUSIC

iTunes representation

iTunes Library Graph, Christopher Martin

SOCIAL NETWORKS

Oscar Contenders

Oscar Article, NYTimes, Mike Bostock

POLITICAL NETWORKS

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.

babynames

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

data

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.

GraphitiNet

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.

Folksonomy

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.

WeightedForce

Resources

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