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

Hi Friends -

Welcome to issue 178 of the Weekly Newsletter.

Onwards to this week's links...


  • Hypothetical Outcome Plots: Experiencing The Uncertain
    This article describes Hypothetical Outcome Plots (HOPs), a promising approach to visualizing uncertain data for general audiences and analysts alike. Rather than showing a continuous probability distribution, HOPs visualize a set of draws from a distribution, where each draw is shown as a new plot in either a small multiples or animated form. HOPs enable a user to experience uncertainty in terms of countable events, just like we experience probability in our day to day lives...
  • Interactive, Visual Explanation Of The GRAIL Handwriting Recognizer
    In this active essay, we will revisit Gabriel Groner’s contribution to the GRAIL project...By the end of this essay, you should understand exactly how Groner’s handwriting recognition scheme works. More precisely, you will see how Groner’s method works, and develop an intuitive understanding of its various operations and phases...The wonderful d3.js library is used to render all of the interactive graphics on this page....

Data Visualization Reading and Videos

  • Film Dialogue From 2,000 Screenplays, Broken Down By Gender And Age
    We Googled our way to 8,000 screenplays and matched each character’s lines to an actor. From there, we compiled the number of words spoken by male and female characters across roughly 2,000 films, arguably the largest undertaking of script analysis, ever...Let’s begin by breaking down dialogue, by gender, for just Disney films...
  • OpenStreetMap Past(s), OpenStreetMap Future(s)
    I gave a talk at AAG last week, as part of a session about OpenStreetMap data analysis...for this presentation I wanted to try speculating about OpenStreetMap’s future. Specifically, what if you take a chart that looks like this, and extrapolate what happens if the number of nodes keeps going up up up...
  • flexdashboard: Easy Interactive Dashboards For R
    Use R Markdown to publish a group of related data visualizations as a dashboard...Ideal for publishing interactive JavaScript visualizations based on htmlwidgets (also works with standard base, lattice, and grid graphics)...Flexible and easy to specify layouts. Charts are intelligently re-sized to fill the browser and adapted for display on mobile devices...Optionally use Shiny to drive visualizations dynamically...
  • How To Avoid Equidistant HSV Colors
    Taking equidistant colors in the HSV color space is no solution for finding a set of colors that are perceived as equidistant. This post describes what’s wrong with HSV and what we can do about this...

D3.js Reading and Videos

  • Multi-Chart Interactions Using D3.dispatch And Crossfilter
    This shows how separate charts can be enclosed in d3.dispatch events, and based on generic state-change events, we can trigger each chart to update accordingly. Crossfilter .filter() takes care of updating the dimensions groups so we simply need to re-trigger part of the chart's code that updates the chart with new data...
  • d3/R Chord Diagram of White House Petition Data
    The OpenData movement has the White House producing and releasing some novel datasets. One of them is the We The People petition site...From the petition site, you can see an interesting gallery of work done in different language and for different media/platform. One such example is yoni’s r pkg...In the spirit of the open data goodness, I thought I’d play around as well with this d3 chord diagram...Read on to make your own!..
  • Bounded Force Layout - Force Rank By Group
    This D3 example shows how to constrain the position of nodes within the rectangular bounds of the containing SVG element. As a side-effect of updating the node's cx and cy attributes, we update the node positions to be within the range [radius, width - radius] for x, [radius, height - radius] for y. If you prefer, you could use the each operator to do this as a separate step, rather than as a side-effect of setting attributes...Wrote the each operator step described above, but used tick to settle groups into separate ranks...

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