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

Hi Friends -

Welcome to the thirty-sixth issue of's Weekly Newsletter

Onwards to this week's links...


  • Using 2 Million Instagram Pics to Map a City’s Visual Signature
    The photos you take on Instagram are not just about you...they can also say a lot about the city you live in. ... Researchers culled more than 2 million Instagram images from 13 cities around the world, in hopes of discovering these visual signatures—the cultural patterns and trends that tell the story of a city...
  • Colors with D3.js
    Every listing on Etsy is associated with a HSB color value, defined by a hue value, a saturation level, and a brightness level. When you select a color, we extract its HSB value, set a maximum and minimum range around each component (color ‘wiggle’ room), and then select and show a random sample of listings whose values fall within the correct range for hue, saturation and brightness. I’m a huge fan of D3.js, so I thought it’d be fun to recreate the grid and animation effects with D3.

Data Visualization Reading and Videos

  • imMens
    Stanford Vis Group - imMens is a system designed to support interactive visual exploration of large data sets with billions or more elements. The scalable visual representations are based on binned aggregation and support a variety of data types: ordinal, numeric, temporal and geographic. To achieve interactive brushing and linking between the visualizations, imMens precomputes multivariate data projections and store these as data tiles.
  • Data Visualization Semantics
    A few days ago I had this nice chat with Jon Schwabish while sipping some iced tea at Think Coffee in downtown Manhattan: what elements of a graphic design give meaning to a visualization? How does the graphical marks, their aesthetics, and their contextual components translate into meaningful concepts we can store in our head?
  • 11 Great Tools For Building Interactive Maps
    Interactive Maps can be a great communications tool, and a powerful site feature, or they can be confusing, messy, and downright frustrating. With all of the different kinds of tools for creating interactive maps at your fingertips, we’ve pulled together some resources to help you navigate your way.
  • Why You Should Never Trust A Data Scientist
    The wonderful thing about being a data scientist is that I get all of the credibility of genuine science, with none of the irritating peer review or reproducibility worries. ... My first taste of this was my Facebook friends connection map. ... I thought I was publishing an entertaining view of some data I’d extracted, but it was treated like a scientific study. ... I’ve enjoyed publishing a lot of data-driven stories since then, but I’ve never ceased to be disturbed at how the inclusion of numbers and the mention of large data sets numbs criticism.
  • Advances in Data Visualization Software Empower Business Users
    The prospect is still enticing after years of promises—a constantly updated global view of your organization’s data, infinitely zoomable and sliceable and presented in visually compelling graphics. That ideal, whether invoked in the marketing of business intelligence dashboards or data warehouses, is always a ways off, but data visualization and visual analytics software offer an increasingly broad range of users a way to explore and analyze large swaths of data, run what-if scenarios and otherwise interpret and manipulate complex information. Until recently, this was the purview of experts.

D3.js Reading and Videos

  • Pretty charts with Dimple.js
    I have spent half a day trying to create a bar chart with d3 library. It’s been quite painful so I could not have been happier when I learned about Dimple.js. Dimple is powered by d3, but it does not overwhelm the user with the typical complexity of d3. A simple bar chart can be created in just a few minutes! Have a look below for the step by step example of how to create and customize a chart.
  • Radian Plotting Library
    Radian is an open source JavaScript library that makes it easy to embed plots in HTML documents. Radian uses the AngularJS JavaScript framework to provide the machinery to implement custom HTML elements, and to allow two-way binding between attributes in HTML elements and JavaScript variables, and it uses the D3.js plotting library for graphics generation. Plots are generated as SVG elements embedded directly in the page, so can be rendered by most modern browsers.
  • Animating Incidents with Webhooks, Firebase and D3.js
    We’re rolling out Webhooks on incidents and it open up a lot of fun new things. For background, Webhooks let you recieve HTTP callbacks when interesting events happen within your PagerDuty account. Details surrounding the interesting event will be sent via HTTP to a URL that you specify.
  • Time Zone World Map with D3 and TopoJson
    I was doing some API work with time zones recently and was surprised not to find a D3 time zone map implementation. I found a KML file of time zones here and decided to quickly put together a D3.js time zone world map using TopoJSON. ... I first used ogr2ogr to turn the timezone.kml file into GeoJSON and then I used the following TopoJSON command to simplify and quantize the file into a small TopoJSON 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