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

Code Learning:
Chapter 6 Networks
  • Repulsion: nodes pushing away from each other.  Defined using .charge()
  • Canvas Gravity: nodes pulled toward layout center to keep interplay of forces from pushing them out of sight.  Defined using .gravity()
  • Attraction: Nodes that are connected to each other are pulled toward each other.  Sometimes, this force is based on the strength of connection, so that more strongly connected nodes are closer.  Defined using .linkDistance() and .linkStrength() p 186

Reading and Learning Data Visualization Theoretically/Critically:

Edward Tufte Visual Display of Quantitative Information

Chapter 1

Three Takeaways

  • “Graphics reveal data.  Indeed graphics can be more precise and revealing than conventional statistical computations” p 13
  • Don’t underestimate the use of comparative choropleths with existing knowledge to solve issues – eg examples of cancer clusters around certain geographic industries p19
  • But of course look for flaws “regional clustering seen on the maps, as well as some of the hot spots, may reflect varying diagnostic customs and fads along with actual differences in cancer rates between areas” p 20.  Maps and other visuals can be so straightfoward people don’t question more complex underlying issues.
Advertisements

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 139 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.

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

p 175-190 Creating Information Graphics

Three Takeaways

  • “The more visible the functionality of an object, the easier it will be for users to create a mental model of what they can obtain from it.  Norman encourages designers to take advantage of ‘natural mappings’ or physical analogies to the real world.  If something is important in your graphic, highlight it in such a way that readers can sense its relevance and how it operates.  For instance, if you are designing buttons, make them mimic physical buttons.” eg buttons with arrows. p 189
  • “The shape of an object must visually suggest what it ‘affords.’…  If you want readers to press, pull, push, or spin virtual objects on a computer screen, design those objects so as to suggest that they are pressable, pullable, pushable, and spinnable.” p 189
  • “If a piece of information is indispensable to understand the whole story, it should always be visible,” that is not buried under a rollover or something you need to click on.” p 190

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

Learn JS Reading Data 
Three Takeaways:

  • When loading CSVs and other flat files, you have to do the type conversion, or else numbers will come in as strings. A simple way to do this is to use the + operator (unary plus).
  • forEach can be used to iterate over the data array.
  • Dot notation is a useful way to access the properties of these data objects. However, if your headers have spaces in them, then you will need to use bracket notation as shown below.
  • d3.csv(“/data/cities.csv”, function(d) {
    return {
    city : d.city,
    state : d.state,
    population : +d.population,
    land_area : +d[“land area”]
    };
    }, function(data) {
    console.log(data[0]);
    });

 

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 94 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:
I went to Visualization and the City: A Talk with Claudio Silva, a professor at NYU working with visualizing NYC City Data, projects such as TaxiVis
Three Takeaways from talk:
  • Biggest difficultly is not scaling with computing power, but with people and processes – eg personnel, how to connect data scientists with domain experts
  • Auto anomaly detection methods important with working with big data
  • Think about making tools and visuals that “operate with speed of brain” in terms of load time, interface, etc.

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

Intermediate D3 for Data Visualization Knight Center Course

Module 2 Stack Layout:

Three Takeaways:

  • d3.layout.stack() to create a stacked bar chart
  • stack layouts calculate baselines for each bar stack as a y0 value in array
  • How to calculate heights in stack layout
    • var rects = groups.selectAll(“rect”) // within each group, we do another data binding, select all rects and bind this data
      .data(function(d) { return d; }) // take data already bound to group, create rect for each one, and set x-width for each
      .enter()
      .append(“rect”)
      .attr(“x”, function(d, i) {
      return xScale(i);
      })
      .attr(“width”, xScale.rangeBand())
      .attr(“y”, function(d) {
      return h – yScale(d.y0) – yScale(d.y); //Flip the math!
      })
      .attr(“height”, function(d) {
      return yScale(d.y); //use y values to calculate height
      });

Interactive Data Visualization for the Finished Chapter 10 Interactivity 

Three Takeways

  • Bind event listeners to g elements if you want them to behave as a group -> useful for when you need “several visual elements to act in concert”
  • For sorts, you need to specify how two items should be compared, versus just calling .sort() for example
  • You can use HTML div element to create a tooltip with CSS

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

Going through JQuery Basics