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

Hi Friends -

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

Onwards to this week's links...


  • Sheetsee.js
    Sheetsee.js is a JavaScript library, or box of goodies, if you will, that makes it easy to use a Google Spreadsheet as the database feeding the tables, charts and maps on a website. Once set up, any changes to the spreadsheet will auto-saved by Google and be live on your site when a visitor refreshes the page.
  • Geography Game with D3
    I wanted to write a game for a while, so today I decided to create a geography game with D3.js. The idea is to let the player drag and drop territories into their appropriate place on the world map. The map is rendered using the Robinson projection and only the top 100 territories are chosen according to land area. The player has one more try to drag the land into the right place or the land turns red, animates on its own to the right place, and the next territory is loaded. The goal is to get a perfect score and learn where every country is located on a map. Let’s look at the code.

Data Visualization Reading and Videos

  • A Color Palette Optimized For Data Visualization
    It is now easy and common to visualize a data set using a variety of tools; however, the data visualizations generated usually come with a color scheme that does not look very appealing. Then I read about a recommended color palette in Stephen Few’s book, Show Me the Numbers, a popular text on data visualization. Some people may argue otherwise, but to me, this color scheme looks much better...
  • Build A Dynamic Dashboard With ChartJS
    Today we will be creating a dynamic dashboard with live charts, through the power of ChartJS. ChartJS is a powerful, dependency free JavaScript library which builds graphs via the canvas element. We will build a mobile-friendly dashboard from start to finish.
  • Colin Ware And The Art Of Ocean Data Visualizations
    Colin Ware is a leader in the field of data visualization. He is the Director of the Data Visualization Research Lab, part of the Center for Coastal and Ocean Mapping at the University of New Hampshire. Colin specializes in advanced data visualization and applications of visualization to Ocean Mapping.
  • The Science Behind Data Visualization
    Over the last couple of centuries, data visualization has developed to the point where it is in everyday use across all walks of life. Many recognise it as an effective tool for both storytelling and analysis, overcoming most language and educational barriers. But why is this? An understanding of human perception will not only answer this question, but will also provide clear guidance and tools for improving the design of your own visualizations.

D3.js Reading and Videos

  • Climbing The D3.js Visualization Stack
    Despite the growing number of books and tutorials that are springing up about D3.js, creating even the simplest charts using d3.js out of the box can prove a major challenge to those of us who aren’t fluent in writing Javascript or manipulating the DOM. Help is at hand, though, in the form of several libraries that build on top of d3.js to provide a rather more direct path between getting your data into a web page and displaying it.
  • Ember And D3: Getting New Data Within A Route
    When doing datavis, you’ll often want to display new data without changing the route of your appplication. These types of UI interactions are not meaningful enough to change the URL, but they still may require an additional call to the server. Ember places a lot of emphasis on routing, so examples of fetching data from the server when switching routes are prevalent. But here, I want to look at fetching data without changing the route.
  • Latency Heatmaps in D3 and Highcharts
    See Brendan Gregg’s blog post on how important and cool heatmaps can be for showing latency information and how average latency hides what is really going on. Two colleagues of mine whipped up some quick examples in both Highcharts and D3 to show latency heatmaps and those two examples are shown below. The data in the charts is random just for the purposes of showing examples of these graphics in actions.
  • d3py - A Plotting Library For Python, Based On D3
    This is d3py: a plotting library for python based on d3. The aim of d3py is to provide a simple way to plot data from the command line or simple scripts into a browser window. d3py accomplishes this by building on two excellent packages. The first is d3.js (Mike Bostock). The second is the pandas Python module (Wes Mckinney).

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