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

Hi Friends -

Welcome to the seventieth issue of's Weekly Newsletter

Onwards to this week's links...



Data Visualization Reading and Videos

  • The Parks Conservancy Map: The Baking Of A Multi-Layered Data Cake
    Stamen Design Studio: In December, we launched a new map for the Golden Gate National Parks Conservancy. The goal was to help people get to the parks...and to create a framework adding additional data and content as needed. At first, custom cartography wasn’t even on the list, but in hindsight, it really made the project.
  • Palladio
    We are building a tool for data visualization in the humanities. Palladio is under development at Humanities+Design, a research lab within the Center for Spatial and Textual Analysis (CESTA) at Stanford University.
  • The Data-Visualization Revolution
    We would argue that our ability to understand and visualize large sets of data is entering a similar stage of evolution as 17th-century astronomy...
  • Parsing Is Such Sweet Sorrow
    We can now say that “Romeo and Juliet” has the wrong name. Perhaps the play should be called “Juliet and Her Nurse,”...I discovered this by writing a computer program to count how many lines each pair of characters in “Romeo and Juliet” spoke to each other...
  • Maps Of Countries Made From Their Regional Foods
    This cartographic series is a carefully crafted 3-d visualization of edible offerings from around the world. Photographer (and former model) Henry Hargreaves created the cartographic series with food stylist Caitlin Levin.

D3.js Reading and Videos

  • Creating A Right-Click Contextual Popup With D3.js
    With full acknowledgement of the problems overriding the use of the right menu, but also aware that it’s sometimes unavoidable, I’m going to tell you how to do it with D3.js. Our goal is a right-clickable information panel that...
  • Grasshopper Plus Three.js Plus D3.js
    As a follow-up to our previous post on two-dimensional browser interaction, we looked into Three.JS and added the library to our D3 workflow. This allows us to toggle between D3 diagrams and a 3D Model, and the user can download either an SVG file or an OBJ file from the interface.
  • D3.js, Three.js And CSS 3D Transforms
    This example is using D3 to generate HTML elements and SVG charts and also to store coordinate information for transitions inside data properties. The objects created using D3 are then passed into a Three.js scene and animated using CSS 3D transforms (no WebGL here, this is pure DOM).
  • A Searchable US Tweet Map (Node.js/D3.js/OAuth)
    Last year, I put together a searchable tweet map of the United States, mainly using d3.js and the 1.0 twitter search api...The past few days, I went ahead and updated the searchable tweet map to use the new 1.1 twitter api. To do this, I used node.js and a bunch of node modules...
  • Fade To Front
    SVG doesn’t include a concept of z-index, layering, or depth, except that elements that exist later in an SVG document are drawn “on top”. But when designing interactive pieces, we often want shapes that the user has selected / clicked / interacted with to be moved “on top.

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