Data Visualization and D3.js Newsletter Issue 144

DashingD3js.com Weekly Data Visualization and D3.js Newsletter

Hi Friends -


Welcome to issue 144 of the DashingD3js.com Weekly Newsletter.
 

Onwards to this week's links...
 

Featured
 

  • On Repeat: How To Use Loops To Explain Anything
    As visual journalists, one of our central responsibilities is to inform people. We do this in lots of ways. One technique I think we have only just begun to use for visual explanations is the visual loop. Specifically, the animated gif...
  • Responding To Resize
    This example shows how to make a D3 visualization that fills up the size of the page at the time it is loaded AND whenever the page is resized by the user. This is necessary when, for example, you want to be able to load your visualization "full screen" and give users the ability to size the window however they want to. This example was created to address this question on the D3 Google Group: Any advice for setting width in iframes with D3?...
 

Data Visualization Reading and Videos
 

  • Canvas Animation
    The 2D Canvas API is a fantastic tool for implementing animations of all kinds. With a few tricks, you can write animations for the three big output formats: the web, GIFs, and video. Animation is flashy and fun, but it's not magic. Let's begin...
  • Q & A: Nicholas Felton Makes Personal Data Look Amazing
    We, of course, are intrigued by what Felton does, curious to find out exactly how and—perhaps most interestingly—why he creates in this way. What he shared with us was both educational and inspiring, and certainly had us looking at numbers in a new light...
  • Don't Dismiss The GIF
    In terms of data visualization, when comparing to an interactive JavaScript application it's easy to think of an animated GIF as being a vestigial organ of the world wide web...Users of our content are no longer confined to reading our explanatory analysis of data, they can do their own exploratory analysis. But sometimes this can be a distraction from the flow of an article. Animated GIFs can add a third dimension to a data visualization without risking upsetting the narrative of the article in which it is embedded...
  • Interaction Design For Data Visualization - Miles McCrocklin Talk At Forward 3 Web Summit [VIDEO]
    Interactivity is often overlooked as a vital component of data visualization, but it is essential to move visual work from providing information to supplying insight. This talk will cover the basic principles of interaction design – from Fitts's Law to creating an interactive grammar for exploration, explore several case studies, and, finally, discuss methods to assess the effectiveness of interaction design. We will go beyond tooltips, brushing, and scrolling, and look at the principles behind these techniques, looking at work from Heer, Bostock, and others. In addition to learning best practices, and seeing them in the context of well-known products, we develop a framework for interaction criticism; ways to assess interaction utility and effectiveness...
 

D3.js Reading and Videos
 

  • NBA Shot Charts With Node.js And D3.js
    The NBA Shot Chart has become iconic in many ways. It’s a quality visualization that gives context to the boring summarized score board data we see everyday. This context is valuable to basketball nerds and lay folks alike. In any event this post is not about the intricacies of basketball but about using Node.js/ d3.js to make cool shot charts...
  • Visualizing Maximum Entropy Summary Trees Using R And D3.js [SLIDES]
    We discuss methods for interactively visualizing trees, and, in particular, smaller versions of those trees known as "summary trees" which enable exploratory data analysis on large hierarchical data sets. We begin by introducing "summary trees", which are small trees that summarize the structure of a larger tree by aggregating its nodes according to certain constraints, and then optimizing a certain measure of the resulting aggregated tree. Next, we demonstrate how to interactively visualize such trees using R and D3...
  • d3.basketball-shot-chart - Generic Basketball Shot Charts
    This visualization aims to become a generic means of generating charts on a basketball court. Currently it only supports hexbin shot charts, with lots of flexibility, but is alpha quality and will be refactored to support other binning mechanisms and other mark types on top of a basketball court...
  • Mapping Bezier Curves From D3.js To Three.js
    As part of incorporating three.js into a d3 viz, I wanted to be able to draw the nice smooth curves that d3 generates. It turns out that three.js has a CubicBezierCurve3 that matches nicely with the output of the d3.svg.diagonal function...

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