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

Hi Friends -

Welcome to issue 169 of the Weekly Newsletter.

Onwards to this week's links...


  • User Intent Affects Filter Design
    Filters are among the top web innovations since, well, the Internet. These controls allow us to quickly find the needle in the haystack on information-rich sites, such as travel sites or ecommerce sites...Filters eliminate items that do not satisfy specific criteria, and facets turn search into navigation by suggesting categories and attributes users might want...However, while filters may look similar on many sites (e.g., they are typically placed on the left), their behaviors vary widely...
  • Placing Texts On Arcs With D3.js
    In this tutorial I want to go into something I’ve learned...placing SVG text on arcs or paths. Because I’ve placed bar charts inside each circle in the occupation piece, I couldn’t just put the text in the middle of a circle as well, like the standard Zoomable Pack Layout has. Placing the titles of parent circles on the outer edge of the circle seemed like the most fitting alternative in my opinion. But circle packing is by far from the only case when placing text on a non-straight line could come in handy. Let me illustrate this with several examples...

Data Visualization Reading and Videos

  • How to Chart A [Tennis] Match...And Why It Is Important
    What does it mean to chart a tennis match? How much data can an individual possibly capture? What can be done with the data once it’s captured? And, how does one go about analyzing the data?...A tennis match can be charted any number of ways, and it’s likely there is no “best” way to go about it. Each approach has advantages and disadvantages. Perhaps its better to start with the question: “Why would you want to chart a match?”...
  • How Do Survival Estimates Compare For Common Cancers?
    Survival estimates for nearly all cancers have improved since the early 1970s. While estimates have improved more for some cancers than others, generally there’s a more positive outlook for many cancer patients than there used to be...
  • The State Of Information Visualization, 2016
    Oh hello, new year! I almost didn’t see you there! Lots of interesting things happened last year: Dear Data, deceptive visualization, storytelling research, new tools and ideas, etc. And this year is already shaping up to be quite strong, too...
  • Victory.js - A Powerful Data Visualization Library For ReactJS [Video]
    We tried swapping out D3's DOM model in favor of React. The result? Love at first iteration. Building a data visualization library as React components means that you can reclaim your SVG as declarative markup, NPM install visualizations directly into your project (can't do that with bl.ocks!), fork them, remix them and file issues against them. It also meant completely rethinking how animations are done, since D3's animation model relies on its DOM model. Come learn the API, and what it means for the future of interactive data visualization...

D3.js Reading and Videos

  • Zoom + Pan with Limiting
    This is an example of pan limiting, trapping for zoom.translate() by passing an array, which is determined by a simple boolean network for each of x and y of the translation to ensure that dragging is constrained within the panExtent...

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