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

Hi Friends -

Welcome to the sixtieth issue of's Weekly Newsletter

Question for you:
Starting March 2014, I will be doing D3.js Public Workshops (8 hours of D3.js lessons / discussions / hands-on projects and examples). If you are interested in me coming to your city and think you can get at least 5-10 of your friends there, please email me at with
Your Name:
Your City:
Your Country:

When I have a schedule, I will make it available on the website. Thanks!

Onwards to this week's links...


  • Enhancing The Pattern By Keeping Text In Check
    Quartz recently had a short article on the state of residential property prices around the world. The article featured a visualization, making use of text, color and position. This article explores a little experiment to see if we can make the individual disparities and the anomalies stand out.
  • Hexagonal Maps Of New Zealand’s Political Geography
    In mid-December 2013, the British Library released over a million images onto Flickr Commons for anyone to use, remix and repurpose...I landed on the idea of exploring the question, “How might we use hexagons to make better election result map of New Zealand?” I downloaded the electorate vote data from and wrote a D3.js script to automate the creation of cartograms.

Data Visualization Reading and Videos

  • Animating MCMC With PyMC3 And Matplotlib
    Here's the deal: I used PyMC3, matplotlib, and Jake Vanderplas' JSAnimation to create JavaScript animations of three MCMC sampling algorithms -- Metropolis-Hastings, slice sampling and NUTS.
  • The Power Of Bubble Charts
    A bubble chart is similar to a scatterplot, but while scatterplots usually represent two variables — one on the x axis and one on the y — a bubble chart can represent a third variable by circle size. The strength of a bubble chart is it allows us to easily compare multiple variables against each other.
  • DataViz: What Your Favorite Drink Says About Your US Politics
    Former Mississippi governor and Republican Haley Barbour loves bourbon. Franklin Roosevelt mixed martinis. And, as it turns out, those two partisans have something in common with their base voters: Consumer data suggests Democrats prefer clear spirits, while Republicans like their brown liquor.
  • Exploring The Titanic Dataset With Seaborn
    Kaggle has a nice dataset with information about passengers on the Titanic. It's meant as an introduction to predictive models -- here, predicting who survived the sinking. Let's explore it using seaborn. This notebook mostly demonstrates features in development for version 0.3.
  • Communicating Changes In Rank Over Time: Bumps Charts And Slopegraphs
    Previously, I wrote about how anybody can manipulate carbon dioxide emissions data. The data was presented in the form of a table graphic ranking countries of the G-20...However, this doesn’t really provide a clear picture of how rankings changed with time for any particular ranking scheme. Displaying this information more effectively is the subject of this post. The solutions: bumps charts and slopegraphs.

D3.js Reading and Videos

  • Github Language Stats with D3.js
    This is a D3.js Bar Chart Tutorials with Github Data - These charts are largely based on the charts in Mike Bostock's Let's Make a Bar Chart tutorial with some modifications to use git repository language data from the Github API.
  • datawrapper / tutorial-visualization
    This tutorial shows how to add new visualization modules to Datawrapper. In this example we are going to add a nice D3.js bubble chart so Datawrapper users can create them without writing a single line of code.
  • D3.js Map Styling Tutorial II: Giving Style To The Base Map
    The example La Belle France, or the original La Bella Italia by Gregor Aisch use SVG filters to give style to the maps. I haven't found many examples about how to do it, so I will explain here two different styles: a simple shadow under the map, and a style similar to the original map.
  • Planetary.js
    Planetary.js is a JavaScript library for building awesome interactive globes. Planetary.js is based on D3.js and TopoJSON. It has built-in support for zoom, rotation, mouse interaction and displaying animated "pings" at any coordinate.

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