Day 137 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: 

Udacity Data Visualization and D3.js – Narrative Structures Lectures

Three Takeaways:

  • Remember:
    • d3.select(“svg”) – selects a container SVG element on the page
    • .selectAll(“circle”) – creates an empty selection to the bind the data
    • .data(data) – selects all bound elements not displayed
    • .enter() – binds data to the empty selection
    • .append(“circle”) – creates SVG elements for the bound data 
  • The enter selection is populated with all the data that you want to bind to the page when first running code.  If you ran the same code again, the enter selection would be empty since the data hasn’t changed.  That is, you aren’t binding any new data elements to the page.
  • .exit() represents HTML/SVG elements currently on the page which ARE NOT bound to rows of data file

Reading and Learning Data Visualization Theoretically/Critically:

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

p 147-166 Creating Information Graphics

Three Takeaways

  • Steps: p 154
    • Define focus, what story, key points, how it will be useful and your goal
    • Gather info
    • Choose graphic form
    • Sketch and storyboard /w research
    • Think about visual style: typefaces, color, branding
    • Integrate
  • “You need to build a strong backbone for your information, a reading path, an order, and a hierarchy, before you lock yourself into a style for your display.  The structure is the skeleton and muscles of your graphic; the visual style is the skin.  With no bones to support it, the skin of your project will collapse.” p 155
  • Remember the power of highlighting certain lines in a time series and graying out the others to still show comparison p 166
Advertisements

Leave a Reply

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

WordPress.com Logo

You are commenting using your WordPress.com 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 )

Google+ photo

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

Connecting to %s