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

Hi Friends -

Welcome to issue 218 of the Weekly Newsletter.

NEWS: I am going to experiment sending out this email once a month (1st Tuesday of each month) rather than weekly. So the next email you'll get is February 7th. Reasons? Lack of compelling content mostly. A few months ago I moved from 5 links per section to 4 links per section to see if it would help. It didn't. For some reason there doesn't seem to be as much very-high-quality D3 / Data Viz content being produced as there was before. Maybe I'm looking in all the wrong places? Anyway, as with all experiments, if this doesn't work I will try something else to make this sure newsletter is valuable to you. Hope you enjoy the rest of your January and I'll see you in Feb!!!!  =)  Any thoughts or concerns, just hit reply and let me know.

Onwards to this week's links...


  • The Unexpected Side Effect of Selections
    Much of web development involves manipulating the DOM. The process is straightforward: retrieve a reference to DOM elements, then manipulate their attributes...But there’s an important assumption we’re making here without realizing it—we assume that selecting an element is a read-only operation. That is, merely retrieving a reference to a DOM node does not modify it...In D3 this isn’t always the case...Consider the following DOM structure...

Data Visualization Reading and Videos

  • To the point: 7 reasons you should use dot graphs
    Points go beyond where lines and bars stop. Sounds weird, especially for those who remember from their math classes that a line is an infinite collection of points. But in visualization, points can do so much more then lines. Here are seven reasons why you should use more dot graphs, with some examples...
  • How Humans See Data [Video]
    John Rauser explains a few of the most important results from research into the functioning of the human visual system and the question of how humans decode information presented in graphical form. By understanding and applying this research when designing statistical graphics, you can simplify difficult analytical tasks as much as possible...
  • 74,476 Reasons You Should Always Get The Bigger Pizza
    One day last year, an engineer and I went to a pizza place for lunch. The engineer told me he wasn't very hungry, but he said he was going to get the 12-inch medium instead of the 8-inch small — because the medium was more than twice as big as the small, and it cost only a little bit more. This sort of blew my mind...The graph below is based on 74,476 prices from 3,678 pizza places around the country. To see how the price of pizzas changes with size — and how much more pizza you get when you get a large — drag the slider at the bottom the graph...

D3.js Reading and Videos

  • Responsive Visualizations Using D3.js and Bootstrap
    In this article...we will design and implement a responsive data visualization using Bootstrap and Media Queries based on real data. We will cover the following topics: a) Absolute and relative units in the browsers, b) Drawing charts with percentage values, c) Adapting charts using JavaScript event listeners, d) Learning to adapt the resolution of the data, e) Using bootstrap's Media Queries, f) Understanding how to use Media Queries in CSS, LESS and JavaScript, and g) Learning how to use bootstrap's grid system...
  • D3 and React 3 ways
    D3 and React are two of the most popular libraries out there and a fair bit has been written about using them together...The reason this has been worth writing about is the potential for conflict between them...To explore these, I’ve taken D3 creator Mike Bostock’s letter frequency bar chart example and used it as the example for all three cases. I’ve updated it to ES6, D3 version 4 and implemented it as a React three options: Option 1: Use Canvas, Option 2: Use react-faux-dom, and Option 3: D3 for math, React for DOM...
  • Pluto isn't that special, after all
    This block shows the orbits of all known planets and trans-neptunian objects in the solar system. Since 2006, Pluto is no longer being called a planet. This visualization tries to show you why...
  • Forces in D3.js v4
    A short demonstration of the various forces that are available in the latest version of D3.js. Following the update to version 4, there has been a significant change in the syntax for applying forces...

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