• Stones Unturned
  • Final critique
  • Round of applause
  • Winter break

• Presentations: Robin on Jacques Bertin & Zhibang on Tufte’s The Visual Display of Quantitative Information
• Final check-in on Stones Unturned

Assignment

• Stones Unturned
  • Finish design/development & come to class ready to present your work and describe your process
• Everything else
  • Any updates to earlier projects must be checked-in and pushed to your github accounts by the 18th

• Mapping tutorials
  • Measuring distances (and orientations) between pairs of lat/long coordinates
  • Dealing with geoJSON
    • The USGS provides an even richer set of fields in its geoJSON feeds than in the CSV feeds
    • Consider copying the unpackJSON, sortQuakes, maxValue, and minValue functions into your project
  • Tectonic plates & borders
• Stones Unturned
  • Individual meetings

Assignment

• Stones Unturned
  • Continue developing your prototype and have a rough draft of your finished project ready next week.

• Presentations
  • Xingwei on Georgia Lupi
  • Xingyang on Forensic Architecture & Michael on William Playfair
• Tutorial
  • Locating cities closest to a given latitude/longitude
• Stones Unturned
  • Individual meetings

Assignment

• Stones Unturned
  • Integrate your diagram and map into a single, cohesive view on one web page.
    • If your diagram sits alongside the map, figure out the overall page layout that makes their relation to one another obvious and harmonious
    • If the diagram only appears when you interact with the map (e.g., via a tooltip), be sure to implement this
  • In all cases we should now only be looking at actual data, not mockups, from now on

• Presentation: John on Otto Neurath
• Tutorials (refer to the examples directory for details)
  • Using map() and lodash to create scatterplots
  • Converting timestamps to objects and using moment.js to deal with calendar math.
• Meet in small groups to look over your sketches for Exercise 3

Assignment

• Stones Unturned
  • Explore the direction selected in class and prototype the different component views that will make up your final visualization:
    • Your spatial visualization should now be implemented using leaflet to present markers and popups in the style of your choosing (though the contents of the popups can be placeholder for now if they depend on your diagrammatic design)
    • Your diagrammatic design should be implemented using p5 and display somewhere on the same page as your map.
    • The diagram and map don’t need to be fully integrated yet but come to class with a clear idea of how they will interact with one another and take some first code-based steps in that direction
  • Read up on the various ways to add interactivity to your p5 sketch in the Beyond the Canvas tutorial and the create* functions (for sliders, buttons, etc.) listed in the DOM section of the reference and begin experimenting with them

• Presentations:
  • Yujun on Catalogtree & Yiran on Hans Rosling
  • Inhye on Ben Fry
• A Thousand Suns: final crit

Assignment

• Stones Unturned
  • Open a terminal window in the dvia-2019 folder and type make update to pull the new assignment down from github.
  • Start off by making pencil sketches for your non-spatial ‘diagrammatic’ representation of the data in the feeds. As always, bring in at least three different approaches that vary in terms of the information being depicted and the data → retinal variable mapping. The point of these sketches is not to accurately represent the data as it exists but to illustrate your strategy for mapping the quantities, times, text strings, etc. to formal elements. These three sketches should be conceptually different from one another; not just stylistic tweaks of the same idea.
    • Place your sketches in the process folder.
    • Describe in the README.md file both the logic of your diagram designs and how they'll relate to the map representation on screen (i.e., is one a sidebar or inset to the other, are the graphics summarizing all earthquakes or do they detail specific ones selected from the map, etc.).
  • On the mapping side of things, figure out what your approach will be in terms of the tile set for the basemap, what kinds of markers you’ll be adding, what additional areas (in the form of lines or filled polygons) you’ll be calling attention to, and which attributes from the USGS data you’ll be using directly. Implement these decisions in the project folder (or copies of it if you explore multiple directions).

• Presentations: Yujun & Soonk on Catalogtree
• Exercise 3
  • Small group meetings and in-class work session

Assignment

• A Thousand Suns
  • Choose one of your three directions to develop and create a completed version of it.
  • Using either the external data source you collected or a dataset collected by one of your classmates incorporate at least one additional variable into your representation beyond the original set of CSVs in the repository.
  • As always, feel free to bring in multiple variants if different options for how to solve a design problem/represent the data occur to you.

• Presentation: Amanda on Tahir Hemphill
• P5 Mini-tutorials:
  • Open a new Terminal in the dvia-2019 folder and type make update to get the newest files
  • SVG Export: You can save your p5 sketches to SVG files that can then be opened and tweaked in Illustrator. Look in the svg-export folder for an example of what you need to add to your code to make it work.
  • Brewer palettes: If the chroma.js library is too heavyweight for your needs, take a look at my brewer palette generator and see if you find it easier to use. Consult this catalog to find the name of the palette you want.
  • Table objects: See the table-from-cvs example and follow its nested for-loop structure to step through each row and column in turn. Also look at the sequential-palette sketch to see how to calculate value ranges and map them to color ranges.
• Small group meetings and in-class work session

Assignment

• A Thousand Suns
  • Create three code-based sketches exploring your chosen design direction for depicting the testing data and your candidate representations of the external data you’ve collected.
  • If you end up modifying an SVG generated by your p5 code, place a PDF of your modified version in the process folder and update the process/README.md file with a description of what it depicts. Make sure you choose a filename for the PDF that makes it clear which .js file it was derived from.

Can layering color palettes on top of each other, as is the case with many maps (an "earth tone" color palette for topographical formations, a black one for artificial structures) clutter up the image and make it harder to interpret? Is it better to use a different retinal variable across different dimensions of the same data or can you use color across several different variables in your data?

"Follow good design practice as well as good visualization practice when developing imagery. In addition to color, consider the other aspects of design: typography, line, shape, alignment, etc. Be aware of the media you’re designing for. It may be trite, but a good visualization is better than the sum of its parts. Be aware of how the various elements of your design fit together. How do the colors used for the data interact with labels?"

Is color best used for continuous data variables (for instance, mapping to a gradient of hues to represent something with a large number of degrees between them) or for discrete data categories? (for instance, men vs. women, children vs. adults, or decades of the twentieth century?)

However, personally, I am influenced by and enjoyed a swiss education in graphic design. A kind of doctrine as "if you cant convey the information in black and white, you are not finished" is deeply rooted in my approach to visual communication. I am still starting any project in black and white — and add color in a later phase, if necessary.

Simmons lecture poses the question for me personally, if thats still the approach to go or to start considering colors in an earlier phase.

On another note it was striking to see, how attracted I ( and supposingly others also) were by the handcolored visualization. Rich, "real" colors (still) have a greater impact on human than colors which are purely generated in pixels.
Another proof for it are the so often quoted cartographic maps (often swiss made). Their "sucess" is not only the very good design, but also the very good printing quality and the rich printing colors (due to a special printing process).
It shows that good/worthy "material" can have a greater impact when conveying information. The information designer Joost Grotens and his studio, as a contemporar example, puts great emphasis on  actual good quality of material of their information design (http://www.joostgrootens.nl/#mapping)

• Presentations
  • Neil on Lev Manovich & Qinglu on Nicholas Felton
• Reading #2: Subtleties of Color
  • To actually use your newfound understanding of color, start looking into using chroma.js in your sketches
  • Note the use of the .hex() method to convert from chroma’s color representation to p5’s on line 23 of this example

Assignment

• A Thousand Suns
  • Clean up whatever spreadsheet manipulation you did to the testing data via pivot tables and the like into a csv-friendly format that has a single header row, 1 set of data per row, and is purely rectangular (i.e., no skipped lines or multi-row/column regions). Save this to a csv in your project/data folder where your p5 code can access it.
  • Find the external data source you’ll be using for your ‘so what’ and ‘compared to what’ variables and convert it to spreadsheet form. This should probably live on Google Sheets but you should also download a csv to project/data.
  • Start a code-based sketch that minimally does the following:
    • loads the testing data you’ll be using via the preload() and loadTable() functions
    • loads the external ‘context’ data you’ve collected and added to the data folder
    • graphically renders the testing data in accordance with one of your pencil sketches
  • Bring in three additional pencil sketches that show different options for merging the testing data with your external data source. As before, save these images to the process directory and explain their logic within the README.md file.

I am interested to look further into the Nasa Color Tool and to practice using L*C*h when selecting colors instead of defaulting to whatever program I'm using seems to prefer. The examples showing how differently spaced the rainbow hues are from each other made it much more clear on why "stepping" from one to the next is not actually accurate when communicating a proportionate change in data. This example below showing L*C*h vs. HSV helped me understand how there is more room for perceiving variation in color with L*C*h.

The pre-attentive processing and intuitive notions on color are aspects that are essential for those working with data visualization to be cognizant of. I am curious if there is a methodology or step-by-step process to walk through when beginning to consider color. For example, first determining what is and what isn't data, then considering what variables may or may not have an intuitive or cultural association with color (for example, water), and finally, what relationships do all the variables have to each other and how should the colors differ. There also needs to be a time to check your work to make sure that the colors you're using are accurately representing the data and can be perceived by people with color blindness. The example Simmon used with the surface temperature heat map was a helpful demonstration of the necessity to check-in, by showing that palettes that may work at a large scale, may not work when zoomed in to a more detailed scale.

Overall, this article and video are a great reminder of how specific and strategic a data visualization designer must be when selecting colors to represent data. Not only must color be representative of the data, accurate in its changes, perceptible, and aligned with preconceived notions, it should also be all around aesthetically pleasing. Color should never be an after thought.

In the first part of the blog, there is a lot of attention on hue, saturation, and lightness. It sounds like this combination allows for the best communication (compared to others) when used appropriately. Are there any situations where other categorical combinations of colors would work better to express a certain dataset? This whole concept seems overly granular but we as visualizers should always strive to express data through colors as effectively as possible. Some of the blog’s examples of color ramps have specifically exemplified these seemingly inconsequential yet obviously impactful differences in choices around showing color change (ex: linear vs. logarithmic).

Understanding more about the choices around cartographic design was a fun process since I have a background in GIS. I have thought a lot about these choices but have never read about them in such detail. Experts have studied many hours to define the best actions for color in certain categories. I really liked the USGS map that displayed land cover in Oregon because it figures out a way to intuitively present sixteen different colors by grouping similar categories together. Although a user may not read the map and try to find every difference, it gives the viewer a clear understanding of the land cover trends in the area.

As a final note and following my thoughts in the previous paragraph, it was nice to see the tools and tips for creating color in the mapping program I used, Acrmap. Using the symbology tool in the software was one of the most entertaining parts of my job. It is cool to know that color brewer is used in the program.

The section that I found the most interesting is Connecting Color to Meaning. Robert Simmon raised the idea of intuitive colors, which could help non-experts interpret the data visualization based on their perceptual understanding. The example Robert Simmon presented is two satellite visualizations in different color uses.

The example on the left is a satellite visualization that scientists normally view, with rainbow palette. However, it became difficult for novice viewers to understand the meaning of each color because the meaning of the rainbow colors here have a different meaning compared to what non-experts understand. It is easy for them to relate warm colors and cold colors to temperature- red, orange, and yellow represent hot and blue for chilly. When transferring the unnatural colors of the rainbow palette into the example on the right for phytoplankton, the confusion could be somewhat ignored- dark blue for ocean, the gradient of turquoise, green, and yellow for increasing concentrations of plans and algae.

These blogs remind me of an article about using semantically-resonant colors to represent data I read before. I think when applying these concepts into data visualization, we also need to consider how the meaning of colors varies in different culture. For example, in the U.S., we commonly use red for decreasing and green for increasing in stock. However, in China, we would use the opposite colors.