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

Hi Friends -

Welcome to the fifty-seventh issue of's Weekly Newsletter

Onwards to this week's links...


  • 6 Reasons To Get Over Your Fear Of Coding And Start Making Better Maps
    Unlike writing – which has been open source since Gutenberg – making awesome maps has long been a game for the mathematical elite. Google changed many of those rules, and D3.js has broken all the rest...Today’s best maps are being made with D3...Maybe you don’t know anything about D3. But if you love maps, you should.

Data Visualization Reading and Videos

  • Make An Alluvial Diagram With Raw
    Raw is a web-based tool that helps to fill the gap between spreadsheets and vector graphics. In this post, I’m going to show you how to use it to make an alluvial diagram, which allows the user to represent flows and changes in network structures and to see correlations between categorical dimensions.
  • The Year Developers And Designers Collided
    We’ll start with a single graph. This shows the number of new CSS repositories created on GitHub every month this year...If you’re not blown away, look again...Design is now happening more and more in the form of code...
  • Multiple Axes Scales With Old Faithful Data On Plotly
    R users find it notoriously difficult to plot two series on the same graph but with different y scales. ... The above graph of the classic R Old Faithful dataset is a great example of when you might want two different scales on a single graph. The histogram shows the bimodal nature of the time between eruptions...
  • Geolocation Part II: Building Interactive Maps With Leaflet.js
    A couple of weeks ago I wrote about using the Geolocation API, and walked through the minimal code necessary to get the user’s longitude and latitude. Now I want to take it just a step further, and show how to use Leaflet to show the users current location on a map.
  • An Intuitive Explanation Of Over-Fitting Using Data Visualization
    Imagine you've got two normally distributed random variables, x and y and you visualize their relationship...But let's imagine you can't collect all of the data. Instead your sample includes only two of those data points. Again you try and fit a linear model...

D3.js Reading and Videos

  • The History Of “Groups Of Death” In The World Cup
    When FIFA announced the final matchups for the 2014 World Cup , the selections brought tough news for U.S. soccer Team USA is in a “group of death.” The interactive D3.js data visualization below explores how teams have fared in other “groups of death” in previous World Cups...
  • D3.js Breakout Clone
    People always ask "Can I do ____ in d3?" The answer is generally always, yes. To prove that, I made a very simple clone of the classic arcade game breakout. If you die, click to restart the game.
  • DimpleJs Bubble/Scatterplots and Data
    DimpleJs is a wrapper for D3.js. I've been using dimplejs lately and wanted to write down what I did while I can remember...I made some graphs using's data, just pulling what I needed over the API and producing something like this...
  • Making Dashboards With DC.js - Part 1: Using Crossfilter.js
    With this first chart we're going to start off with how Crossfilter works because most of the actual dashboard code is manipulating the data for the charts. Once you have a good understanding of how that works, the actual graphing is pretty simple. I'm going to try to cover several different scenarios...
  • Angular.js Directives for NVD3.js And D3.js Charts
    Quickly create NVD3.js charts with Angular.js. Directives are Angular’s way of extending HTML to create new elements and functionality. Directives hide the complexity and code that is necessary to create D3.js, and NVD3.js charts, which makes adding charts to an Angular.js application quicker, and simpler than typical methods.

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