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

Hi Friends -

Welcome to issue 184 of the Weekly Newsletter.

Onwards to this week's links...


  • One Chart, Twelve Charting Libraries
    Charting Libraries. Gosh, there are so many out there...In the following blog post, I will try to get to know a few ones out of the great sea of possibilities. I want to understand their differences and how easy it is to learn them. To do so, I created the same bubble chart with twelve different frameworks.
  • Small Scroll-Linked Animation Demo
    This is a block that illustrates some of the tricks I've learned while designing scroll narratives like A Visual Introduction to Machine Learning and Let's Free Congress. While the animations are much more complicated, the core mechanics are similar...

Data Visualization Reading and Videos

  • The Changing American Diet
    After seeing the Open Data Institute’s project on the changing British Diet, I couldn’t help but wonder how the American diet has changed over the years...In the interactive below, we look at the major food items in each category. Each column is a category, and each chart is a time series for a major food item, represented as serving units per category. Items move up and down based on their ranking in each group during a given year...
  • New Map Blog From National Geographic
    Betsy Mason and Greg Miller are writing a new blog for National Geographic about maps called All Over the Map. Here's a mission statement: There is something magical about maps. They transport you to a place you've never seen, from the ocean depths to the surface of another planet. Or a world that exists only in the imagination of a novelist...
  • liquidity.js
    A data visualization library for depicting quantities as animated liquid blobs...The animation can be rendered in real-time using circle sprites, or rendered for video output using Marching Cubes (metaballs), which is too computation-heavy to be animated in real-time...

D3.js Reading and Videos

  • A Better Way To Structure D3 Code
    Code written using D3 is difficult to manage. Even in a simple line chart, there will be almost a dozen important variables such as (deep breath): width, height, margins, SVG, x-scale, x-axis generator function, x-axis SVG group, x-scale, y-axis generator function, y-axis SVG group, line generator function, path element and (most important of all) a data array/object. And that’s just the bare minimum...The solution: object-oriented programming...
  • Chart Transitions With React And D3 4.0
    I have been working in my spare time on ideas for using the new separate D3 4.0 modules with React. Below I present some examples of using the enter, update and exit pattern to create transitions in React that do not rely on using React.findDOMNode and handing over control of DOM elements to D3. I think the examples turned out well, but I would consider these prototypes for the moment...
  • Beautiful Color Blending Effects With SVGs & D3
    In this short tutorial I want to introduce you to those wonderful color blending modes that you have (in Photoshop for example) where two colors overlapping each other can create another color. I actually started out trying to recreate this effect with SVG filters. But then I found out that it be done with just two lines of CSS...
  • Great Arcs
    Instead of drawing straight lines from a certain set of coordinates to another, d3.geo generates great arcs. These paths are the shortest distance between two points on a sphere...

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