Skip to content
Michael Barry edited this page Aug 26, 2014 · 3 revisions

These are data files that are shared by one or more visualizations. All of the visualizations use a simplified version of the MBTA's subway map called the 'map glyph' in the source code. There are two important files that contain the basic structure of this map. The first affectionately called spider.json and contains the hardcoded 2D coordinates of the map. This is used to lay out the stations. The second file called station-network.json which specifies which stations belong to which line as well as meta-data like the station names. The GTFS ID is used as a common identifier between the two data files. Together these can be used to create an outline of the subway map. Each visualization then augments this skeleton with additional information as needed.

If you wish to add additional subway lines to the visualizations you'll need to first determine the 2D coordinates for the stations and then generate the node and link information. We used a spreadsheet to calculate the 2D positions based on a distance and offset from another station in the map, and then used this information to create spider.json. The station-network.json was then populated by hand.

spider.json

Contains the screen placement for stations in order to render the map glyph.

{
  "GTFS station ID": [
    x-position,
    y-position
  ], ...
}

These positions are generated manually to produce the desired layout for all map glyphs. The x and y positions are relative and use an arbitrary scale, the visualizations take care of scaling it out to fit the available space.

station-network.json

Contains the nodes (stations) and links that represent the network topology of the subway system.

{
  "nodes": [
    {
      "name": "Human-readable name of this stations",
      "id": "GTFS ID of this station"
    }, ...
  ]
  "links": [
    {
      "color": "hex color code of the route associated with this link",
      "line": "name of the route associated with this link",
      "source": index in the nodes array of one side of side of this link
      "target": index in the nodes array of the other side fo this link,
    }, ...
  ]
}

Only one direction is provided per-link. Visualizations take care of handling both directions if necessary.