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

Hi Friends -

Welcome to the eightieth issue of's Weekly Newsletter

Onwards to this week's links...


  • 2014 OpenViz Conference Videos Now Online
    OpenVis Conf is a two-day, single track conference about the practice of visualizing data on the web. Speakers will discuss best practices for data processing, storytelling, visual design, code structure and implementation using the latest and greatest technology and tools on the Open Web.
  • Yakko's Nations Of The World
    This D3.js chart is an animated globe which highlights countries as they're sung by the character Yakko Warner from the TV cartoon "Animaniacs" in his song, "Nations of the World"...The chart is contstructed using D3.js, which renders a globe using topojson with data I generated from Natural Earth's 50m dataset. I hand-entered the timings for when to target each country...

Data Visualization Reading and Videos

  • The Five Commandments (And Fifteen Footnotes) Of Data Visualization
    I'm nobody special in the world of data viz; I have no profound observations or innovations to add to those of the likes of Edward Tufte, Hans Rosling, Hadley Wickham or Mike Bostock; but I think I have a little common sense and boots-on-the-ground are a few tips to help ...
  • Books About Related But Non-Data Visualisation Subjects
    Over the past couple of days I’ve been asking people in my corner of Twitter for suggestions for classic book titles from subject areas that are not data visualisation but that do hold many interesting related ideas, theories and concepts. Things that we can draw from and apply to our understanding of data visualisation. This is a list of top 3′s based on responses on Twitter.
  • Use Excel Power Maps To Visualize Performance By Location
    I often need to communicate localized results to contacts who know very little about search and are not data-oriented. Using Excel’s new Add-On called Power Maps (once known as GeoFlow), we can easily create a variety of visualizations to better show geographic performance.
  • TileStache - A Stylish Alternative For Caching Your Map Tiles
    TileStache is a Python-based server application that can serve up map tiles based on rendered geographic data. You might be familiar with TileCache, the venerable open source WMS server from MetaCarta. TileStache is similar, but we hope simpler and better-suited to the needs of designers and cartographers.
  • Heatmap.js
    Heatmap.js is an open source JavaScript library that can be used for generating realtime heatmaps. It uses the power and flexibility of the HTML5 canvas element to draw heatmaps based on your data.

D3.js Reading and Videos

  • On D3 Components
    Discussion on web components is quite a contentious and shifting landscape...This is (now a relatively-outdated) article I wrote as an attempt to capture and share some distilled thoughts on one particular approach which we found to be surprisingly powerful in many respects. This is by no means a silver bullet, but hopefully you may find some of the techniques/concepts useful.
  • Chart Withings Data Using IFTTT, Google Spreadsheets And D3.js
    A few months ago I purchased a Withings Smart Body Analyser. It’s a set of WiFi scales that track your weight, fat percentage, air quality, room temperature etc....Withings do have an API, but try as I might, I wasn’t able to get the data I wanted from it. The solution I came up with was to use a combination of the following: IFTTT, Google Spreadsheets, Google App Scripts, and D3.js
  • SVG + Matrix3D Hybrid Animations
    At the hackathon at HTML5 Dev Conf this last Wednesday, Mark Chatkhan, Adnan Wahab, and I teamed up to create a proof of concept for high performance SVG + Matrix3D hybrid animations. Click anywhere on the map.
  • Using SVG Gradient Masks With D3.js
    In our last project we extensively used D3.js to show a lot of data, but we also needed some related graphic elements that users could zoom in and out without losing render quality or look weird. So, we decided to implement these directly in our SVG, using our beloved D3.js.

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