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

Hi Friends -

Welcome to issue 210 of the Weekly Newsletter.

Onwards to this week's links...


  • Hadley Wickham: Nine visualisation challenges
    In this talk I'll discuss nine visualisation challenges, illustrating the problems and some solutions with ggplot2: 1. Subtitles & captions: labelling your plot, 2. geom_label and ggrepel: labelling your data, 3. Dual axes: usually wrong, sometimes useful, 4. Visualising missing values, 5. Why are histograms so hard?, 6. Bar charts and variations, 7. Stacking, 8. Fighting factors with forcats, and 9. ggplot2 extensions from the community...
  • Forcing Functions: Inside D3.v4 forces and layout transitions
    a guide for anyone interested in using D3.v4 forces, and especially those interested in creating their own custom forces and transitions...A recent Stamen project gave me an opportunity to dive into D3.v4’s forceSimulation() — a modularized version of v3’s force layouts with a ton of improvements. This investigation resulted in two new force modules, ready for your use: d3-force-attract and d3-force-cluster, as well as some knowledge I’ll drop below...

Data Visualization Reading and Videos

  • Design For Interactive Data Vis
    An introductory talk by Lynn Cherny on interactive visualization principles, particularly applicable to journalism (with lots and lots of examples)...
  • Leaflet.js Intro [Video]
    A very brief introduction to leaflet.js. In this video you'll see how to build a simple leaflet.js map with a basemap and a few markers...

D3.js Reading and Videos

  • Quicksort + D3
    Visualization of the quicksort algorithm using d3, showing the array each time it is swapped. The white lines show which values are being swapped...This is using Babel so it would work in more browsers, specifically ones that don't support ES2015 generators...
  • vis-utils
    A collection of utility functions for helping with data visualization:
  • Popping Effect
    This example shows a "popping effect" from having a semi-transparent fill color and an opaque stroke. This can be achieved using a little-known CSS keyword currentColor, which uses the value from the color attribute on visual marks. This is a convenient way to compute the data-driven color once, but use it as both the fill and stroke color of marks...Another advantage of this technique is that you can see where there are overlapping circles (which would occlude each other if marks were opaque)...

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