Data Visualization and D3.js Newsletter Issue 223

DashingD3js.com Weekly Data Visualization and D3.js Newsletter

Hi Friends -


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

Onwards to this month's links...

 

Featured
 

  • Static visualizations do not exist
    What we think about as static — visualizations or any other medium — does not, and even: cannot exist. Reading and understanding turns everything interactive...Let’s take a simple example to make my point, one “static” visualization that is almost cliché: Napoleon’s march by Minard...This graphic has been thrown around so many times since Tufte brought it up in his landmark book that you’d be hard-pressed to find a visualization course that doesn’t mention it...Let’s look at it — once more...
  • The Hitchhiker’s Guide to D3.js
    This guide is meant to prepare you mentally as well as give you some fruitful directions to pursue. There is a lot to learn besides the d3.js API, both technical knowledge around web standards like HTML, SVG, CSS and JavaScript as well as communication concepts and data visualization principles. Chances are you know something about some of those things, so this guide will attempt to give you good starting points for the things you want to learn more about...
 

Data Visualization Reading and Videos
 

  • A new algorithm for finding a visual center of a polygon
    We came up with a neat little algorithm that may be useful for placing labels and tooltips on polygons, accompanied by a JavaScript library. It’s now going to be used in Mapbox GL and Mapbox Studio. Let’s see how it works...
  • 6 weird tricks for insane chart performance
    How do you like my clickbait title? While you are here, I want to share some tricks to handle larger datasets without locking the UI or slowing down your chart interaction...A lot can be done to optimize client-side rendering, and there’s a lot more we could discuss (caching, server-side rendering, aggregating, LOD, blitting, using shaders, using webcl, etc.). But I just wanted to share some solution I had to use so far in my datavis work...
  • An Intro to regl for Data Visualization
    regl is a technology meant to simplify building awesome things with WebGL...With this tutorial, I hope to share my brief learnings on this wonderfully mystical technology and remove some of that magic. Specifically, how do we make the jump from the interesting but not so applicable intro triangle example...to using regl for some sort of data visualization...
  • Beautifully Animate Points with WebGL and regl
    In a previous blog post, I covered how to animate thousands of points using HTML5 canvas and d3, but that approach doesn’t scale too well beyond 10,000 points... In this post, I’ll explore using regl, one such library by Mikola Lysenko to help do the heavy lifting...Take note that I am a data visualization guy, not a 3D graphics guy, so my approach is based on my experience in that area...
 

D3.js Reading and Videos
 

  • Don’t Transition Units
    Say you have a stacked area chart showing the number of units sold of a variety of products: counts of apples, oranges, and pears...Now say you want to transition the chart to a normalized stacked area chart, where rather than showing counts, you’ll show percentages: the proportion of each product sold relative to the total number of units sold...The simplest way to do that in D3 would be to reconfigure the scale and axis:...Don’t do this!....
  • Making of: Line drawing tutorial
    People ask me how I write my interactive tutorials. I can point at the HTML+CSS+JS but that doesn’t show the process. On this page I’ll recreate the first half of my line drawing tutorial, using d3.js v4...
  • How to create pure react SVG maps with topojson and d3-geo
    Since d3 has been split into smaller components in v4, pairing it with react has become more streamlined. Making declarative SVG maps with react, topojson, and d3-geo has never been easier...This article will show you how to create pure react SVG maps with topojson-client and d3-geo. The techniques outlined here will help you make your own reusable SVG mapping components...
  • iD3 - an IDE dedicated for development in D3.js
    iD3 is an open-source, cross-platform desktop application geared to simplify data visualization with D3 for non-JavaScript and JavaScript data scientists and analysts. With our integrated Python based data management system and custom generated attribute controls, iD3 supports the full process from importing your data to exporting your final presentation...

Hope that you had a great past month and that next month 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