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

Hi Friends -

Welcome to the 81st issue of's Weekly Newsletter

Onwards to this week's links...


  • Responsive Charts With D3 And Pym.js
    Infographics are a challenge to present in a responsive website (or, really, any context where the container could be any width). If you render your graphics in code you can make design judgements based on the overall context and maintain some measure of consistency in type size and legibility regardless of the graphic's width.

Data Visualization Reading and Videos

  • Giorgia Lupi: “Visual Designs Should Balance Convention And Novelty
    Information designer Giorgia Lupi, founder and design director at Accurat looks for visual metaphors in music notations and architectural drawings...In this interview, Giorgia told us about her workflows and the works she is especially proud of – and also shared her thoughts on how journalists should approach data visualizations.
  • Chromatist JavaScript Library
    The Chromatist library aims to pull together implementations of useful color space math, for use both in the browser and in node-based servers. In particular, it currently has implementations of RGB ⇔ CIEXYZ conversions, CIECAM02, CIELAB, as well as HSL and HSV.
  • Tablib: Pythonic Tabular Datasets
    Tablib is an MIT Licensed format-agnostic tabular dataset library, written in Python. It allows you to import, export, and manipulate tabular data sets. Advanced features include, segregation, dynamic columns, tags & filtering, and seamless format import & export.

D3.js Reading and Videos

  • Factorisation Diagrams
    A version of Brent Yorgey’s factorisation diagrams, written using D3.js. Code for spacing the dots nicely taken from an excellent demo by Vjeux.
  • Reducing CPU Load In D3.js Transitions
    You can find a common approach used to create line animations here. Unfortunately this approach uses too much cpu. The values of the svg elements are changing continuously and as a result the browser re-renders the DOM elements for every change. So in order to reduce the browser load, we needed to reduce rendering by cutting down on the changes in the DOM elements on every graph change.
  • Visual Languages For The Web
    For my goals, the basic visualization goals would be: a) prepare datasets with JSON, b) visualize datasets, and c) provide interactions. The main power of D3 and Processing come in steps 2 and 3. Working with D3 and/or Processing can help you to explore and identify ideas that can stick. Let’s compare both approaches by drawing a simple line.
  • D3 Number Formats
    This little tool helps you try out d3.format specifiers on different numbers. Documentation for format specifiers is located here...
  • Crime In Mexico City At The Cuadrante Delictivo Level
    Map of Crime in Mexico City made with D3, TopoJSON, Node...This program scrapes the cuadrante polygon coordinates from the SSPDF's cuadrante delictivo map, it also cleans them and saves them as shapefiles in the cuadrantes-shps directory and as topojson in the html/js/cuadrantes-map.json file.

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