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

Hi Friends -

Welcome to the thirty-eighth issue of's Weekly Newsletter

Onwards to this week's links...


  • Displaying Data in Digestible Ways - Stephen Anderson
    In this interview, Stephen Anderson, a leading thinker on design and psychology, talks about culling through massive amounts of data is a headache, that Data is useless when you can’t make good decisions from it and that it’s very easy to fall into placing something into a grid, table, or other familiar pattern because of what’s been done in the past. He explores how by really analyzing what kind of data you have and what you’re trying to communicate, you can uncover better ways to present that data.
  • Poem Viewer
    The Poem Viewer is a web-based tool that enables users to explore and analyze poetry through a visual representation of different elements of a text – the words of the poem, the phonetic sounds and the location of the sound. The program will automatically transcribe the poem into its phonetic sounds and then reveal a visualization that demonstrates, at a glance, where in the mouth the word being spoken is located.

Data Visualization Reading and Videos

  • TimelineJS
    TimelineJS - Beautifully crafted timelines that are easy, and intuitive to use. TimelineJS is an open-source tool that enables you to build visually-rich interactive timelines and is available in 40 languages. It can pull in media from different sources and has built in support for: Twitter, Flickr, Google Maps, YouTube, Vimeo, Vine, Dailymotion, Wikipedia, SoundCloud and more media types are regularly added.
  • Friday Five: The Science Behind Visual Storytelling
    We know visual storytelling is important but do we understand why? Aside from our ever-diminishing attention spans, the human brain processes images and color in specific ways. You don’t need to be a designer or an artist to read or think visually because evolution programmed us this way. Based on the Gestalt Principles and Color Theory, here are five “laws” to consider when developing a visual narrative....
  • 45 Free or Super Cheap Tools for Creating Amazing Visual Content
    Researchers believe that around 65% of the population are visual learners, who are able to best process information that’s relayed in images, infographics and video. While the average adult reads around 300 words a minute, the human brain processes images 60,000 times faster than text. We’ve created a comprehensive list of the best free and low-cost tools for creating amazing visual content on the web.
  • Google Developers R Programming Video Lectures
    Google Developers recognized that most developers learn R in bits and pieces, which can leave significant knowledge gaps. To help fill these gaps, they created a series of introductory R programming videos. These videos provide a solid foundation for programming tools, data manipulation, and functions in the R language and software. The series of short videos is organized into four subsections: intro to R, loading data and more data formats, data processing and writing functions.
  • SVG Crowbar
    A Chrome-specific bookmarklet that extracts SVG nodes and accompanying styles from an HTML document and downloads them as an SVG file—A file which you could open and edit in Adobe Illustrator, for instance. Because SVGs are resolution independent, it’s great for when you want to use web technologies to create documents that are meant to be printed (like, maybe on newsprint).

D3.js Reading and Videos

  • D3 World Maps: Tooltips, Zooming, and Queue
    D3 has a lot of built in support (a powerful geographic projection system) for creating Maps from GeoJSON. I will go over a couple examples of building a D3 World Map with colors, tooltips, different zooming options, plotting points from geo coordinates, and listening to click events to load new maps. I will also use Mike Bostock’s queue script to load the data asynchronously.
  • Reusable D3 charts with Ember.js Components
    I recently read a good article called D3.js in Angular.js Directive and thought it would be interesting to recreate the example using Ember.js components. Here’s how I created the example using an Ember.js component:
  • Dimple.js Bar Labels
    At the moment dimple doesn't natively deal with labels. Until this functionality is fully added it is still fairly straightforward to add labels manually. This example shows a way to do it for a bar chart.
  • Using D3 For Realtime Web Server Stats
    I wanted to learn a bit of D3, so I made a small web app that shows (nearly) realtime web server statistics as pretty graphs. Here’s a demo for my server and a setup guide.

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