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

Hi Friends -

Welcome to issue 158 of the Weekly Newsletter.

Onwards to this week's links...


  • Finding The Right Color Palettes For Data Visualizations
    While there are an increasing number of good color palettes out there, not all of them are applicable to charts and data visualizations. Our approach to visualization color palettes is to make natural gradients that vary in both hue and brightness. By doing this, our palettes are accessible by people who are color blind, obvious for others, and works with anywhere from one to twelve data series...
  • Let’s Make A (D3) Plugin
    This tutorial teaches you to create a plugin for D3 using D3’s new 4.0 module pattern. Although the word plugin suggests extending core functionality, this pattern is used internally by D3 to organize the code into modules. Thus, you can use this pattern to replace default behavior or to pick a subset of features for a custom build. Another way of thinking about it is that everything in D3 is a plugin, including core features like colors, scales, and selections...

Data Visualization Reading and Videos

  • Our Work with Data Voyager: Designing for Fast Data Exploration
    Recently, we announced our Knight Foundation Prototype Grant to work on Data Voyager, a tool for exploring the breadth and depth of a particular dataset with ease through automated visualization recommendations...Our goal is to encourage data exploration for all, and so we wanted to focus on improving Data Voyager to make it a valuable addition to people’s data analysis workflow. To that end, we decided to focus our time on four impact areas: a) UX/UI improvements, b) First-use experience, c) Custom Datasets, d) Speed improvements...
  • The Connected Scatterplot For Presenting Paired Time Series
    In a way, the connected scatterplot is just that: a scatterplot with the dots connected by lines. But the appearance is quite different, since the lines give it much more of a gestalt than the points alone. It’s important to understand the way it depicts two time series, which is why we describe it at some length in the paper.
  • Family Ties
    Analyzing the DNA of 85 dog breeds, scientists found that genetic similarities clustered them into four broad categories. The groupings reveal how breeders have recombined ancestral stock to create new breeds; a few still carry many wolflike genes. Researchers named the groups for a distinguishing trait in the breeds dominating the clusters, though not every dog necessarily shows that trait...
  • Analyzing 1.1 Billion NYC Taxi And Uber Trips, With A Vengeance
    The New York City Taxi & Limousine Commission has released a staggeringly detailed historical dataset covering over 1.1 billion individual taxi trips in the city from January 2009 through June 2015...I mapped the coordinates of every trip to local census tracts and neighborhoods, then set about in an attempt to extract stories and meaning from the data...
  • Animated SVG vs GIF [CAGEMATCH]
    GIFs have pretty good browser support, yes, but the advantages of SVGs outweigh theirs in almost every aspect. There might be exceptions, and in those cases do, by all means, use GIFs or any other image format that does a better job than SVG would...SVG can bring a lot of performance benefits to the table when compared to other image formats, especially GIFs...Thus, given all of the above, I recommend that anywhere SVG could be used for animation, GIFs should be avoided...

D3.js Reading and Videos

  • visfest 2015 Notes
    Notes from the 2015 visfest - Session 1: A - D3 + React, B - Foundational vis for rapid development, and C - Create visualizations together. Session 2: A - Make it fast!!, B - Data Visualization and Games, and C - Higher Level Visualization Abstractions. Session 3: A - D3 v4 (modular), B - Streaming Data + D3, and C - Annotations in Viz & D3. Session 4: A - So you want to do vis for a living?, B - Testing D3, and C - Force in a box. Session 5: A - WebGL, B - Storytelling with Data Viz, and C - Creating Data Products.
  • Rendering ASCII Charts With D3
    A few days ago Bloomberg published their list of 50 companies to watch in 2016, and for some reason they decided to publish the entire report in ASCII!...Now as I developer, when I want to create a chart or visualisation the tool I always reach for is D3, which got me wondering, could D3 be used to create an ASCII chart? A long train journey this morning gave me the opportunity to explore this question, and the answer is ‘yes’!...Here’s one of the charts from Bloomberg’s report rendered in ASCII using D3
  • How To Build A Simple Line Plot Or Bar Chart In D3 Using D3plus.js
    D3plus lowers the bar to coding in D3 by allowing users to deploy quick visualizations based on a limited set of visualizations–like bar charts, scatter plots, line plots and geo maps–and utilities–like fonts and colors–for customizing charts. Learning to code an interactive visualization in D3plus is the perfect introduction to D3. In this tutorial, we’ll build a simple line plot...

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