Design History: Transportation

2 Transportation

Peutinger Table

  • A Map of the Roman World
  • towns and roading near Mediterranean, Europe, Anatolia, Egypt, Magreb
  • 4th Century
  • 3 prominent cities: Rome, Constantinople, Antioch
  • only copy lost and copied by monk in Colmar on parchment in 13th century
  • only discovered in 1494 found between leaves of book; 1507 book and map given to Peutinger
  • User-centered features
    • icons for services avaialbe (inn, bath, gymnasium, etc)
    • distance between locations on same road
    • removes space between cities not on the same road
  • ~3ft x 15ft, possibly another panel that did not survive the copying process
    • size possibly because of parchment limitations, or because of table top surface dimension


  • Etzlaub (in Nuremburg) was an instrument maker for navigation uses between cities
  • designed for year 1500, because of so many Europeans want to pilgrimage from Europe to Rome
  • Nuremburg Map (1492) centralized Nuremburg and showed its relationships to other cities nearby
  • Romweg: represents towns of Holy Roman Empire
    • Color coded: islands are red, italy is green, france is red, netherlands is light yellow, etc. based on languages currently spoken in area.
    • oriented Mediterranean at top, North Sea at bottom (opposite) to show top-to-bottom travel.


  • 17th century England and Wales
  • introduced 1” scale, varying compass orientation so that roads run up and down


  • Timeline
    • 1830: first “city communications” committee that oversaw transportation
    • 1846: idea of inner and outer circles of rail system
    • 1863: first underground rail opened (4 miles) in world, but was steam powered
  • Private companies wanted railways that brought people into heart of city bc they had more money. The central part of London has more poor people, less profit for inner city transportation
    • 1905: all inner-city rail electrified
  • Upwards of 8 individual companies owned railway, and some companies connected railways and had to pay tolls and profits
    • 1932: public companies merged all private railways into standardized service
  • Henry C. Beck: Junior draftsman, laid off from signal engineer temp position
    • drew 1939 iconic map in spare time (completed in 1931, but not published until 1933)
    • thought of as “too revolutionary for the time”
    • 45/90 degrees lines only
    • only landmark River Thames
    • scaled city center up and suburbs down to make fixed intervals on lines
    • geography de-emphasized, connections and transfers featured
    • uses single color for each “line” through the city
  • culturally, this means:
    • efficiency is important
    • technology = social progress
    • new ideas about leisure; commuting somewhere in between
    • commuting lifestyle made possible
    • train station new locus for commerce and consumption
  • Beck redesigns map multiple times, hand-lettering all minute changes.
    • Beck moves towards only rectangular forms around 1940, but wasn’t popular concept
    • Beck’s map replaced by Hutchinson’s diagrams in 1960 without Beck’s knowledge.
  • Frank Pick: push to create Art for the Underground
    • paid Artists/commissions for art even when not used
    • stands abut the de-emphaszied role of the diagram maker Beck


Interview with Mossimo Vignelli

1972-1978 NYC Subway Diagram designer: M. Vignelli

NYC_Subway_RESPONSE – presentation documenting Vignelli quotes on design, criticism and his 1972 NYC Subway Diagram; meant to be an oral presentation and downloaded for further study.


VizTech: Web, HTML, CSS, JavaScript, SVG

readings 1 + 2 Web, HTML, CSS, JavaScript, SVG

”HTML Introduction”

A. Murray, Scott. 2013. Interactive Data Visualization. Ch 3 Technology Fundamentals.


  • The web actually consists of a collection of conversations between web servers and web clients.
  • web clients request, web servers deliver data
  • web servers: Internet-connectd computer running software that makes web documents available by request.
    • Always on, always connected
    • There are remote (not on your device) servers and local servers
  • web browsers/clients: interface for the web server software package
  • Every webpage, in theory, can be identified by its URL (uniform resource locator) or URI (uniform resource identifier)
    • indication of communication protocol (http, https)
    • domain name of resource
    • port number, indicating over which port the connection to the server should be attempted; web browsers will attempt connection over port 80 by default (usually excluded)
    • additional locating info (path of requested file, query parameters, etc)
  • HTTP: Hypertext Transfer Protocol
    • most common protocol for transferring web content from server to client
    • “S” in HTTPS stands for Secure, encrypted transit (like online banking)
  • Order of operations from entering in web address in browser
    1. browser defaults protocol HTTP
    2. browser attempts connection to server behind, via port 80.
    3. server acknowledges connection and allows request to be made
    4. browser sends request for page that lives at /learn/d3/.
    5. server sends back HTML content for that page.
    6. browser receive HTML and discovers other files needed to assembly and display, including CSS stylesheets, image files, etc. Another connection to same server is needed.
    7. server responds and dispatches other files needed
    8. client browser renders content, first with HTML structure, then apply CSS selectors, and then images, and then JavaScript codes.


  • Hypertext Markup Language is used to structure content for web browsers. HTML is stored in plain text files with the .html suffix.
    • Current iteration of HTML is HTML5, still referred to HTML
    • “marking up” content means to add structure, specify semantic structure, or adding hierarchy.
    • to mark up, add tags to create elements
    • tags usually occur in pairs and begin and cap the element
    • tags can nest within each other but can not overlap
  • <!DOCTYPE html> must be first in document; standard document type declaration
    • <html> must surround all HTML content in document
    • <head> metadata for document (programmer title, references to external stylesheets and scripts)
    • <title> bookmarking title, displayed in browser tabs
    • <body> primary visible content box
    • <span> & <div> arbitrary span or division of text(inline)/document
  • Attributes: assigned to/qualify elements and their tags
    • often written in the opening tag as <tagname property=“value”> </tagname>
    • Class/ID are universal attributes, can be applied to any tag
    • Class: can group multiple tags together, spaces divide tags
    • ID: unique identifier, cannot begin ID value with number
  • <! – – Comments are displayed like this – – >
  • DOM (Document Object Model): the hierarchical structure of HTML
    • refer to element’s relative relationship in human terms: parent, child, sibling, etc.
  • Developer Tools: allow users to see how browser renders HTML (inspect element on Chrome)
  • Rendering and the Box Model
    • To a browser: EVERYTHINGS A BOX!
    • Each tag is a two-dimensional rectangle, able to be positions and moved and changed.
    • Block-level elements display the full-length of the browser window, and are defaulted stacked top to bottom; inline elements rest within the its parent block.


  • CSS: Cascading Style Sheets
    • consists of selectors { and properties: and property values; }
    • the sum of which is collectively a CSS rule
    • multiple selectorA, selectorB, selectorC {
    • descending selectotorsA selectorB {
    • selects all selectorB elements contained in selectorA
    • h1 em (all emphasized elements within an h1 tag pair)
    • .class_selector begins with a period
    • .contains_two.class_selectors (uses periods with no spaces)
  • #ID_selectors
    • div.sidebar (selects div with class “sidebar” but not other elements in that class)
    • /* all comments are surrounded by a slash-asterisk pairing on either end  and can span multiple lines */
  • You can put CSS selectors and properties into the <head> of your document, but separation of hierarchy and appearance in documents is helpful.
  • Inline styles are also possible, <p style=”color: blue; font-size: 48px; font-style: italic;”> but are kind of a hassle</p>
    • if you use separate documents, you must reference the style sheet and location in the <head> <link rel=”stylesheet” href=“style.css”> </head>
  • INHERITANCE: children inherit their parent’s styles
  • CASCADING: styles cascade from the top down, replacing less specific/default rules with ones you specify
  • SPECIFICITY: of a selector, determines which rules are applied over others.


  • scripting language that makes pages dynamic by manipulating the DOM after a page has already loaded in the browser
  • you can use the CONSOLE in the web developer mode of your browser to test out JS code
  • Variables: var number = 2; var textString = “this is the correct format”; var boolean_1 = true;
  • Arrays: a sequence of values stored in a single variable
    • var array_5s = [5,10,15,20,25];
    • array_5s[2]   //returns 15 because array numbering begins at 0, not 1
    • arrays can hold numbers, strings, booleans, etc.
  • Objects: hold complex sets of data
    • var object_1 = { kind: “abstract”, name: “object 1”, quantity: 1, noteworthy: true};
    • object_1.kind   //returns “abstract”
  • JavaScript Object Notation (JSON) is a syntax optimized for use with JS and AJAX requests
    • Objects display as:
    • {“kind”: “grape”, “color”: “red”, “quantity”: 12, “tasty”: true}
  • GeoJSON can store points in geographical space (typically as longitude/latitude coordinates), but also shapes (such as lines and polygons) and other spatial features. If you have a lot of geodata, it’s worth it to parse it into GeoJSON format for best use with D3.
  • Mathematical operators and comparison operators work normally in JavaScript
  • Control Structures
    • If() only
    • for() now
  • An array organizes lots of data values in one convenient place. Then for() can quickly “loop” through every value in an array and perform some action with it—such as, express the value as a visual form. D3 often manages this looping for us, such as with its magical data() method.
  • Functions: take input and make output
    • var calculateGratuity = function(bill) { return bill * 0.2; };
    • calculateGratuity(38);    // returns 7.60 — a 20% tip!
  • Comments
    • /* works for multiple lines */
    • // works for this line
      but would not comment this line
  • Referencing Scripts

Javascript Gotchas:

  • Dynamic Typing
    • JavaScript (unlike Java) automatically determines the type of variable based on your input. No need to declare a boolean variable, or a float variable. Just a variable is enough!
    • Therefore, variables type can be swapped and switched with no errors.
  • Variable Hoisting
    • JS is run top-to-bottom for the most part; however, JS hoists variables to the top of the function context in which they reside
    • an iteration variable i within a for() loop parameter is created before the for() loop  is read by JS & outside of the for() loop parentheses . This can create conflicting variable names.
  • Function-Level Scope
    • Variable scope: the area of code in which a variable storage is accessible. Not all coding languages have variables accessible for use in the whole document
    • block-level scope indicates variables are only available in between the block of code they reside (in between curly braces). such as, iteration variable i in a for() is only available inside the loop. NOT THE CASE WITH JS.
    • In JavaScript, variables are function-scope. You can keep values contained by wrapping them up in functions.
  • Global Namespace
    • Typing in window in to a web developers CONSOLE displays the global namespace
    • Every variable you add appears in the global namespace and could cause conflicts between similarly named variables—even from other .js files.
    • Solutions: Declare variables only within other functions & Declare a single global object, and attach all of your would-be global variables to that object.


  • D3 is most useful when used to generate and manipulate visuals as Scalable Vector Graphics (SVG).
    • drawing with HTML is possible but clunky and subject to inconsistencies across browsers.
    • SVG are more reliable, consistent, and faster
    • can be included in HTML document or inserted dynamically into the DOM
    • XML-based, does not run on Internet Explorer versions 8 and earlier
    • create an SVG element (like a canvas), and at minimum specify width and height; SVGs will take up all available room within a block otherwise.
    • height and width specified in pixels or other supported units (pt, in, cm, mm)
  • Simple Shapes
    • SVG coordinate systems begin from top left of bounding box/container
    • <rect x=”0″ y=”0″ width=”500″ height=“50″/>
    • <circle cx=”250″ cy=”25″ r=“25″/> (circles are centered)
    • <ellipse cx=”250″ cy=”25″ rx=”100″ ry=“25″/>
    • <line x1=”0″ y1=”0″ x2=”500″ y2=”50″ stroke=“black”/> (stroke color MUST be included to become visible)
    • <text x=”250″ y=“25″>Easy-peasy</text> (x&y denote start of baseline)
      –>text will inherit CSS-specified font styles of its parent element(s), you can override it with in-line formatting
    • Any visual element that run up against the edge of the SVG will be cropped; consider descenders, especially.
    • SVG’s default style is a black fill with no stroke. If you want anything else, you’ll have to apply styles to your elements.
    • You can assign a SVG element a class, and control it with a rule in a CSS stylesheet. Consider beginning CSS rules for SVG elements with svg so that properties of SVG elements that do not translated to CSS properties do not get applied elsewhere in the document by mistake.
    • For example stroke-width and stroke are not CSS-valid properties, but work with SVG properties.
    • There are no “layers” in SVG and no real concept of depth. SVG does not support CSS’s z-index property, so shapes can be arranged only within the two-dimensional x/y plane. The order in which elements are coded determines their depth order
  • There are two ways to apply transparency: use an RGB color with alpha, or set an opacity value.
    • rgba() expects three values between 0 and 255 for red, green, and blue, plus an alpha (transparency) value between 0.0 and 1.0; with rgba(), transparency is applied to the fill and stroke colors independently
    • <circle cx=”125″ cy=”25″ r=”20″ fill=”rgba(255, 255, 0, 0.75)”stroke=”rgba(255, 0, 0, 0.25)” stroke-width=”10″/>
    • Opacity attribute affects entire shape as one (stroke and fill, etc)
    • <circle cx=”65″ cy=”25″ r=”20″ fill=”rgba(128, 0, 128, 0.75)”stroke=”rgba(0, 255, 0, 0.25)” stroke-width=”10″ opacity=”0.5″/>
  • Notify older browser users (those without SVG or d3 capabilities) to upgrade their browsers to see content
    • Use Modernizr ( to display a non-dynamic model with an explanation to use a different browser.
    • http://js/modernizr.js

              test: Modernizr.svg && Modernizr.inlinesvg,
              yep : [ ‘js/d3.v3.min.js’,
                         ‘js/script.js’ ]

VizTech: Git and GitHub

assignment 1 Fork, Edit, Commit, Push: GitHub to Local Device and Back

Step-by-step guide

  1. Forking this repo
    • Click on the “Fork” button on the top right while logged in to copy this repo to your account.
  2. Clone repo to your local machine###
    • Using command line, navigate to a desired folder destination using `cd` or `dir` depending on your operating system. Then use `git clone` to clone this repo to your local machine.
    • Again, using command line to navigate into the folder that was just downloaded. Enter the following command “` git remote show origin“`
  3. Make changes to your file###
    • Make changes to ‘hello.txt’ and enter your name where appropriate. You are done!
  4. Stage, commit, and push your changes to Github
    • This step involves three things. First, you “stage” the changes you’ve made locally so it’s ready to be committed. The command is “` git add –all“` where `–all` indicates that you are staging ALL changes you’ve made to all files, as opposed to individual files. Then, use “`git commit -m “Commit message here”“`
    • This means that the changes have been “committed”, and are henceforth tracked. `-m` indicates a message to be included with the commit. It’s good practice to always include a concise, descriptive commit message.
    • Finally, push your committed change from your local machine to Github, using “` git push origin master“`meaning “push changes from your local master branch to the remote destination origin”. We’ll explain what this means later.

In summary…
You’ve just gone through the process of forking from someone else’s Github repo, making your own changes, committing and tracking them, and push them to your own Github repo. We’ll be doing a lot of this throughout the class, so do please get comfortable with it!

Hierarchy: Marijuana Labels

A proposed, current typography issue: With the legalization of recreational marijuana in the US, the USDA will need to establish standards and practices in labeling and packaging. Since most growing businesses are not on a national level, a hierarchy in marijuana labels has not been standardized and varies among businesses and state lines.

Washington State Regulations
Recreational marijuana

Labels affixed to the container or package sold at retail must include:

  • The business or trade name and Washington state unified business identifier number of the licensees that produced, processed, and sold the usable marijuana
  • Lot number
  • Concentration of THC, THCA, CBD, including a total of active cannabinoids (potency profile)
  • Net weight in ounces and grams or volume as appropriate
  • Warnings that state: “This product has intoxicating effects and may be habit forming” &/or “For use only by adults twenty-one and older. Should not be used by women that are pregnant or breast feeding”
  • Statement that: “This product may be unlawful outside of Washington State”
  • Date of harvest

With this project, six hierarchies must be proposed that abide to the WA regulations. Only one typeface must be used, the design must stay in black and white, and the label must be 2″ squares intended for an intimate viewing distance.

Label 1, Label 2, Label 3, Label 4, Label 5, Label 6
Label 1, Label 2, Label 3,
Label 4, Label 5, Label 6

The hierarchy is pretty clear at first, in that the name of the strand should be the most important aspect on the packaging, as it differentiates this product from products next to it and is generally what people would refer to it as in conversation. In Labels 1,2,3,5,&6 the company name was emphasized, but what if no “brand names” emerge? Label 4 de-emphasizes the company name and emphasized the statistics on the effect of the product.

Letterform Assignment: Edits

To see previous iteration of this project:

Final Drafts:


Using Impact, a bold geometrically abstract typeface, COMPLETE in caps takes up a full space of text, versus incomplete in lowercase leaving negative space with ascenders and descenders, and the form-background colors where inverted to draw attention to this. The cropping of the composition further emphasizes COMPLETEly shown.


Symbolic of the typefaces styles chose, the “a” is a traditional humanist typeface, emphasizing the connection to the natural handwriting of humans. The “ur” is in a modern/neo-classical emphasizing the cleaner forms of the industrialization of type. Therefore, the shared letters of “nature” are in a Transitional type, being a product of both Humanist and Neo-classical typefaces.


Fight in a heavy slab serif emphasizes the sturdiness and rigidity of someone “standing their ground” and likens to bricks. A vertical orientation takes up more compositional space, an intimidation factor. Flight (in a light/thin font family) orients itself opposite, in a horizontal fashion, but the baseline is curved to imply movement away from steadfastness of fight.

Design History: 1 Cosmology & Theological Narrative

1 Cosmology & theological narrative 09.21.15

Alfred Jannoit’s Palace de la Porte Dorée

  • facade of a permanent structure for the 1931 Paris International Colonial Exhibition
    • 1960: building became National Museum of African and Oceanic Arts
    • 2007: building became Immigration History Museum
  • Facade is a bas-relief carving, like that of Mexican art
    • commissioned, took ~14 months to complete
    • 40ft high, 300ft long; wrapped around building and over doorways; parts obscured by thick columns, difficult to see whole piece at once
    • Art Deco/Moderne stylistically
  • Content of piece denotes all territories of the French empire
    • Each panel = ~1 country
    • depiction of each country includes people, in their natural habitat, working to gather resources. Moving them to transportation (above) that are all focused inward.
    • THEME: economic benefit of each country to France mainland
    • France represented by interior space and only in terms of Roman/Greek God(ess) imagery.

The Cathedral of Saint-Lazare in Autun: The Last Judgement

  • location: Autun, France
  • built: ~1120-1146
    • Romanesque stylistically
    • Gothic additions
  • usage: pilgrims visited to see relics of Lazare believed to heal and bless
  • Saint Lazare
    • Mary Magdalene’s brother; brought back to life by Jesus
  • The Last Judgment
    • over the main entrance; tympanum
    • depiction of Christian judgement day
    • used to show information within bible, because at the time of creation most were illiterate
  • Depiction of Jesus
    • largest hierarchy, central
    • under inscription: signature of Gislebertus, usual at time
  • Blessed in Heaven to the left, Damned in Hell to the right
    • St. Michael weighing souls in Hell
  • Awaiting Judgement
    • Shows both processes of acceptance into Heaven and plucked into Hell
    • designed to be looked up at from entrance; putting those awaiting judgment nearest church-goers
  • Preserved during French Revolution because during 17th century depiction was considered too grotesque and covered with plaster.

Borobudur Temple – Java, Indonesia

  • largest and most complete vision of Bhuddist relief art
  • ~8th/9th Century
  • ~2,500 m of sculpture
  • hidden for centuries under foliage and ash; preserved
    • no evidence of civilization using this temple in 10th Centruy
  • level of detail so great you can tell genus of plant; old agricultural methods
  • represented other Asian cultures understood trade and travel
  • Zones
    1. Kamadhatu: WORLD OF DESIRE common law, cause and effect
    2. Rupadhatu: WORLD OF FORMS released from worldly matters
    3. Arupadhatu: WORLD OF FORMLESSNESS highest sphere, enlightenment – no reliefs
  • Depicts all 500 reincarnations of Bhudda
    • all with a language of hand gestures depicting teachings of Bhuddism
  • ziggurat: terraced-step pyramid; upward toward enlightenment
  • stupa: a place of worship; dwelling for the mind

La Sargrada Família – Barcelona, Spain

  • facade tells the life of Jesus Christ
  • 18 towers (12 apostles, 4 evangelists, the virgin mary, Christ)
  • 3 facades
    1. Nativity – portal of charity, portal of hope, portal of faith
    2. Passion (The suffering)
    3. Glory (The Resurrection) – unfinished as of today; represented between seven deadly sins and seven heavenly virtues
  • Antoni Gaudí inherits project in 1883, concentrates solely on work in 1914, dies in 1926.
    • Spanish Civil War bombed his studio, so most original plans were lost
    • inspiration includes: his religious faith – sacred family (jesus, mary, saint joseph) & love of nature (god’s work)

Thanka Narrative Painting – Tibet

Green Tara
  • Thanka: thing that unrolls
    • subject: religious doctrines, stories, buddha imagery, historical events, biographies
    • theme: always buddhism (follow laws of depiction)
    • passages from scripture are written on back
    • never signed/dated by artist
  • Development Period AD 1100
    • paintings depict diety story on paper or silk
    • Composition: simple, composted of many straight lines
    • Colors: reds, greens, yelows
    • Subject: Bodhisattva
  • Maturing Period AD 1440-1500   
    • composition: more complex, perspective and proportion
    • colors: more varied
  • Modern Period AD 1600-1800
  • Examples
    • “Wheel of Life”
    • “Green Tara” – willing to help needy; enlightened feminine compassion; aka the Prompt
    • “Mahakala” – the great black one – each arm symbolic of achieving perfection; each arm holds item – crushing animal form (elephant) represent suppression of animalistic nature of person
  • How to make
    • with brush: hairs of animals (cats, horse, goat, etc)
  • Scroll function because Tibetan buddhists used them as a teaching tool and meditation tool; they often traveled and had to carry these with them
  • Depictions of Buddha and deities are under strict laws

The Parthenon Marbles – The Elgin Marbles

  • split between Acropolis Museum and British National Museum
  • Parthenon
    • built on a re-built Acropolis (destroyed by Persians around 480 BCE)
    • huge scale project for the time
    • temple to Athena; designed to be the first all-marble temple

The Marbles:

  • The pediment (triangluar, along roof’s facade)
    • Athena’s mythology; all gods; sculpture
    • triangle used as window instead of container
  • The metopes (smalls squares, below pediment facade)
    • mythological battles; deep relief
    • metaphoric battles of mythology creature vs. ideal human form
  • The frieze (continuous bas-relief, interior)
    • parade/processions of Greeks; shallow relief tilted toward viewer
    • showing all Greeks at unifying event at the Panathenaic Festival parade
  • All of which are far from the viewers on the ground
  • Communication Goals:
    • history of Athens, in relation to Athena
    • greek pride (first attempt to carve Greek mortals next to Greek Gods)
    • greek ideals

Designing Information: Chapter 5

Designing Information: Human Factors and Common Sense in Information Design
Joel Katz

Chapter 5: Finding your Way? Movement, Orientation, Situational Geography

5  Finding your Way? Movement, Orientation, Situational Geography

What’s Up? Heads up

  • Heads-up maps, originally developed for pilots to look up and read maps at the same time, orients maps so that up on the map is forwards from their orientation to the sign
  • GM introduced HUDs (heads up displays) in automotives in 1988 and now almost all GPS devices have this option
Heads-Up display of pedestrian maps for Walk!Philadelphia
Heads-Up display of pedestrian maps for Walk!Philadelphia

Signs and Arrows

  • Two arrows in way-finding
    • literal: point in the actual direction
    • literal arrows can have different cultural associations. On a HUD, American “up” arrow means straight ahead, French “down” arrow means straight ahead (as in, go under this sign).
    • theoretical: point in direction of something, possibly distant, but do not clue as to how to get there.

scale and adjacency

  • While scale and adjacency are preferred constant and mapped naturally, printing concerns or restrictions can take precedent.

a movement network genealogy

  • “It is the challenge and responsibility of the information designer to design maps and other navigational aids with an understanding of the different ways in which movement modes are experienced and perceived.”
  • Consider your unit of measurement or perception of measurement when abstracting maps for a user/purpose
    • While walking, we count cross-streets, or monuments, or addresses; while riding a bus, we count stops; while flying there is only a beginning and ending airport.

map or diagram?

  • Mark Noad’s redesign of the London Undergound Map walks the line between a map and a diagram
    • It closely relates to the actual space between stops, but simplifies shapes without being geometrically rigid.
    • Maps are difficult to memorize, but contain a wealth of information for various users
    • Diagrams are easier to memorize and conceptualize, but are sparse in order to help certain users accomplish a certain task.
underground maps of London; Beck, Noas (2012), geographical accuracy
underground maps of London; Beck, Noas (2012), geographical accuracy

information release sequence

  • changes in mode of transport require user to revisit context
  • each modal change sequence is different
  • information user needs to attain is in discreet steps, but each step might not be simple/familiar
    • releasing information depending on location (inside/outside, above/underground) or status (un/paid) helps discreet steps to be completed in order
    • it is a hierarchy that is dependent on time and place


  • maps that measure geographic distance as a function of time
    • if it takes the same time to get there, it is visually equal.
    • takes into account things like: availability of transport, topography, obstacles, etc.

transitions and familiarity

  • the transition from a geographically intact pedestrian map to an abstracted subway map can prove difficult
    • consider how much geographic accuracy is needed for a map to do its job. Can routes be straight when they are really curved? Can routes be less curved in the diagram than in real life? Small discrepancies will generally go unnoticed by users.
    • natural features (river, pond, shore, etc) can help orient users between maps and diagrams

perils of alphabetization

  • organizing information: LATCH (Location, Alphabet, Time, Category, Hierarchy)

the view from below or above

  • placing pictorial representations of buildings on flat maps could give impressions of the facade’s directionality
  • in any one map perspective, at max you can only see 50% of buildings’ facades. Not every building facade will be the iconic, picturesque version of the building.

urban open space

  • Roman urban architecture valued the uniform street facade with intricate public spaces interior.
    • This is instance, designer Giambasttista Nolli published a map that denotes open street space and open courtyard space of equal hierarchy, to allow pedestrians to understand, when faced with a facade, if there interest behind those walls.

Designing Information: Chapter 4

Designing Information: Human Factors and Common Sense in Information Design
Joel Katz

Chapter 4: Structure, Organization, Type: Hierarchy and Visual Grammar

4 Structure, Organization, Type: Hierarchy and Visual Grammar

the grid

  • an armature for the structure and organization of information
  • two types
    • Skeletal: straightforward orthogonal grid, evenly spaced
    • Interval: can be unevenly spaced, still orthogonal, but leaves joists in between sections

disorganization and proximity

  • In every arrangement of text there is figure and ground, positive and negative space. It is in this positive space that information exists and in this negative space that organization and proximity can support it.
  • Text closer together is read together; text further apart is read as freestanding and distinct.

rational hierarchies

  • Information design is the application of form appropriate to content and user.

staging information

  • Many of the characteristics of screen interactivity permit hierarchies of information to be layered corresponding to the size of each audience segment.
  • Waterfall menus and drop-down windows can add important functionality to accessing large quantities of data.
    • Hiding and revealing information maintains an unthreatening overall appearance while providing access to the same amount of detail that knowingly exists.


  • part that represents the whole, often associated with abstraction as it related to iconography and way-finding symbology
Iconography near bathrooms. AGIA (top), MoMA NYC (middle), Pompidou Paris (bottom)
Iconography near bathrooms. AGIA (top), MoMA NYC (middle), Pompidou Paris (bottom)
  • Iconography issues:
    • ambiguity or misinterpretation is due to weak simplification
    • offense or confusion due to cultural differences

visualizing regulations

  • design theory: how do distinguish between design examples, performance criteria, and mandates?

focus and distraction

  • multi-tasking is not always a bad thing; many people can read and listen to music; some people can’t see a slide and listen to a presenter.
    • Consider the audience and their distractions and focus when communicating information, orally or visually or aurally, etc.

sans serif and serif typeface

  • sans serifs are considered more legible at larger type sizes; serifs are considered more legible in blocks of text, especially in print
  • careful typesetting and increasing more detailed technology in visual resolution are mitigating the differences between using the two decisively.

size matters (and weight, too)

  • digital masters of fonts have eliminated hand-re-drawing of fonts at each new point size; similarly, they have eliminated swelling of thin strokes due to bleeding ink on absorbent paper.
    • that in mind, font originally designed before the digital age was designed with these phenomena, different angles and shapes for different sizes.
  • weight of the font also plays a part in legibility, depending on size
Effects of Font Size on Legibility within a Font Family
Effects of Font Size on Legibility within a Font Family
Effects of Font Weight on Legibility within a Font Family
Effects of Font Weight on Legibility within a Font Family


  • tracking is helpful when small caps are used
  • all caps are difficult to read in blocks, and often need kerning help in large sizes
  • white text on black backing will lead to halation, change white to 5-10% gray.
    • when transitioning out of black back/white text, it will look bolder than the type in black.

Small Urban Spaces: Chapter 2 + Chapter 3

The Social Life of Small Urban Spaces
William H. Whyte

  • Chapter 2: Sitting Space
  • Chapter 3: Sun, Wind, Trees, Water

2 Sitting Space

  • Most plazas examined were similar: on major avenues, occupied block fronts, near bus stops and transportation options, etc.
    • too great of variance between plazas called for a study
  • No singular device showed reason for variance in population: sun, sitting space, food, aesthetics, etc.
    • Aesthetics from the architect or designer’s view were difficult to perceive from ground-level use.
    • Most “strip” plazas were empty most of the time, but shape alone does not dictate success, as many popular plazas were considerably more wide than long, or vice versa.
    • Pure size/available open space can have the opposite effect (can be popular or completely empty)
  • Only Rule: People tend to sit where there are places to sit.
    • The first rule to abide by. Without effective sitting space, people cannot enjoy the sun, the food, the sights, etc.

Integral Sitting

  • Sitting space should focus on being more socially comfortable than physically comfortable.
    • Sitting people like choice. Location, environmental, popularity, proximity, etc.
    • Often, people sit on any surface despite it’s intention. Ledges, steps, etc. all are suitable for sitting.
    • Planting shrubbery, adding rails, or placing water too close can turn a sittable ledge into an unused waste-of-space.
  • When suggesting all ledges should be sittable, guidelines are helpful! Lack of guidelines suggest architects and designers should adhere to convention.

Sitting Height

  • People will sit on any surface between 1 foot and 3 feet high
  • Spaces for sitting that are 2+ backsides deep, and are accessible from both sides, add more sitting space and added social comfort between strangers occupying the same area.
  • Steps should not constitute the same amount of space as ledges in a plaza, but can function like ledges for sitting space
  • Concentrations of people will form in the diagonal of building traffic to corner of the steps.
    • The congestion is amiable, as walkers move around stationary persons usually with ease and no discernible discomfort.
    • The easier the flow between between the street and plaza, the more likely people are to move between the two— to tarry and to sit.


  • Isolating benches from the action of a street or plaza often leads to them not being used
  • Experiment with benches and chairs; place moveable furniture in spaces and watch how people group them and ungroup them.


  • The possibility of choice is as important as the exercise of it.
  • Set pieces of furniture often ignore social distances.
    • Social distances are subtle and ever-changing
  • While many building managers may object to movable seats for fear of theft or damage, take the Metropolitan Museum of Art in NYC: There are 200 seats out in front of its plaza, and very little vandalism or theft occurs. It costs less to replace a chair occasionally than it does to have someone watch them.
The possibility of choice is as important as the exercise of it.
The possibility of choice is as important as the exercise of it.

Sitting Space

  • Best measured in linear feet, because with ample backside room, depth matters little for use.
  • On the best used plazas, there is almost as much sitting linear ft. as there was perimeter linear feet.
  • One linear foot of sitting space for every 30 square feet of plaza space, but this proportion is a minimum and should be easy to surpass.

3 Sun, Wind, Trees, Water


  • Sun is a critical factor for plaza use when the temperature dictates a need to be warm
    • Relative warmth determines more plaza use (the first 80 degree day in spring will garner more use in a plaza than an 80 degree day mid July)
  • Access to the sun allows a plaza to be successful, but doesn’t solely dictate it
    • Requiring air rights to surrounding low-rise buildings around the plaza helps keeps sunlight in the plaza.
    • Borrowing sun, with reflective architecture, should also be utilized for places not exposed to direct sunlight. The effects are similar to that of direct sunlight.


  • Suntraps: locations blocked by ~3 sides from wind but allow access to sunlight
A suntrap in St. Thomas Church
A suntrap in St. Thomas Church
  • Open plazas alongside buildings may not have this luxury. Wind-tunnel tests should be common practices for architects in respect to structural integrity as well as the human experience.
  • Semi-outside spaces are now the preference, as they are customizable to allow some wind, some sun, etc.


  • In relation to sitting space, trees provide a comforting canopy and shade.
  • The best used trees are those planted in close proximity to walkways and sitting space, that are planted flush with the ground (no ledges or fences blocking access).
  • Clusters of trees are preferable (groves and arbors) to geometric, regular, or sparse spacing of foliage
 a canopy of trees makes this high-traffic area comfortable and welcoming
a canopy of trees makes this high-traffic area comfortable and welcoming


  • Water functions similarly in all forms (waterfalls, rapids, pools, fountains, etc) and generally has only positive effects on an area.
  • Water features are liked for their “look” and their “feel” and their “sound”
    • Ornamental access to water has proven to be the easiest of the three to achieve.
    • Access to the perceptual sensation of water (touching, splashing, dipping) is ideal. Overly guarded or restricted water features will prevent popularity among a plaza. There are no studies showing access to water, even perceived “dangerous” water features, leads to any more accidents that restriction to those places.
    • The sound of moving water can also be tolerated at louder volumes than street traffic because of its associations with tranquility. Without visual context, people will say it’s too loud, but in context it is appreciated.

Designing Information: Chapter 3

Designing Information: Human Factors and Common Sense in Information Design
Joel Katz

Chapter 3:Quantitative Issues: Dimensionality, Comparison, Numbers, Scale

3 Quantitative Issues: Dimensionality, Comparison, Numbers, Scale

Information Overload

  • Issue with too much information is that of usability, not accuracy. Completeness is relative to the situation.
  • At some point information eclipses understanding and it no longer of extra benefit

Too Much Information

  • Consider data to show for certain purposes, not every purpose.
  • Large amounts of data, communicated successfully, is a matter of finding and understanding functionality. Without a clear understanding of mapping and coding data, users are left without functionality.

Too Many Numbers

  1. Too many numbers: reduce quantity of data or structure a more salient hierarchy
  2. Organization issues: interference due to spatial/layout arrangement

Dimensional Comparison

  • “The more dimensions used in quantitative comparisons, the large are the disparities that can be accommodated. As irony would have it however, the ease of comparison generally diminishes in direct proportion to the number of dimensions involved.”

Pyramid Paradox

  • rendering 3D imagery onto 2D surface calls for an examination of area rather than volume, making the comparisons amongst volumes difficult.
  • choices must be made whether to show what we perceive to be correct comparisons, or quantitatively accurate comparisons
Pyramid graphics showing how perception of volume % (top) compares with accuracy of volume (bottom)
  • “The human brain has a surprisingly tough time with geometry and often can’t accurately gauge when an object has doubled or tripled in size. It’s even trickier when the object is a wide-mouthed cup, larger on the top than bottom. ‘We tend to underestimate the increase in size of any object,’ said Prof. Chandon, director of Inseas Social Science Research Center in Paris. ‘When you double the size of something, it really looks just 50%-70% bigger, not twice as big.’”


  • With comparisons on a large scale (distance between planets and size of planets, for example), using a substitution metaphor of everyday objects can be helpful

Numerical Integrity

  • Break lines and non-zero baselines allow efficient use of space, but if comparisons are in order, render information useless. It is misstating information.
Bar graph with a zero baseline (top), with break lines (middle), and non-zero baseline (bottom). The bottom two graphs distort comparisons.
Bar graph with a zero baseline (top), with break lines (middle), and non-zero baseline (bottom). The bottom two graphs distort comparisons.
Bar graph with a zero base-line, that creatively bends bars to allow comparisons to be made accurately by sight on large and small scales simultaneously
Bar graph with a zero base-line, that creatively bends bars to allow comparisons to be made accurately by sight on large and small scales simultaneously

Perils of Geography

  • Geography binds our ability to compare other variables regardless of location and area. Plotting information on maps require a visual language of geography which can confuse complex data sets, such as the Electoral College.

Escaping Geography

  • Comparing variation against a constant set of data (like geographic borders) in cartography:
    • Eliminate distractions and misrepresentations created by shape; choose any orientation devices (diagonals, etc.) with care.
    • Separate into regions before determining size and adjacency.
    • Set constant size for “whole data” and frame regions and singularities in terms of that size (proportions, percentages, etc).

Apples to Apples: Data Scale Consistency

left to right: Government map of South Philadelphia; residential pop. density; personal income; superimposition of pop. density and income; residential density and land use
left to right: Government map of South Philadelphia; residential pop. density; personal income; superimposition of pop. density and income; residential density and land use
  • all five maps are at the same scale, scale between all 20 cities in atlas at same scale, not determined by size of the page.
  • Urban Atlas: 20 American Cities, A Communication Study Notating Selected Urban Data shows 20 city maps (all at constant scale to each other) and their corresponding data in a way that comparisons between cities can be made. The constancy is helpful despite the difficulty in printing and efficiency of space in the book.


A successful use of double y-axis, no x-axis comparison
A successful use of double y-axis, no x-axis comparison
  • 2007 data showing relationship between health care costs in a country (per person per year) and average life expectancy. The “zero” is located on the dashed line in the middle, aligning both axes’ average cost or age. The thickness of line denotes # of doctor visits, color of line denotes universal health care (blue) and those without (orange).
  • Double y-axis charts can compare two categorically different variables without an x-axis (usually representing time most saliently)