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

Hi Friends -

Welcome to issue 95 of the Weekly Newsletter

Onwards to this week's links...


  • Vispy - Interactive Scientific Visualization
    Vispy is a high-performance interactive 2D/3D data visualization library. Vispy leverages the computational power of modern Graphics Processing Units (GPUs) through the OpenGL library to display very large datasets.
  • Integrating D3.js Visualizations In A React app
    A small example exploring how to integrate D3.js data visualizations into a React app. I've been working with D3.js and React lately, and in this post I wanted to share a few ways I found in building components and the interface between them...We'll be building a small example to illustrate this...

Data Visualization Reading and Videos

  • Seaborn Version 0.4.0 Out Now...
    This is a major release from 0.3. Highlights include new approaches for quick, high-level dataset exploration (along with a more flexible interface) and easy creation of perceptually-appropriate color palettes using the cubehelix system. Along with these additions, there are a number of smaller changes that make visualizing data with seaborn easier and more powerful.
  • How To Make Small Multiple Maps In Tableau
    I’m a big fan of small multiples in data viz, and I’m somewhat of a “Maphead” as well. Naturally, combining the two together results in a visualization that I’d vouch for almost any time. Kyle Kim of the LA Times just published a stunning series of 192 maps showing drought levels in California by week, going back to January 4, 2011...I look at a lot of Tableau Public I thought I’d show you one and walk you through how to create one for yourself...
  • Choosing The Right Map Projection
    Michael Corey’s guide to smashing the earth for fun and profit...Nearly all maps are an attempt to represent our environment (generally Earth) in a two-dimensional format. The act of systematically transposing a 3D to a 2D object is called projection, and it’s a key concept of cartography, the art and science of making maps...
  • The Beauty Of Code
    This is what ugly code looks like. This is a dependency diagram—a graphic representation of interdependence or coupling (the black lines) between software components (the gray dots) within a program...If that knot of tangled hair provokes disgust, what kind of code garners admiration? In the anthology Beautiful Code, the contribution from the creator of the popular programming language Ruby, Yukihiro “Matz” Matsumoto, is an essay titled “Treating Code as an Essay.”...
  • Enhancing Data Visualization with SVG Filters
    SVG filters are a powerful and underutilized tool. Filters are a post processing step that allow you to create interesting effects by adding pixel-based effects. They can be chained together, manipulated on the fly, and applied to different elements to create powerful visual experiences.

D3.js Reading and Videos

  • Arcs, Lines, Bezier Curves, Triangles: Barr's Diagram
    This example is of Alfred Barr's "Diagram of Stylistic Evolution from 1890 until 1935" as sketched by artist Ward Shelley, shown in Design for Information. It utilizes different shapes including: arcs, rectangles, lines, bezier curves; and four csv files with data for these shapes, to create the diagram.
  • Animating A Geographic Boundary Into A Circle...Then Back Again
    This is an example of transforming geographic boundaries with D3. We transform the US state of Texas into a circle and then transform it back to the US State of Texas...Paths in SVG are comprised of points called nodes. In order to transition from one path (the boundary) into another (the circle) the same number of nodes need to exist on both...Start by drawing a boundary (Texas) with D3.
  • Albers Color Studies In D3.js, Part 2
    Picking up where we left off, in the middle of Josef Albers' Interaction of Color, his study of the "middle mixture" affords a chance to bring in D3.js support for animations and transitions...
  • How To Make An Interactive D3.js Visualization Using is a visualization generator based on the amazing D3.js library. It comes with: 9 templates, 36 color palettes, colourful polygonic backgrounds, Excel-like editor optimized for editing tree structures, and properties panel. By remixing templates, palettes, backgrounds, data and properties, you can create all kinds of visualizations as if you were using an Excel file with a dash of PowerPoint.
  • cola.js - Constraint-Based Layout in the Browser
    cola.js (A.K.A. "WebCoLa") is an open-source JavaScript library for arranging your HTML5 documents and diagrams using constraint-based optimization techniques...It works well with libraries like D3.js and svg.js. The core layout is based on a complete rewrite in Javascript of the C++ libcola library...It has an adaptor for d3.js that allows you to use cola as a drop-in replacement for the D3 force layout.

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