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

Combining Data

Three Takeaways:

  • You can use native array functions to perform left outer joins.
    • eg. articles.forEach(function(article) {
      var result = brands.filter(function(brand) {
      return brand.id === article.brand_id;
      });
      delete article.brand_id
      article_brand = (result[0] !== undefined) ? result[0].name : null;
      });
  • Joining more than one attribute example
    • innerArray.filter(function(innerArrayItem) {
      return innerArrayItem.idA === outerArrayItem.idA &&
      innerArrayItem.idB === outerArrayItem.idB;
      });
  • Generic Efficent Approach
    function join(lookupTable, mainTable, lookupKey, mainKey, select) {
    var l = lookupTable.length,
    m = mainTable.length,
    lookupIndex = [],
    output = [];
    for (var i = 0; i < l; i++) { // look through l items
    var row = lookupTable[i];
    lookupIndex[row[lookupKey]] = row;
    }
    for (var j = 0; j < m; j++) { look through m items
    var y = mainTable[j];
    var x = lookupIndex[y[mainKey]]; // get corresponding row from lookupTable
    output.push(select(y, x)); // select only columns you need
    }
    return output;
    }

    • eg. var result = join(brands, articles, “id”, “brand_id”, function(article, brand) {
      return {
      id: article.id,
      name: article.name,
      weight: article.weight,
      price: article.price,
      brand: (brand !== undefined) ? brand.name: null
      };
      });
Advertisements

Day 99 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:
  • Treehouse Back-to-Basics (again, not taking notes for basic review):
  • Knight D3 Intermediate D3 for Data Journalism
    • Module 1 Discussion and Exercise
Reading and Learning Data Visualization Theoretically/Critically:

Reading Nathan Yau’s book Visualize This

 

220-238 Visualizing Relationships and Spotting Differences

Three Takeaways:

  • General process of creating histograms: load data, filter outliers, set breaks, set layout. p 221
  • Showing small multiples with histograms, eg flipped 90 degrees side by side can be an interesting visual (Rotten Trilogy Finales as example)p 223
  • “Chernoff Faces displays multiple variables at once by positioning parts of the human face, such as ears, hair ,e yes, and nose , based on numbers in  a dataset.  The assumption is that you can read people’s faces easily in real life so you should recognize small differences when they represent data.  That’s a big assumption, but roll with it … useful time to time.”
    p 238

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

Treehouse Back-to-Basics (again, not taking notes for basic review):

Going through Front-End WebDev

Reading and Learning Data Visualization Theoretically/Critically:

Reading Nathan Yau’s book Visualize This

179-188 Visualizing Relationships

Three Takeaways:

  • Remember, correlation is not causation, but correlation should spur “deeper more exploratory analysis” p. 180
  • Remember, correlation is on a scatter plot goes up diagonal right versus negative, diagonal left.  Points that not follow pattern = no correlation p 182
  • Increasing effectiveness of scatterplots with making the dots pop on a background, reduce borders, and a visible curve. p 187

Day 85 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.

Reading and Learning Data Visualization Theoretically/Critically:

Reading Nathan Yau’s book Visualize This

80-90 Tools to Visualize Data Chapter

Three Takeaways:

  • Maps that are zoomable and able to be moved and panned easily are known as slippy maps – split into smaller images, or tiles.  Example of this is Google maps  p. 80
  • Mapping resources for data viz include: Google and Microsoft maps, ArcGIS, Modest Maps, Polymaps, GeoCommons, IndieMapper, Spatial Key R p. 86
  • Combining different software or solutions is a key to creating better data viz – as each has its own strengths and thresholds p 89

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

  • Functions in Eloquent Javascript
    • Three Takeaways (trying to drill key terms down)
      • “Being able to reference a specific instance of local variables in an enclosing function—is called closure.”
      • “A good mental model is to think of the function keyword as “freezing” the code in its body and wrapping it into a package (the function value). So when you read return function(...) {...}, think of it as returning a handle to a piece of computation, frozen for later use.”
      • “It is perfectly okay for a function to call itself, as long as it takes care not to overflow the stack. A function that calls itself is called recursive.”

Reading and Learning Data Visualization Theoretically/Critically:

Reading Nathan Yau’s book Data Points – Visualization that Means Something

p. 211-229 Readability and Highlighting

Three Takeaways

  • “Clutter is the enemy of readability”  Use negative space to separate visual elements as necessary. p 217
  • Use highlighting to guide readers to important points in graphic, eg pointing out Joey Chestnut and Takeru Kobayashi in hotdog eating contest bars p. 223
  • “Where your highlighting fits in the hierarchy, be sure the new visual cues don’t conflict with existing ones.  If you have a bar chart that uses length as a visual cue, you obviously do not highlight with length, too.  Have a scatter plot?  Don’t highlight with position.  Heat map?  Highlight with the color palette rather than introduce hues that change visual patterns.” p 227

Day 71 of 180 Days of Data Viz #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.

Went on vacation and took a needed break.  Several months ago, I got a job in NYC in this area and started this cycle of learning.  Moved to NYC and started new job.  It’s been quite a trip, so I took some needed R&R and feel refreshed and ready to work it.

Again, priorities are a bit back to basics on Front-End Web Dev vis a vis D3.  I’ve been going all in on D3 only to realize that I need these other skills that I’ve never really developed to make it all work.

Code Learning:

Understanding the Force

Three Takeaways:

  • “What the Force layout is really good at: offering insights on the relationships between connections. It helps us answer questions like: which of my friends know each other, and how do they know each other? How do the successful in Hollywood work with each other, and how often do they work together? How are Youtube stars interconnected?”
  • Force-directed graph drawing is a class of graph layout algorithms that calculate the positions of each node by simulating an attractive force between each pair of linked nodes, as well as a repulsive force between the nodes.”
  • “D3 implements the force-directed algorithm a little differently to give the user more control over the layout (from my understanding). It implements three primary forces upon the nodes at each tick:

    • The sum of the forces acting on each node by all other nodes
    • The force pushing and pulling between two linked nodes
    • The force pulling each node to a focal point, usually the center of the user-defined space”

Treehouse

Reading and Learning Data Visualization Theoretically/Critically:

Reading Nathan Yau’s book Data Points – Visualization that Means Something

p. 177-189 Multiple Variables

Three Takeaways

  • Remember about correlation – really big these days on back to basics and full understanding: “As one variable increases, the other one usually does too… Visualization-wise, a correlative and casual relationship between two variables will look similar, if not the same, but the latter usually requires rigorous statistical analysis and context from subject experts.” p. 177-178
  • You can double up on encodings, eg use both size and color, to create “redundant visual cues” for those data points that might be challenging to see with just one view.  Very helpful for scatter plots. p 180
  • Positive correlation: lines run parallel.   Negative correlation: lines cross consistently.  Weak correlation: lines have no clear direction. p 185

Day 70 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.

Learning at JFK!  Air France Lounge!  Where luxury goes to die!

Decomposition of a Visualization:

Bernie Sanders’s vast universe of donors, mapped

  • What are the:
    • Variables (Data points, where they are, and how they’re represented):
      • Donations by size of circle, map geo by zip, size on pie chart
    • Data Types (Quantitative, Qualitative, Categorical, Continuous, etc.):
      • Quantitative
    • Encodings (Shape, Color, Position, etc.):
      • Color hue, position, size
  • What works well here?
    • Animation and showing difference
  • What does not work well and what would I improve?
    • Last pie chart should have been colored with same color hue used for map chart about Bernie Sanders for continuity of narrative.
  • What is the data source?  Do I see any problems with how it’s cited/used?
    • FEC Reports
  • Any other comments about what I learned?
    • Wildly good example of animation and pie charts, frequently abused visualization elements