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

Hi Friends -

Welcome to issue 106 of the Weekly Newsletter.

Onwards to this week's links...


  • Introducing Charted - A New Way To Share Data
    Charted is a tool that automatically visualizes data. Give it the link to a data file and Charted returns a beautiful, shareable visualization of that data. The charts look like this...
  • AngularJS Directive For C3.js - Tutorial
    Today I’d like to write a tutorial showing how to write simple AngularJS directive. We’ll be creating C3.js wrapper, which I need one for my project. First of all, we need some assumptions: a) we’ll be using AngularJS and b) we want to use all available API calls and options from C3.js...

Data Visualization Reading and Videos

  • A Persuasive Chart Showing How Persuasive Charts Are
    ...taking the same information and also showing it as a chart made it enormously more persuasive, raising the proportion who believed in the efficacy of the drug to 97 percent from 68 percent. If the researchers are correct, the following chart should persuade you of their finding...
  • Getting Started With Palladio
    Palladio, a product of Stanford’s Humanities+Design Lab, is a web-based visualization tool for complex humanities data. Think of Palladio as a sort of Swiss Army knife for humanities data...
  • Overcoming D3 Cartographic Envy With R + ggplot
    When I used one of the Scotland TopoJSON files for a recent post, it really hit me just how much D3 cartography envy I had/have as an R user. Don’t get me wrong, I can conjure up D3 maps pretty well and the utility of an interactive map visualization goes without saying, but we can make great static maps in R without a great deal of effort, so I decided to replicate a few core examples from the D3 topojson gallery in R.
  • San Francisco’s Homeless Problem As Viewed Through Human Poop
    Jenn Wong, a San Francisco-based developer, mapped the problem using 311 calls in the city reporting human waste. The resulting visualization, "(Human) Wasteland", can be filtered by month or by specific neighborhood, or viewed as a (steaming) heatmap amalgamation of all the data...

D3.js Reading and Videos

  • Interactive Chord Diagrams In D3
    ...I've had the opportunity to explore how to create interactive chord diagrams that transition from one state to another. It's tricky. You need to do some caching of layout information in order to get a smooth animation that makes sense to the user. You also need to think a little about how things get sorted on the screen by D3. Keeping the order as stable as possible from transition to transition makes the diagram easier to follow...
  • D3 Background Hash Patterns
    One important style to work with in any cartographic product is the concept of styling no data - or, the absense of data from the map, which can be just as important as the data itself (or themselves). A particular way to showcase no data is using a grayscale color or a pattern that is completely separate from the styles used in the presense of data. In D3 or, rather, SVG, this can be a troublesome task; designing patterns for elements of varying shapes and sizes...
  • Pi Approximation
    Pi appoximation up to 5 decimal places using Sobol low-discrepancy random number generator. D3JS has been used for the animation.
  • Arc Corners
    Coming in D3 3.5, generate rounded arcs with d3.svg.arc cornerRadius and separate adjacent arcs with d3.layout.pie padAngle. The schematic representation above shows the circles used to round the arcs’ corners.
  • D3 Gangnam Style
    A work in progress. A force-directed graph using transforms to move nodes, point-along-path interpolation to move nodes in ellipses, etc...

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