Esc the City Un-Conference Talk: Simple Slide Design and Data Viz Crash Course

I’m currently attending a program called Escape the City which “helps mainstream professionals make proactive & entrepreneurial career changes.”  We’re part of the “Founding Members” cohort as the first iteration of this program stateside.

I’m not looking to leave my current job, which I’m pretty happy with. I definitely did want to meet other ambitious people and unconventional thinkers.  A mentor who had done the program in London, where Escape started, said I’d benefit.  I have been loving it so far.  I’ve found it beneficial to being more present, proactive, and creative at work and outside of it.

One of part of the program we did last night was the Un-Conference, where individuals in the program presented on different topics: everything from Learnings from Training for Endurance Races, Self-Acceptance and How to Love Yourself, Web Development 101, Relaxation with Origami, to name just a few.

As part of building on my knowledge and sharing it, I did a talk on Simple Design with a Data Visualization Crash Course below.  I hope my fellow participants found it useful, especially since many of them are thinking about starting and pitching their own businesses.

Advertisements

Day 177 of 180 Days of Data Viz Learning #jfdi #dataviz

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Reading and Learning Data Visualization Theoretically/Critically:

Show Me the Numbers by Stephen Few

Three Takeaways Today

Chapter 5 Visual Perception and Graphical Communication
  • “Built into visual perception is the assumption that the light is coming from above.”  Our real-life perception of everyday objects influence how we interpret graphics, in this case how shapes are “lit” p 62
  • There is iconic memory that relates to pre attentive processing in visuals, the fast recognition of color hues in text.  It is important to think of iconic memory when quickly making groups distinctive and highlighting objects p 66
  • Working memory is temporary and has limited storage capacity, only three or four chunks can be stored at one time.  Think of how you structure tables and graphs – if you have ten different symbols, the reader won’t be able to process it p 67

Day 172 of 180 Days of Data Viz Learning #jfdi #dataviz

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Reading and Learning Data Visualization Theoretically/Critically:

Three Takeaways Today
  • “Designers speak of objects as having affordances- characteristics that reveal how they’re supposed to be used and make them easy to use in those ways.  A teapot has a handle.  A door that you need to push has a push-plate.  The design of an object should, in and of itself suggest how the object should be used.” p 5
  • Don’t forget about reference lines p 6
  • Tables and graphs in quant biz data have four uses: analyzing, communicating, monitoring, planning, be cognizant of what you’re working on and  the goal p 10

Day 172 of 180 Days of Data Viz Learning #jfdi #dataviz

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Three Takeways Today

Chapter 4 General Charting Principles 
  • Axis is a function that is a d3 component that lets you draw all graphical elements needed for an exists.  eg.  d3.svg.line() lets you draw a straight or curved line across many points. p 108
  • D3 functionality can be put in three broad categories p 109:
    • Generators take in datapoint array values.  They produce “SVG drawing code for the d attribute of <path> elements.  Generators include area(), line(), diagonal(), arc()
    • Components take in Functions such as scale(), axis(), brush(), zoom().  They productive “elements and event listeners ‘<g><line class=“tick”/><text class=“label” /></g>”
    • Layouts take in whole datasets.  These include stack(), pie(), chord().
  • After creating an axis function, we define how we want the axis to look like.  We use the .call() method from a selection on <go> element on where we want the graphical elements drawn.
    • var yAxis = d3.axis().scale(ySale).orient(“right”);
    • d3.select(“svg”).append(“g”.attr(“id”, “yAxisG”).call(yAxis);
    • var aAxis = d3.svg.axis().scale(xScale).orient(“bottom”);
    • d3.select(“svg”).append(“g”).attr(“id”, “xAxisG”).call(xAxis);
    • The .call() method of a selection invokes a function with the selection thats active in the method chain.  Same as: xAxis(d3.select(“svg”).append(“g”).attr(“id”, xAxisG”));

Day 160 of 180 Days of Data Viz Learning #jfdi #doneisbetterthanperfect #dataviz

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter One Graphical Excellence
  • Pair small multiples with other information, e.g. a map to give more context – example of a map of socal and 3d view of pollutants p 42
  • “Indeed, in modern scientific literature, about 40 percent of published graphics have a relational form, with two or more variables (none of which are latitude, longitude, or time.  This is no accident, since the relational graphic- in its barest form, the scatterplot and its variants- is the greats of all graphical designs.  It links at least two variables, encouraging and even imploring the viewer to assess the possible causal relationship between the plotted variables” p 47
  • “Graphical excellence is that which gives to the viewer the greatest number of ideas in the shortest time with the least ink in the smallest space.  Graphical excellence is always multivariate.  And graphic excellence requires telling the truth about the data” p 51 (example of Minard’s graphic of the fate of Napoleon’s Army)

Day 154 of 180 Days of Data Viz Learning #jfdi #doneisbetterthanperfect

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Code Learning:
Chapter 6 Networks
  • Repulsion: nodes pushing away from each other.  Defined using .charge()
  • Canvas Gravity: nodes pulled toward layout center to keep interplay of forces from pushing them out of sight.  Defined using .gravity()
  • Attraction: Nodes that are connected to each other are pulled toward each other.  Sometimes, this force is based on the strength of connection, so that more strongly connected nodes are closer.  Defined using .linkDistance() and .linkStrength() p 186

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter 1

Three Takeaways

  • “Graphics reveal data.  Indeed graphics can be more precise and revealing than conventional statistical computations” p 13
  • Don’t underestimate the use of comparative choropleths with existing knowledge to solve issues – eg examples of cancer clusters around certain geographic industries p19
  • But of course look for flaws “regional clustering seen on the maps, as well as some of the hot spots, may reflect varying diagnostic customs and fads along with actual differences in cancer rates between areas” p 20.  Maps and other visuals can be so straightfoward people don’t question more complex underlying issues.

Day 145 of 180 Days of Data Viz Learning #jfdi

I’m doing some form of data visualization learning for 180 days because I need to #JFDI.

See post explaining how and why I’m doing this.

Code Learning: 

Three Takeways

 Eljiah Meeks D3.js in Action

Chapter 1 Intro

  • “Every element on page can be treated with high-level abstractions” p 12
  • D3 utilizes UTF-8 character in its code, so do this to make avoid errors
    • <!DOCTYPE html><meta charset=”utf-8”>
  • Remember: “Three categories of information about each element determine its behavior and appearance: styles, attributes, and properties”
    • Styles can determine transparency, color, size, borders and so on.
    • Attributes typically refer to classes, IDs, and interactive behavior, though some attributions can also determine appearance, dpeneding on which type of element you’re dealing with.
    • Properties typically refer to states, such as the “checked” property of a check box, which is true if the box is checked and false if the box is unchecked” p 14

Chapter 6 Network Visualizations

  • Nodes/Vertices are things being connected.  Link/edges are connections between them.  Importance of node in a network is centrality.  P 176
  • Networks present possibility of many to many connections whereas hierarchal data node can have many children but only one parent p 176
  • In putting together the data model for network data, the most straightforward is an edge list where you really only need source and target columns, but can add other attributes such as weight p 177

Reading and Learning Data Visualization Theoretically/Critically:

The Functional Art: An Introduction to Information Graphics and Visualization by Alberto Cairo

p 271-283 Capitol Infographics

Three Takeaways

  • Think of several ways to show number, including having a table, pictures, and even part to whole charts eg Wapo job search infographics p276
  • Don’t forget how to think about designing across platforms p 278
  • Detailed sketches and wireframes as essential part of process p 283