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

Hi Friends -

Welcome to issue 96 of the Weekly Newsletter

Onwards to this week's links...


  • Bézier Clock
    The program (made with Processing.js) is very simple; it just linearly interpolates five Bézier control points between pre-defined states...By adjust the locations and distance of the control points from the node points, you can create complex curves with very few points. What this program does is calculate straight-line paths between each point's location on the current and next shown digit, and draws a Bézier curve through the interpolated points.
  • New D3.js Book => Visual Storytelling with D3: An Introduction to Data Visualization in JavaScript
    Data-driven graphics are everywhere these days, from websites and mobile apps to interactive journalism and high-end presentations. Using D3, you can create graphics that are visually stunning and powerfully effective. Visual Storytelling with D3 is a hands-on, full-color tutorial that teaches you to design charts and data visualizations to tell your story quickly and intuitively, and that shows you how to wield the powerful D3 JavaScript library.

Data Visualization Reading and Videos

  • Dominikus Baur: Web-based Data Visualization On Mobile Devices - JSConfEU 2014
    In this talk, I will present a quick run-through of all the relevant aspects of mobile web-based datavis: * What graphics technology (Canvas, SVG, WebGL) to choose? * How to include all the neat HTML5-supported sensors to do cool stuff (GPS, device orientation)? * What amazing things can be done with multi-touch input? * What changes for information and chart design? * How to best debug mobile visualizations?
  • The Human Body, According To Venture Capitalists
    The investors who support emerging medical technologies play an important role in determining which new therapies reach the public. A Wall Street Journal analysis of venture investment trends since 1999 reveals which body systems stand to benefit most from their decisions. The charts below show venture-capital financing in both the amount invested and number of deals for various body parts.
  • The Easiest Way To Make Bullet Charts In Excel
    There are lots of ways to make bullet charts, some easier than others, some better suited for specific visualization contexts. Hell, there are plug-ins you can purchase that make it a snap. Except when my plug-in broke and I had to remake about a bazillion bullet graphs in several dashboards. :/ doesn’t even begin to express it. So yeah, we could use yet another method. This is the easiest way I have found to do it right inside Excel.
  • How We (Interactive Things) Create Color Scales
    This article is about creating refined color scales for charts and visualizations. You will get insights from, and a deeper view into, our working process at Interactive Things. 
For us, a diverse and balanced palette is one of the key components to efficiently communicate information trough color. A list of the used tools can be found at the end of this article.
  • 100 Years Of Data Visualization Best Practice
    Willard C Brinton wrote the first book on data visualisation best practise. When? 100yrs ago. Brinton should be celebrated alongside other visualisation pioneers such as Playfair, Priestley, Tufte and Bertin. This tumblr is by Andy Cotgreave (@acotgreave). Follow the conversation on Twitter with #100yrsOfBrinton. The complete book is available to read on

D3.js Reading and Videos

  • D3.js Step By Step - A Series Of Posts To Get You Started
    This series explores some key concepts in D3.js by building up an example, step by step, from a bare-bones pie chart to an interactive, animated donut chart that loads external's a breakdown of the steps we'll be covering: Intro, A Basic Pie Chart, A Basic Donut Chart, Adding a Legend, Loading External Data, Adding Tooltips, and Animating Interactivity...
  • d3.format Tester
    This little tool helps you try out d3.format specifiers on different numbers. Documentation for format specifiers is here....
  • Building A D3 Plugin
    Some awkward, common visualization constructs lend themselves to a plugin form, a reusable DOM-stamper that can be applied to an ‘svg’ or ‘div’ tag, with a few parameters and maybe some data. For example take a colorbar or legend-box, often unglamorous visual indicators which are tedious to repeat from scratch...What follows is my current state of play, with inspiration from Mike Bostock’s article on reusable charts among others.
  • R + d3.js Parallel Coordinates Of partykit
    This d3.js parallel coordinates plot is another experiment in how we might use interactive plots in Javascript to represent a partykit / rpart object from R. The example builds on this d3.js collapsible tree plot...
  • The Premier League In Small Multiples
    For the new Premier League season I thought I’d try something a bit more adventurous, recording details of every result and covering each team in the English Premier League. Below is my attempt to do this through a small multiples collection...The charts were created using the d3.js JavaScript library while the drag and drop feature is implemented using the JQuery UI library. Most of the data was garnered from the BBC Sport website.

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