Day 150 of 180 Days of Data Viz Learning

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:

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

p 311-318 Truth and Beauty Operator

Three Takeaways

  • “I put truth and beauty at the same level.  If you have only one without the other in a visualization project, you are not done yet” p 315
  • “For me, design is much more than mere decoration.  Scientists and engineering-focused people, the kind of professionals I usually work with, think of design as decorating a pre-existing structure.  That is the wrong approach.  Good design is tightly intertwined with the context it presents.  It consists of thinking about what to show; what to leave out; what to highlight; how to structure information; what rhythm, visual flow, and pace, you want your story to have.  That’s design.  Would say that structure dictates pretty much what comes out visually” p 317
  • Moritz Stefaners project workflow: Clarify What and Why (high level constaints, goals and intuitions) -> Explore and Sketch (Data analysis with Excel, Tableau, R, prototypes, visual explorations -> Define and Produce (Visual design, interaction design, implementation, testing)-> Maintain and Analyze (user tracking and analysis, updates, extensions)
Advertisements

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

 Eljiah Meeks D3.js in Action

Three Takeaways from chapters
Chapter 1 Intro (Continued)
  • <path>” a path is an area determined by its d attribute.  Paths can be open or closed, meaning the last point connects to the first if closed and doesn’t if open.  The open or closed nature of a path is determined by the absence or presence of the letter Z at the end of the text string in the d attribute. p 25
  • “By using .classed(), you don’t overwrite the existing attribute, but rather append or remove the named class from the list.  You can see the results of two classes with conflicting styles defined.  The active style overwrites the tentative style because it occurs later in the style sheet.  Another rule to remember is that more specific rules overwrite more general rules.” p29
  • “One thing to keep min mind while reading about data visualization is that the literature is often focused on static charts.  With D3 you’ll be making interactive and dynamic visualizations and not just static ones” p40
Chapter 6 Network Data (continued)
  • Self loops occur when a node is connected to itself p 181
  • How to make a gridover function to highlight all rectangles that have the same x or y value:

d3.selectAll(“rect.grid”).o(“mouseover”, gridOver);

function gridOver(d, i) {

     d3.selectAll(“rect”).style(“stroke-width”, function(p) {
return p.x == d.x || p.y == d.y ? “3px”:  “1px” });
  • How to create a hash that associates each node JSON object with its ID value
function createArcDiagram(nodes, edge) {
     var nodeHash = {}
     for (x in nodes) {
          nodeHash[nodes[x].id] = nodes[x] // creates a hash that associates each node JSON object with its ID value
          nodes[x].x = parseInt(x) * 40; // sets each node with an x position based on its array position
     };
     for (x in edges) {
          edges[x].weight = parseInt(edges[x].weight); // replaces the string ID of the node with a pointer to the JSON object
          edges[x].source = nodehash[edges[x].source;
          edges[x].target = nodeHash[edges[x].target];

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

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

p 304-311 Quantitative Humanism

Three Takeaways

  • “Danger of putting together a user who doesn’t know what to ask of the data, and a presentation that responds to the wrong questions” p 309
  • “The form in which we filter the data is more important than the actual data” p 310
  • “When those three kinds of people, the statistician, the engineer, and the designer, work together, you get better results… You may need a translator in a situation like that” tho. p 312

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

 Eljiah Meeks D3.js in Action

Three Takeaways from chapters
Chapter 1 Intro (Continued)
  • SVG provides a set of common shapes that have attributes that determine size and position p 21
    • <rect> x and y (position from shape’s top-left corner and height and width
    • <circle> cx and cy for center and r for radius
    • <line> has x1 and y1 for the start of the line and x2 and y2 for endpoint
    • There are also more complex shapes like <ellipse> and <polygon>- with a points attribute that holds a set of comma-separate xy coordinates in clockwise order that determines area bounded by polygon
  • <g> element is a logical grouping of elements -> used when creating graphic objects that are made of several shapes and text -> eg circle with label above it and being able to move circle and label at same time  p 23
  • “Moving a <g> element around your canvas requires you adjust the transform attribute of the <g> element” -> this includes using the translate() that accepts a pair of coordinates for (x,y) position p23
Chapter 6 Network Data (continued)
  • In the case of directed networks, the source and target columns indicate the direction of connection between the nodes.  A directed network means that nodes be connected in one direction by not other” p 117, eg following a Twitter user who does not follow you
  • Options to show network data include adjacency matrix, arc diagram, and force directed layouts p 185
  • d3.scale.ordinal() takes an array of distinct values and allows us to place them on an axis like we do with names for our nodes
    • rangePoints creates a set of bins for each of or values for display on axis or otherwise.  It does this b associating each of those unique values with a numerical position within the range given.  Each point can also have an offset declared in the second, optional variable” p 181
    • var nameScale = d3.scale.ordinal().domain(nodes.map(function (el) { return el.id})).rangePoints([0, scaleSize], 1);
 Jan 1/25 D3.js NY Meet-up

Matt Strom – Using Sparkline graphics at typographic resolution eg emoji->Twitter analytics
  • FF Chartwell Font that renders glyph charts
  • Integrating sparklines into text can bring numbers to context and visual
  • C3 for styling
Paul Levande
  • Text next graph as caption/legend
  • The classic incarnation rate chart doesn’t lend to questions of prison rates, more people being incarnated, or same ppl, etc
  • A simple trend line doesn’t show that population as one that is in flux – it’s a revolving door not a constant rate of ppl -> remember charts can be victims of their own success because they can oversimplify a complex story

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

*Accomplishment at work today, created Scatterplot matrix, Time Series, Area Chart.

Reading and Learning Data Visualization Theoretically/Critically:

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

p 283-304 Germanic Precision + Visualization in Academia

Three Takeaways

  • “One of the key skills an infographics designer should develop is an eye for identifying when a story can be better told through visuals” p 287
  • Think of new ways to combine timelines with different panels p 296
  • Use cartography in comparative timeline

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

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

 

  • Back on this after some mental break

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

p 244-271 All the Infographics Fit to Print and Capital Infographics

Three Takeaways

  • Art, graphics, and information should really be flowing with each other and not seen as discrete p 254
  • “It’s a curiosity that leads to the pursuit of different methods of creating visual forms” p 262
  • Don’t underestimate the power of sketching out your visuals and of annotations and captions p 271