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

Hi Friends -

Welcome to the forty-ninth issue of's Weekly Newsletter

Onwards to this week's links...


  • Christophe Viau's (@d3visualization) D3.js and Inkscape Workflow
    A UI designer often begin by sketching an idea, drawing a wireframe or a mockup and then implementing a functional prototype to test the interaction. Here is a typical workflow using Inkscape for illustration and d3.js to program animations and interactions on top of it.

Data Visualization Reading and Videos

  • Stop 'Text-ualizing' And Start Visualizing
    Every geo-article needs a map, so I made one for The New York Times. Visualizing location data rather 'text-ualizing' that content means that an end user can easily act upon it to plan a proper pub crawl of Berlin.
  • Mapping Seattle - Streets
    To begin to learn the city of Seattle, I’ve started making basic maps – with the attempt to highlight different aspects or views of how things are arranged and where things are. My first set attempts to take a very zoomed-out look at the streets.
  • What Makes A Data Visualization Memorable?
    It’s easy to spot a “bad” data visualization—one packed with too much text, excessive ornamentation, gaudy colors, and clip art. Design guru Edward Tufte derided such decorations as redundant at best, useless at worst, labeling them “chart junk.” Yet a debate still rages among visualization experts: Can these reviled extra elements serve a purpose?
  • Interactive Visualization Of Big Data
    To address the challenge of scaling visualization to Big Data, we have implemented a data visualization system called ScalaR that provides a web-based, map-style interface (think Google Maps) for viewing large data sets.
  • Good Ol' Excel Is The Ultimate Data Visualization Tool (In Most Cases)
    Since our post about Infographics, a *lot* of people, stunned by Tufte's "less is more" gif, have been asking us lately what's our recommendation for a data visualization package. Considering the size of their datasets, and the kind of story they wanna tell, our answer has been invariably the same: "Well, use your dusty ol' Excel". Surprising isn't it?

D3.js Reading and Videos

  • Towards "Responsiveness" With D3.chart.js
    While data visualization is growing as a medium on the Open Web, practitioners of the field still struggle to make data visualization “work” on different screens. we realized that one of the key requirements for supporting different screen sizes is to render slightly (or completely) different views. To accomplish this we added a new concept to our d3.chart.base ...
  • Liquid Volume In A Horizontal Cylindrical Tank
    In this article, I'll show how to calculate the liquid volume remaining in the tank, given the liquid height and present a dynamic, interactive D3.js plot which describes the non-linear relationship between height and volume in this system.
  • Distribution Of Word Lengths In Various Languages
    This D3.js visualization shows several languages visualized based on word lengths. The bar chart is a histogram of word lengths, and to the right is displayed the average word length in each language. If you hover your mouse over the bars, it will show the percentage of words that are of that length.
  • Wrapping A D3.js Visualization In A Chrome Packaged App
    Recently, Google has allowed developers to put "packaged apps" on the Chrome web store. A "packaged app" is basically a web site, but the entire thing can be downloaded to a user's system and run in offline mode. I decided to try wrapping an existing d3.js web site in a chrome packaged app...
  • Introduction to JavaScript Namespaces
    In this article, we will talk about namespaces in Javascript and why and how to use them. [Helpful to understand as everything in D3.js is scoped under the d3 namespace.]

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