Data Visualization and D3.js Newsletter Issue 154 Weekly Data Visualization and D3.js Newsletter

Hi Friends -

Welcome to issue 154 of the Weekly Newsletter.

Onwards to this week's links...


  • The Journalist-Engineer
    Lately, some of the best articles in the NY Times and Bloomberg are 99% code. They’re created by developers, not writers...It represents the present-day revolution within news organizations. Some call it data journalism. Or explorable explanations. Or interactive storytelling. Whatever the label, it’s a huge shift from ledes and infographics...
  • D3.js Dashboard Building Experiment With Stephen Few’s Student Performance Dashboard
    I wanted to see how well on a complex dashboard, and glean scalable patterns and insights in doing so. Steve Few’s design, and the best competing entries were some of the technically most demanding, and also, most exemplary dashboards that can be found. In particular, Steve Few’s effective version seems to be from the future, conveying rich data via bandlines. Therefore Steve Few’s competition was the perfect ground...

Data Visualization Reading and Videos

  • A D3 Version Of My [Stephen Few] Student Performance Dashboard
    After the completion of my 2012 Dashboard Design Competition, I created my own version of the Student Performance Dashboard based on the same data that the competitors used...Recently, I received such a request from an application developer named Robert Monfera. He wanted to create a functional version of the dashboard using D3... [see featured article on D3 lessons, above]
  • My Google Search History – Visualized
    This is me searching on Google on June the 4th last year: Some queries before lunch, lots of queries after 8 pm...Every one of these Google queries tells a little story about me: A search for advice, a quest for more knowledge, a hope for inspiration or reminder...This blog post is about the insights out of my over 40,000 Google search queries between the 10th of June 2010 and the 19th of April 2015.
  • From Paint To Pixels
    A growing number of artists are using data from self-tracking apps in their pieces, showing that creative work is as much a product of its technology as of its time...
  • Word Embeddings For The Digital Humanities
    Recent advances in vector-space representations of vocabularies have created an extremely interesting set of opportunities for digital humanists. These models, known collectively as word embedding models, may hold nearly as many possibilities for digital humanitists modeling texts as do topic models...
  • Less Drama, More Encoding
    Junk Charts adeptly noted and fixed this excessively stylized chart from the WSJ this week...Their take on it does reduce the ZOMGOSH WE ARE DOOMED! look and feel of the WSJ chart...But, we can further reduce the drama by using a more neutral color encoding and encode both the # of outbreaks and total size of the impacted flock populations per week with a lollipop chart...

D3.js Reading and Videos

  • Practical Applications Of A D3.js Selection.
    D3 returns a javascript object when you call d3.append() and d3.selectAll(). This javascript object is referred to as a selection...The selection is your entry point for finding, creating, and removing DOM elements. You also use selections to apply styles and attributes that dictate how those elements appear on the page and respond to events...The official documentation is fantastic but can be dense. This purpose of this article is to cover the most practical applications of the fundamental D3 component...
  • All About D3 Time Scales
    D3 provides two types of time scales: UTC (d3.time.scale.utc()) and non-UTC (d3.time.scale()). For the purposes of this document, the most important feature of UTC time is that it does not undergo any transformation to or from daylight savings time. This feature makes D3's UTC scale the only appropriate scale for us to use when plotting timezone-naïve diabetes device data, at least if we are to maintain the transparency described above...
  • Altitude Of A Triangle With D3.js
    The task I set myself this week was to draw the altitude of a triangle through a point using D3.js...In geometry, an altitude of a triangle is a line segment through a vertex (point) and perpendicular (i.e. forming a right angle with) a line containing the base (the opposite side of the triangle). This line containing the opposite side is called the extended base of the altitude...
  • Mounting D3 Datamaps To Containers In Cycle.js Using Drivers
    Recently, I made a little demo that shows my housing costs on an interactive map...This involves using a container node to mount D3 to using Datamaps. I then take some statistics and push it to my datamaps driver and it shows my data on the map...To make this work, I use the standard Cycle.js DOM driver and provide my own two drivers: one for feeding in my data, and one for handling datamaps...
  • Responding To D3 Events In TypeScript
    D3 offers a great way of interacting with created DOM elements by responding to various events. Binding to events and intercepting data is easy enough. In native JavaScript, the element firing the event can directly be accessed via the this keyword. However, TypeScript has its own way of dealing with this that makes the interaction trickier. In this article, I will try guiding you to a way of responding to events with TypeScript...

Hope that you had a great past week and that next week is even better!

Wishing you the best, 
Sebastian Gutierrez

Want to better understand this topic?
Check out these super-useful D3.js Screencast Videos (1 in 3 are free...)
=> D3 Screencasts Videos