Day 76 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 Data Points – Visualization that Means Something

p. 211-242 Annotation

Three Takeaways

  • Use annotations to make statistical trends in charts clear – esp since a lot of lay audiences won’t understand something like a scatterplot or histogram offhand p. 232
  • Do the math and call out trends and important info with annotations  combined with highlighting and color hue p. 236-237
  • If using new visual encodings, prime your audience because they may not be able to understand data offhand p. 242

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

Chapter 8: Axes Interactive Data Visualization for the Web

*Read through this earlier, but clearly had no deep understanding until now.

Three Takeaways:

  • D3’s axes are actually functions whose parameters you define. Unlike scales, when an axis function is called, it doesn’t return a value, but generates the visual elements of the axis, including lines, labels, and ticks. At a minimum, each axis also needs to be told on what scale to operate.
  • xAxis.scale(xScale);
  • svg.append("g")
        .call(xAxis);
  •  You might be wondering why this looks so different from our friendly scale functions. Here’s why: because an axis function actually draws something to the screen (by appending SVG elements to the DOM), we need to specify where in the DOM it should place those new elements. This is in contrast to scale functions like xScale(), for example, which calculate a value and return those values, typically for use by yet another function, without impacting the DOM at all.
    • So what we’re doing with the preceding code is to first reference svg, the SVG image in the DOM. Then, we append() a new g element to the end of the SVG. In SVG land, a gelement is a group element. Group elements are invisible, unlike linerect, andcircle, and they have no visual presence themselves. Yet they help us in two ways: first, g elements can be used to contain (or “group”) other elements, which keeps our code nice and tidy. Second, we can apply transformations to g elements, which affects how visual elements within that group (such as lines, rects, and circles) are rendered.
    • So we’ve created a new g, and then finally, the function call() is called on our new g. So what is call(), and who is it calling?
      D3’s call() function takes the incoming selection, as received from the prior link in the chain, and hands that selection off to any function. In this case, the selection is our newg group element. Although the g isn’t strictly necessary, we are using it because the axis function is about to generate lots of crazy lines and numbers, and it’s nice to contain all those elements within a single group object. call() hands off g to the xAxis function, so our axis is generated withing.
  • “You might notice that when we use CSS rules to style SVG elements, only SVG attribute names—not regular CSS properties—should be used. This is confusing, because many properties share the same names in both CSS and SVG, but some do not. eg. color versus fill. If you ever find yourself trying to style SVG elements, but for some reason the stupid CSS code just isn’t working, I suggest you take a deep breath, pause, and then review your property names very closely to ensure you’re using SVG names, not CSS ones. “

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 73 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:

  • Did code review and comment of previous modules on Knight’s Journalism Data Visualization and D3 course of Module Four on Scales and Axes
  • Reviewed Values, Types, and Operators and chapters (1+2) in Eloquent Javascript
  • *Not writing takeaways for review items for brevity and time

Reading and Learning Data Visualization Theoretically/Critically:

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

p. 201-210 Visual Hierarchy and Readability

Three Takeaways

  • “Highlight data with bolder colors than the other visual elements, and lighten or soften other elements so they sit in the background.  Use arrows and lines to direct eyes to the point of interest.  This creates a visual hierarchy that helps readers immediately focus on the vital parts of a data graphic and use the surroundings as context, as opposed to a flat graphic that a reader must visually rummage through” p 203
  • Example application of above is reducing grid lines so they don’t obscure other data points, using colors and shading, and styling axis p 204
  • “Area can also make data seem more tangible or relatable, because physical objects take up space.  A circle or a square uses more space than a dot on a screen or paper.  There’s less abstraction between visual cue and real world.” p 210

Day 72 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 Data Points – Visualization that Means Something

p. 189-201 Distributions

Three Takeaways

  • Distribution visuals include box plots, violin plots, histograms, density plots, heat maps, surface plots, etc. p 195
  • In box plot, the range in between the upper and lower quartiles is called the interquartile range.  The outer lines are the lower and upper fence,s defined by subtracting and adding 11/2 times the interquartile range from the lower and upper quartiles, respectively. p 196
  • Change bin sizes in histograms to you can see “variability over the range of values, but not so small that the histogram is too noisy to interpret” p. 197

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