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

Knight Journalism Course for the Americas:  Data Visualization and Infographics with D3! 

Code Learning:

Scott Murray From Bar Chart to Scatterplot

Three Takeways:

  • Started getting a thought process down on how to approach building a new visual -> eg starting at x y coordinate and moving to changing variables
  • Look in dev console for missing pieces and change code blocks bit by bit, there’s a tendency with D3 to want to make a lot of changes at once – at least on my end, but don’t forget coding fundamentals when approaching these problems
  • The console is your friend in testing out changes to scales and domains

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

Knight Journalism Course for the Americas:  Data Visualization and Infographics with D3! 

Reading and Learning Data Visualization Theoretically/Critically:

Alberto Cairo Lecture Insightful Data Viz Module 5

Takeways:

  • John Snow visual review  – > first data viz, bar chart pattern, looking at data points that refute hypothesis
  • Look for exceptions in visuals to verify methodology
  • Symbiosis between words and visuals -> annotations crucial to narratives  -> prevent from people from drawing wrong conclusions
    • Particularly needed for multi-section visuals
    • NYT and Pew do really good job by putting in text and story
    • Sequencing info “The upper layer” to giving a broad view and context to “layering down” and give multiple ways of exploring maps
  • “Splitting-a-sentence” strategy – > write headers as if they were a very long sentence that describes entire process and sequence and find natural breaks and transform each one of portions into headers of each section

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

Knight Journalism Course for the Americas:  Data Visualization and Infographics with D3! 

Alberto Cairo Lecture Part 3 Functional Visualization to End

Takeways

  • If you need to read every single number – the chart is useless
  • Pie charts are not good for comparing changes – > only really good for simple share of total
    • Slope charts the solution
  • It’s difficult to estimate differences in area graphics -> they minimize differences.  People can’t really tell a bubble is 5x as large, for example.
    • Area graphics are more good for general patterns
      •  e.g. general geographic pattern on a map
  • Encode the same dataset in multiple ways -> e.g. bubble graph + table
  • Don’t try to cram too much data into a single chart.  In many cases, a “small multiple” (some call stacked matrix) display is the best solution

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

Visualization Worked On or Created: 

Come to a realization that I’m not understanding some things – particularly formatting, as well as I thought, but I do understanding other topics, such as data munging, a lot better.

Attempt (without axes bc I can’t get them to scale correctly) at looking at Water Usage for the Fiscal 12/13 Year of Hundred Cubic Feet per LA City Zipcode

Code Learning:

Knight Journalism Course for the Americas:  Data Visualization and Infographics with D3! 

Three Takeways from Module 4 Scaling and Axes (covering topics I thought I knew well but apparently do not so just ret-typing for remembering).

  • The proper sequence of methods to use when binding data and creating new elements from data: .selectAll()data()(enter()append()
  • “Dom is current state of memory of a web page that can different from page’s source and CSS”
  • Ordinal Scales have a discrete domain, such as set of names or categories -> values must be coercible to a string, and the stringified version of the domain value uniquely identifies with the corresponding range value
    • + symbol means “take this value and use it as a number” after a return statement

Day 50 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 Best American Infographics 2014 “The Material World” Section p. 137

Three Takeways:

  • Colored maps plotting data points eg race rather than typical geographic barriers and maps in general under a data viz renaissance p 138
  • Map stack as a tool p 135
  • Using colors in bar charts to represent flow of a narrative p 140

Day 49 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 Best American Infographics 2014 “The Material World” Section p. 99-137

Three Takeways:

  • Using a mix of maps and drawn images as a mixed method seems to one of the most effective at creating compelling visuals in the compilation p 106
  • Using line thickenness combined with symbols to add dimension to anotherwise flat linear image (describing tornado strength) p108
  • Somber two tone color visuals are most effective at contrast and understanding (drone attacks info graphic) p. 136

Day 48 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 Best American Infographics 2014 “Us” & “The Material World” Section p. 84-98

Three Takeways:

  • Combining a cultural symbol (in this case a poppy) and using it as a line element in a graph to show war deaths creates emphasis p. 87
  • Using a sunburst and shapes in the sunburst to talk about branching categories (in this case cheese) p. 91
  • Heat maps in shapes – keyboards with color hue encodings to describe music p. 97

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

Decomposition of a Visualization:

Power sources in each state

  • What are the:
    • Variables (Data points, where they are, and how they’re represented):
      • Years on x-axis and change from 2004 to 2014 on y-axis with line and angle
      • Color hue for different types of power sources
    • Data Types (Quantitative, Qualitative, Categorical, Continuous, etc.)
      • Quantitative, continuous
    • Encodings (Shape, Color, Position, etc.):
      • Angle, color hue, position
  • What works well here?
    • Good scaling and matrixed graphs with very clearly encoded differences
  • What does not work well and what would I improve?
    • Would like some context of what happened
  • What is the data source?  Do I see any problems with how it’s cited/used?
    • US Energy Information Administration
  • Any other comments about what I learned?
    • Great use of clarity and attractiveness for showing BI

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

*need to start doing this first thing in the morning on weekends to get it out the way and keep up

Code Learning:

Manipulating data like a boss with d3

Three Takeways:

  • “One flat array of data is fine if we have just one series of data. But what if we have several series? Indeed, most visualizations have a structure and a hierarchy.
    So let’s proceed with our data but now let’s assume that we want to show values for different continents as different little scatterplots (“small multiples”).
    Intuitively:

    • we’ll want to add 5 “g” groups to our svg container, one for each continent,
    • and then add one dots per country in each continent to those groups.
    • The d3 answer to this problem is the d3.nest() set of methods.
      d3.nest() turns a flat array of objects, which thanks to d3.csv() is a very easily available format, in an array of arrays with the hierarchy you need.
  • This is exactly what d3.nest() does. d3.nest(), go!
  • 1
    2
    3
    4
    vardata=d3.nest()
      .key(function(d) {returnd.continent;})
      .sortKeys(d3.ascending)
      .entries(csv);

    With the .key() method, we are indicating what we will be using to create the hierarchy. We want to group those data by continent, so we use this syntax.
    .sortKeys is used to sort the keys in alphabetical order, so our panels appear in the alphabetical order of the continents. If we omit that, the panels will show up in the order of the data (ie Oceania first as Australia is the first country). We could have avoided that by sorting the data by continent first before nesting it, but it’s easier like this.”

Reading and Learning Data Visualization Theoretically/Critically:

The Best American Infographics 2014 “Us” Section p. 64-83

Three Takeways:

  • Providing a story/narrative behind every data point and annotation goes a long way p. 66
  • Using lollipop charges and colors to show time p. 70
  • Generally – getting too clever creates confusion -> constraints are what spurs creativity in this area

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

I’ve definitely reached an inflection point where I’ve started to realize not only the extent of what I don’t really understanding in terms of coding – but also exactly where and better at how to address the gaps.  In the beginning when I was a Hackbright – I went from the classic stage from clueless to following and understanding to being stuck and not knowing where to go.  I hope I am soon on an upswing of awesome in terms of Javascript and D3 (as job depends on it).  This article on Why Learning to Code is So Damn Hard is a good re-read for me and for anyone else on this journey of technical learning.

Code Learning:

D3 Sunburst Diagram Tutorial

Three Takeaways:

  • The sunburst diagram is meant to represent hierarchical data, and it expects to receive and operate on an object that has parent and children nodes”
  • g.append("path")
        .attr("d", arc)
        .style("fill", function(d) { return color((d.children ? d : d.parent).name); })
        .on("click", click);
    This part of our D3 drawSunburst function grabs a variable called g, appends an SVG path to it, gives that path an “d” attribute set equal to thearc function and then colors in the shape drawn by path with some further instructions.
  • var partition = d3.layout.partition(nychaData)
          .value(function(d) { return d.count; });

    The partition layout is part of D3’s family of hierarchical layouts. These layouts follow the same basic structure: the input argument to the layout is the root node of the hierarchy, and the output return value is an array representing the computed positions of all nodes.

Reading and Learning Data Visualization Theoretically/Critically:

Knight Journalism Course for the Americas:  Data Visualization and Infographics with D3! 

Alberto Cairo Week Three Lecture: Functional Viz Part 1-2

Three Takeaways:

  •  What graphic forms are more appropriate to represent your data?
    • 1. Think about the audience and the publication (industry, cultural background, etc.)
    • 2. Think of the questions your graphic should help readers answer
    • 3. Can you understand it without reading every single figure?
  • Don’t get stuck on a singular graphic form for a particular task or message
  • Certain graphic forms allow for better judgements: eg. bar charts, lollipop charts, dot chart, scatter chart, line chart, slope charts