Learning Tracking September 2017

I’m trying to give myself at least half an hour during the workdays (or at least blocking two hours or so a week at least) to learn something new – namely taking classes on Treehouse, which I still have a membership to, reading job related articles, and reading job-related books. Tracking notables here as a self commitment and to retain in memory.


UX Basics Key Takeaways

  • Gather data about user behaviors, goals, and needs
    • Do this with user interviews, quant data (logs and analytics), and surveys
    • Be sure to analyze behavior types, and not just audience segments
  • Always answer the Q: “What is it the product we are working on provides for this behavior type?”
  • Manage content inventory: What exists (eg form values), gaps, and analyze

Ajax Handling Errors Key Takeaways

  • XHR request object contains important info about errors

Articles + Three Takeaways

Paying Down Your Technical Debt

  1. “If the debt grows large enough, eventually the company will spend more on servicing its debt than it invests in increasing the value of its other assets.”
  2. “Accumulated technical debt becomes a major disincentive to work on a project. It’s a collection of small but annoying things that you have to deal with every time you sit down to write code. But it’s exactly these small annoyances, this sand grinding away in the gears of your workday, that eventually causes you to stop enjoying the project.”
  3. Becomes a source of fear, dread, and loathing for teams so you should periodically service your debt

Evidence Based Scheduling

  1. Break tasks into hours (nothing longer than 16 hours) so it forces you to figure out what to do
  2. Keep timesheets tracking data for historical use
  3. Simulate the future

“But you can never get 4n from n, ever, and if you think you can, please email me the stock symbol for your company so I can short it.”

Reddit and Facebook Veteran On How to Troubleshoot Troublemakers aka “Debugging Coders”

  1. Job is not getting stuff to do people for you, it’s figuring out how to do something together.
  2. ‘The exact behaviors that make it so that the organization can stay alive, move fast, be scrappy can be exactly the same actions that cause a negative disruption later in the life of your company,” says Blount. “Troublemaking brings signs of large tectonic shifts, releasing pressure into the atmosphere. Specific rumblings are almost all borne fundamentally of some kind of frustration: moving too fast, not moving fast enough, taking too few or too many risks. These are signals — and opportunities — to assess underlying changes and growth in an organization.”’
  3. For nostalgia junkies (people who like the company that ‘way it use to be’), focus on the question: “What about next week bothers you?” and for the Trend Chasers – gotta measure the risks, what happens with this route over the next year, deploying it and rolling it out?

How do managers* get stuck?

  1. Failing to manage down: need to delegate, train team, pay attention to process, and say no
  2. Failing to manage sideways: build peer relationships, look for additional tasks, create a vision, become someone you’d like to report to
  3. Failing to manage up: attend to details, complains but doesn’t fix, drags outside of comfort zone, show yourself professionally to higher ups

How do individual contributors get stuck?

  1. “Everyone has at least one area that they tend to get stuck on. An activity that serves as an attractive sidetrack. A task they will do anything to avoid.”
  2. “When you know how people get stuck, you can plan your projects to rely on people for their strengths and provide them help or even completely side-step their weaknesses. You know who is good to ask for which kinds of help, and who hates that particular challenge just as much as you do.”
  3. “Knowing the ways that you get hung up is good because you can choose to either a) get over the fears that are sticking you (lack of knowledge, skills, or confidence), b) avoid such tasks as much as possible, and/or c) be aware of your habits and use extra diligence when faced with tackling these areas.”

Network Visualization of Soccer Confederations of the Americas


Made with D3.js based on Mike Bostock’s Collapsible Force Layout. Used data from the CONCACAF (The Confederation of North, Central America and Caribbean Association Football) and CONMNEBOL (The South American Football Confederation) Wikipedia pages.  Click here or on screenshot above for interactive version on bl.ocks.


I’ve really into soccer in general, especially international play, after my grad school project where I worked at the Annenberg Innovation Lab collaborating with Havas Sports and Entertainment and IBM on a research project studying soccer fans (see Fans.Passions.Brands, Fan Favorites, and Sports Fan Engagement Dashboard). I also did my degree practicum on Marketing to Female Sports Fans.

I’m now in another universe creating data visualization at an advertising agency and am trying to combine the geeky fandom with practical practice related to my daily work.

Design Notes

More trying to test out creating a network visual more than anything.  Kept it clean and minimalist with proper use of color hue differences.  Used a sans serif Google Font I found to keep it more modern and have it look a little different from the default web fonts.

Technology Notes

The whole point of this exercise was practice using the D3 Network layout.

  • Event handlers aren’t perfect. I wanted the leaf nodes to be able to collapse and also for all nodes to be dragged and placed.  Doesn’t work quite as seamlessly as I want, eg. you have to double-click nodes to un-snap from their position, which means collapsing those nodes that are able to be collapsed as well even if you don’t necessarily need to do that.
  • It also took awhile to get the repulsion and link length measures set so all the countries could be displayed in a less messy manner.

Next Steps

I want to create a network with all the countries of the FIFA Confederations and size the nodes by some measure indicating the size of the confederation. I’d also like to replace the leaf nodes for reach country with their country flags.

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

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

Finding Strings using RegEx

  • var str = “how much wood would a woodchuck chuck”
  • var regex = “/wood/”;
  • if (regex.test(str)) {
  •                 console.log(“We found ‘wood’ in the string!”);
  • }
  • => “We found ‘wood’ in the string!”

To see actual matches

  • var matches = str.match(regex);
  • console.log(matches)
  • => [“wood”]

Find all instances of wood

  • regex = /wood/g;
  • console.log(str.match(regex));
  • => [“wood”, “wood”, “wood”, “wood”]

Extend regular expession match expression that matches everything that starts with wood followed by – or more characters

  • regex = /wood.*?\b/g;
  • console.log(str.match(regex));
  • => [“wood”]


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

Udacity Data Visualization and D3.js – Continuing lecture on Dimple.js

Three Takeaways

  • Use debugger; to stop page loading at that line of code when using the Chrome developer console
  • A cool feature of chrome debugger is the console.log(data) – the table function that outputs with a tabular format like a spreadsheet.  Caution on use with large data sets
  • “use strict” lets the browser know you want to enforce a restricted subset of JS in the function.  It also forces the browser to throw explicit erros when Javascript might silently fail

Reading and Learning Data Visualization Theoretically/Critically:

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

xv-11 Intro and Why Visualize: From Information to Wisdom

Three Takeaways

  • “The life of a visual communicator should be one of systematic and exciting intellectual chaos” p 5
  • “The first and main goal of any graphic and visualization is to be a tool for your eyes and brain to perceive what lies beyond their natural reach” p 10
  • “In information graphics, what you show can be as important as what you can hide” eg greyed out lines in time series in the background while important values are called out in colors p 11