matt-bernhardt

/* HTML Scraper via jSoup
 * ---
 * This takes a URL (at url in setup() )
 * and crawls the returned markup via the pattern defined in doc.select()
 * This version then dumps the resulting content into a text file
 * for further processing with Google Refine
 */
 
// Import libraries
import org.jsoup.safety.*;

matt-bernhardt

A treemap recursively subdivides area into rectangles; the area of any node in the tree corresponds to its value. This example uses color to encode different packages of the Flare visualization toolkit. Treemap design invented by Ben Shneiderman. Squarified algorithm by Bruls, Huizing and van Wijk. Data courtesy Jeff Heer.

matt-bernhardt

{
  "nodes":[
    {"name":"School of Architecture and Planning","group":1},
    {"name":"Architecture","group":1},
    {"name":"Media Arts and Sciences","group":1},
    {"name":"Urban Studies and Planning","group":1},
    
    {"name":"School of Engineering","group":2},
    {"name":"Aeronautics and Astronautics","group":2},
    {"name":"Biological Engineering","group":2},

matt-bernhardt

While MIT has a very large number of departments, labs and centers on campus, there are roughly 40 academic departments that are frequently listed on the Institute's website. This plot illustrates how frequently those groups are listed together on papers in the Open Access collection in DSpace@MIT.

matt-bernhardt

Please, let this work. Now with faked CSV in the right format.

matt-bernhardt

A framework for visualizing a network of combinations among a single list of nodes.

matt-bernhardt

This choropleth encodes employed populations from recent census data.

matt-bernhardt

This simple force-directed graph shows character co-occurence in Les Misérables. A physical simulation of charged particles and springs places related characters in closer proximity, while unrelated characters are farther apart. Layout algorithm inspired by Tim Dwyer and Thomas Jakobsen. Data based on character coappearence in Victor Hugo's Les Misérables, compiled by Donald Knuth.

Compare this display to a force layout with curved links, a force layout with fisheye distortion and a matrix diagram.

matt-bernhardt

svg {
  font: 10px sans-serif;
}

.cell,
.label {
  opacity: 0.5;
}

.cell:hover,

matt-bernhardt

This is an attempt to build a visualization pattern showing combinations among items in a single list. It is inspired by a device I remember from printed maps, showing distances between cities - usually printed in an unused corner.

This pattern currently works best for combinations that are direction-agnostic. In this example, the datasete illustrates how often a group of soccer players appeared together over the course of a single season. For bi-directional combinations a different strategy may be needed, or perhaps a more nuanced design at each intersection.