Day 3 of 180 Days of Data Viz Learning

I’m learning data visualization for 180 days straight because I need to #JFDI.  See post explaining how and why I’m doing this.

One thing I’m working on/struggling with is how to block work I want to do so I have enough time and energy to focus deeply each day.  Yesterday was a reading heavy day while today was a code heavy day.  I didn’t spend as much time as I wanted or should on actually creating and working on data viz I’ve done.  I’ll adjust this accordingly.  It’s likely I’ll continue to stack D3.js learning work early in the day and as the number one priority, then creation, then reading.  There will be a point where both the D3.js and reading learning tasks are scaled back a bit so I can create more.  I suspect this will be the natural flow of this process.

Visualization Worked On or Created: 

I’m currently putting my USWNT visualizations from Day 2 into some sort of contextualized and narrative form on a page.  My goal is to finish this tomorrow.  This is also giving me a chance to work on front-end, something I really didn’t pay that much attention to in my time at Hackbright Academy, which is going to become part of my job.

Quickly discovering those nitty gritty steps that need to be done in Data Visualization like in everything else, like endlessly formatting Power Point slides.  Finding the equivalents right now in needing to resize images, figuring out how to best present information in a constructed narrative, and using Bootstrap to do general stylizing  I’m really tempted to use Github pages, but I think I also need to take this opportunity to learn more and also learn how to do the git handling to my own hosted website.  To come tomorrow!  For proof of minimal work and motivation to myself to get more done, a screenshot of what the site looks like now ::CRINGE::


Decomposition of a Visualization:

Visualizing the change in working from home (telecommuting) in the United States

  • What are the:
    • Variables (Data points, where they are, and how they’re represented): 2014 Median Age (represented by Color Saturation on State), 2010 less 2000 % Change in Telecommuting for Marked Cities (location on map, Duel-Ordered Color Palette/Color Hue), City Size (Shape)
    • Data Types (Quantitative, Qualitative, Categorical, Continuous, etc.): 2010 less 2000 % changes (Quantitative), Median Age (Categorical), City Population Size (Quantitative)
    • Encodings (Shape, Color, Position): Color Saturation, Color Hue, Shape
  • What works well here? Ranges expressed clearly.  Easily to navigate.  Good use of choosing different contrasting Color Hues.
  • What does not work well and what would I improve? What is expressed by circle size, appears to be city size, is unclear.  I’m not sure what purpose it serves.  Similar situation with Age, it’s nice to have a median look at the state population, but how does that relate to the city and to the data that’s attempting to be expressed in this visualization in general.
  • What is the data source?  Do I see any problems with how it’s cited/used? Uses Census data on people who telecommute, is that a good proxy for “working from home”?  Seems like it could be disputable.  Overlapping circles, such as in Bay Area, make it hard to see what data points are available to look through zoomed out.
  • Any other comments about what I learned? More variables than necessary it seems.  Not sure what the connections are trying to be expressed here.

Code Learning:

Udacity 1b D3 Building Blocks – section in progress

Three Takeaways:

  • You can change any attribute defined on any HTML tag using the .attr or attribute method defined on a selection or D3 object (any attribute: eg. alt text, class, ID).
  • The important difference between select and selectAll: select preserves the existing grouping, whereas selectAll creates a new grouping.
    • Calling select thus preserves the data, index, and even parent node of the original selection.
    • The only way to obtain a nested selection, then, is to call selectAll on an existing selection; this is why a data-join typically follows a selectAll rather than select.
  • D3 scales – to use scales in D3, you specify the range of your possible input values, a function that transforms these to output values and the appropriate limits on your output range.

D3.js Treehouse Databinding

Three Takeways:

  • You can create elements in the DOM based on data.  The inverse is true, you have access to data bound to that element.
  • .data method is used to evaluate R data and returns what is called the update selection -> joining the specified data parameter to the selection, where every element in the data array is joined to an element in the DOM.
  • The selection.enter() method returns a placeholder selection of elements for each data element that is not yet in the DOM.

*Definitely feeling much more clarity this weekend on how the D3.js library works and Javascript as well.  It took a lot of trial and error to figure out which learning tools and style were the best for me, but concurrently viewing the Udacity Data Visualization and D3.js class, which has both Data Viz Theory and a deep dive into D3.js and the Javascript Console in conjunction with reading about Data Viz in both business theoretical materials plus the Treehouse D3.js tutorial which is more straight to the point code lessons has been efficient and transformational in how quickly I’ve refined knowledge.  I’m really in a different place than I was last week for sure.

Reading and Learning Data Visualization Theoretically/Critically:

The Structure of the Information Visualization Design Space. Stuart K. Card and Jock Mackinlay (PDF) from 7 Classic Foundational Vis Papers

Three Takeaways:

  1. Graphics refers to means for communicating information and graphical processing (person uses manipulation and perception of graphical objects to understand info).
  2. Scientific visualizations are usually spatial
  3. Trees are basically exponentially expanding graphs

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s