Data Visualization and D3.js Newsletter Issue 212

#### Featured

• Brushing in Scatterplots with D3 and Quadtrees
One of the most common interaction idioms for data visualization is to select by clicking and dragging, also known as brushing. In this post, I’ll focus on how to implement brushing in a scatterplot with D3 through the use of two packages: d3-brush and d3-quadtree. The main brushing interaction comes from d3-brush, while efficient look-up of what is covered by the brush is done via d3-quadtree...

#### Data Visualization Reading and Videos

• The Rhythm of Food
How do we search for food? Google search interest can reveal key food trends over the years...From the rise and fall of recipes over diets and drinks to cooking trends and regional cuisines...what can we learn about food culture by analyzing the yearly cycles in search interest for food, dishes, ingredients, recipes...
• Temperature Rising – A Look at World Temperature Anomalies and CO2 Levels
Temperatures have been slowly rising for a number of years. In the charts below you can see that the late 19th and early 20th century were quite cool relative to the rest of the time period, 1880-2016. Temperatures on average continued to rise throughout the 20th century. Notice that there were fewer and fewer instances of below average temperatures. In fact, the last month the world saw below average temperatures was December 1984. Temperature increases really accelerated in the 21st century...
• Spurious Splines
In this text I will expand directly upon the generative art methods introduced in Shepherding Random Numbers and Shepherding Random Grids. Most notably I will be using random walks...Splines is a mathematical concept used to draw smooth lines between points...You can think of it as a string which is connected to two points. Then the midpoint is used to stretch (or bend) the string in a certain direction. To get an idea you can have a look at the illustration below...

• rect-to-circle
Transforming a circle into a rect...Transitioning the rx and ry properties of a rect is easier than this, but something the flexibility of path element is worth the hassle...
• Self-Rotating Analog Clock
This block uses D3.js to draw a clock that tells the time by rotating itself. No need for hands! It also uses chroma.js to color the background according to the time of day...I learned how to calculate the points around a circle's circumference from this stackoverflow thread. Mathematicians call it the parametric equation for a circle...
• Force split/unite playground
Force split/unite playground to play around with splitting and re-uniting nodes... Box-bounded toggles the constraint for the nodes to stay canvas-bound...
• d3-xyzoom
This D3.js plugin is a fork of d3-zoom that adds several features by separating scaling on x and y: a) Scale independently along x-axis and y-axis, b) Constrain scale extent on zoom out to respect translate extent constraints, and c) Apply "scale factor ratio" on user input. For instance, with a scale ratio of 0.5 on x-axis and 1 on y-axis, when user zoom with its mouse, the increase of scale factor on x-axis will only be half of the increase on y-axis...

Hope that you had a great past week and that next week is even better!

Wishing you the best,
Sebastian Gutierrez
@DashingD3js
www.dashingd3js.com

Want to better understand this topic?
Check out these super-useful D3.js Screencast Videos (1 in 3 are free...)
=> D3 Screencasts Videos