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

Hi Friends -

Welcome to issue 207 of the Weekly Newsletter.

Onwards to this week's links...


  • Vizkidz: A Series Of Books On Data Visualization For Kids [Kickstarter]
    This is the story of Penelope Pie and her friends, Laney Line, Barnaby Barchart, and Bertie Boxplot...the stories of Penelope and her friends illustrate the basic concepts of data visualization...In a time where data and its application is considered fundamental to most industries, we are giving kids a head start by introducing the core concepts and basics of data visualization, early on...
  • Scatterplots in D3 with Voronoi Interaction
    D3 v4.3.0 was just released, and it came with a notable new feature: diagram.find for d3-voronoi. With this great addition, we are now able to easily find which Voronoi region is under the mouse without rendering the Voronoi diagram polygons and relying on SVG mouse handlers. This means we can use Voronoi interactive behavior when other overlays in the vis consume mouse events, such as when using d3-brush, or even when using canvas instead of SVG...In this post, I break down how we can make use of the new find() function by using it to access the nearest point to the mouse in a scatterplot....

Data Visualization Reading and Videos

  • Shepherding Random Numbers
    The following is a tiny guide to shepherding random numbers. Originally I used this as a part of a presentation, but it seemed like it would work well as a little text as well. It does not really deal with statistics or probability, it is simply a collection of a few useful tricks I've learnt for manipulating random numbers. Usually I use the following techniques as a part of a larger work....
  • Introducing Graphic Continuum Flash Cards
    The Graphic Continuum—our library of graphic types—has been available in poster and desktop versions for about two years... Severino and I have been creating a card deck based on the Graphic Continuum project. Each card in this set of 52...contains an original image on one side and description of the graph type on the other...The cards are colored and categorized in our original 6 categories of Distribution, Time, Comparing Categories, Geospatial, Part-to-Whole, and Relationships.

D3.js Reading and Videos

  • BarChart with draggable bars to input/adjust data values (Horizontal + Vertical)
    Barchart as an input device! Brushes can be used to draw a barchart. This gives an easy way to input or adjust values with the mouse...The d3 brush is a complex piece of logic taking care of events and user feed-backs. Among other characteristics it exposes a nice selection rectangle which can be used as a bar..2D-brushes come in two flavors see official API v4 doc: a) d3.brushX() and b) d3.brushY()...Let's try both of them on this example....
  • Basic Map Functions - D3 V4 & TopoJSON
    Some simple, frequently used functions for creating a map with D3.js and Topojson: a) centerZoom - Automatically centers and scales your map to its container, and returns your map's outer boundaries in case you want to draw them, b) drawOuterBoundary - Uses the boundary returned from centerZoom to draw a boundary around your whole map, c) drawPlaces - Draws place names, if your topojson has places, and d) drawSubunits - Draws subunits....
  • Capacity Constrained Point Distribution Snowden
    Using a Capacity Constrained Point Distribution (CCPD) to display a picture of an American hero...This is a variant of the original algorithm by Michael Balzer, Thomas Schlömer & Oliver Deussen (University of Konstanz, Germany, 2009), in which I use a Voronoi Diagram to create a topology of the current sites, and only swap the points between neighboring sites (and neighbors of neighbors). It appears to be much faster than the original algorithm....
  • React <-> D3 Resources
    This is an incomplete list of resources on how to link react & d3...These approaches mostly differ as to 'who' has control over the DOM and does the transitions etc. That distinction either requires the user to know more about react or d3, vice versa. Some of the approaches (like react-d3 or react-d3-components) include prebuilt charts, other just provide frameworks to place your charts in...The following list tries to summarize some of the approaches...

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