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

Code Learning:

Udacity Data Visualization and D3.js – DimpleJS Lectures

Three Takeaways

  • You can interact with DimpeJs with CSS, D3, and Javascript:
    • Inspect elements using developer console to find classes or ids to change styling for example for CSS
    • Put in  d3 directly: d3.select(“body”).append(“h2”).text(“World Cup Attendance”);
  • When choosing a chart type, consider the overall message you are trying to convey, the data types of the variables, and the relationships you want readers to explore
  • Think about the subconscious process in which people perceive objects  without any conscious effort (preattentive processing) in contrast to “attentive” processing or conscious processing when thinking about encoding visuals or especially when calling out important points
Advertisements

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

*Back on the wagon after some well needed X-mas R&R.  Will be off it for NY weekend probably.  I can forgive myself for needed rest and complete mind wipe.

Visual Created:

Dimple JS Scatterplot using NYCFC Data

Screen Shot 2015-12-27 at 9.05.22 PM.png

Code Learning:

Treehouse Back to Basics – Front-End Dev

Udacity Data Visualization and D3.js – DimpleJS Lectures

Three Takeaways

  • Don’t forget to use auto-fill in console, eg typing myChart.add to see other methods.  This can be more expedient than looking through documentation.
  • Faceting data versus not and changing type of chart:
    • myChart.addSeries(null, dimple.plot.bar); // not faceting or grouping data, eg just showing all data
    • myChart.addSeries(‘stage’, dimple.plot.bar); // groups data, eg showing stages versus all games in this example data of soccer games
    • myChart.addSeries(null, dimple.plot.scatter) // makes a scatterchart instead of a bar chart
    • myChart.addSeries(null, dimple.plot.line);  // makes a line chart
    • You can combine series by including two series, eg both lines above to have points on the time series
  • Way to parse date in Dimplejs or other ways to easily manipulate properties
    • x.dateParseFormat = “%Y”;
    • x.timeInterval = 4;
    • x.ticketFormat = “%Y”;

Day 128 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 for these last precious few days before taking off for Christmas – where I’ll finish the Udacity course

Code Learning:

Learn JS Data Regular Expressions

  • Replacing with Regular Expressions
    • Example of replacing “wood” with the word “nun.”
      • var str = “how much wood would a woodchuck chuck if a woodchuck could chuck wood”;
      • var regex = /wood/g;
      • var newstr = str.replace(regex), “nun”
    • console.log(newstr);
      • => “How much nun would a nunchuck chuck if a nunchuck could chuck nun”
  • Finding Numbers
    • Extracting money from groceries as an example.  You’d need to define a regular expression that defines a patterns, for example in the below
    • Dollar sign as (\$) to indicate beginning of a price
    • Set of repeating characters than can be 0-9 or period(.) We denote these care appear repeatedly (+).
    • Word break to indicate end of the price string (\b)
    • var message = “I bought a loaf of bread for $3.99, some milk for $2.49 and” + “a box of chocolate cookies for $6.95”;
    • regex = /\$([0-9\.]+)\b/g;
    • matches = message.match(regex)console.log(matches);
    • =>  [“$3.99”, “$2.49”, “$6.95”]
  • Since we can’t add with $ signs, reduce!
    • matches.reduce(function(sum, value) {
    • return sum + Number(value.slice(1));
    • }, 0);
    • =>13.43
  • Using special characters
    • \d – any number character, equivalent to [0-9]
    • \D – any nonnumber character, equivalent to [^0-9]
    • \s – any single space character.  This includes a single space, tab, line feed or form feed.

 

 

Day 127 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 for these last precious few days before taking off for Christmas – where I’ll finish the Udacity course

Reading and Learning Data Visualization Theoretically/Critically:

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

p 76-85 The Beauty Paradox: Art and Communication-> The Complexity Challenge: Presentation and Exploration

Three Takeaways

  • In many cases now “the designer is no longer just a designer.  He has begun to think and act as a software engineer.” p 76
  • “Graphics should not simplify messages.  They should clarify them, highlight trends, uncover patterns, and reveal realities not visible before.” p79
  • “The less common the graphic form I choose for my visualization, the more redundancy I should include.” p85

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

*Doing a bit of catch-up here after a few breaks.

Reading and Learning Data Visualization Theoretically/Critically:

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

p 65-76 The Beauty Paradox: Art and Communication-> The Complexity Challenge: Presentation and Exploration

Three Takeaways

  • “Tufte’s influence in the visualization and information graphics communities has led many publications to adopt a style that is serious, cold, and stripped bare of aesthetic attributes that maybe gratuitous to the statistician but useful for readers” p 68
  • “The first step to finding the middle ground between radical minimalism and a more playful approach to information graphics and visualization is to remember that a good graphic realizes two basic goals: It presents information, and it allows users to explore that information.” p 73
  • “No matter what style you choose- whether you decide to follow Tufte and become a hardcore minimalist or adopt a friendlier approach- always take advantage of the space you have available to seek depth within reasonable limits.  After that, and only after that, worry about how to make the presentation prettier.” p 76

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

*Doing a bit of catch-up here after a few breaks.

*Also quick note of reflection here, the more I’ve practice doing data viz in the wild for clients and the more I read, the more my opinions have changed about topics like chart junk and dumbing down visuals for audiences.  Yes, sometimes I think I just am making pitch candy to provide flash for clients.  However, in real life, aesthetics matter and hoping for immediate understanding for your audience maybe unrealistic.  That’s why there are consulting and account management layers in business.  I use to be a part of that machine which is why I was hired to do this type of work now because I understand the business end more intimately more than a graphic artist or a data scientist might.

Reading and Learning Data Visualization Theoretically/Critically:

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

p 61-65 The Beauty Paradox: Art and Communication

Three Takeaways

  • Engineers vs Designers: There’s always been a flash between those who emphasize functionality to those who place more emphasis on emotions and aesthetics. p 61
  • “Tufte’s principle of efficiency: A visual design project is good if it communicates a lot with a little.” p 63
  • Tufte’s “assertion that a higher efficiency- the lowest amount of visual resources to communicate the highest possible amount of content- always facilitates understanding is dubious.” p 65

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

*Doing a bit of catch-up here after a few breaks.

Reading and Learning Data Visualization Theoretically/Critically:

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

p 54-61 Forms and Functions: Visualization as Technology

Three Takeaways

  • Originality-Familiarity: Refers to familiar graphical forms such as bar charts to new graphical forms. such as steam graphs p 57
  • Novelty-Redundancy: “Striking a balance between novelty (explaining many different things at once) and redundancy (explain the same things several times by different means) is critical.  Novelty is important to avoid boring your readers, but a certain level of redundancy is necessary if you want to be understood. eg. realistic illustrations accompanied by redundant copy p 57
  • “Too many communicators dumb down the data, simplifying it rather than clarifying it, and they add cutesy illustrations and icons that, to their way of thinking, will make the graphic presentations less dry. ” p 61