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

Hi Friends -

Welcome to issue 90 of the Weekly Newsletter

Onwards to this week's links...


  • Juan Velasco Talks Infographics
    "There is no room for fiction in information graphics." An interview about why we need data vizualisation, what it takes to create great infographics, and what it's like to work at National Geographic.
  • Taxi Techblog 2: Leaflet, D3, And Other Frontend Fun
    This is part 2 of my techblog about NYC Taxis: A Day in the Life. In part 1, I showed how I queried the necessary data, manipulated it a bit, and built a simple node server to supply geoJSON to the client. Now I’ll discuss how I turned that geoJSON into an animated map and associated charts. The code is on github if you want to run it locally.

Data Visualization Reading and Videos

  • Data Visualization 101: The 10 Best Charts For Mobile Screens
    You’re probably already aware that people understand numbers much more easily when displayed in visual form. But what happens when these visuals are reduced to the size of a screen that’s often smaller than the palm of your hand? The precious real estate available on a mobile phone or tablet means that choosing the right mobile data visualization is even more crucial than ever before.
  • Error-Ridden Data Visualizations Become Beautiful Accidental Art
    Kara Woo and Erika Mudrak find beauty in mistakes and curate mathematical mess-ups. The two...realized their interest in errors after Woo tried to visualize some data for a research project she was working on and repeatedly failed...The two then joined forces to create Accidental aRt, a Tumblr highlighting wondrous and beautiful failed data visualizations from around the world
  • Re-using custom graphic archetypes
    One of the (many) things that impresses me most about the quality of data visualisation and infographic output from the leading journalist organisations is the continued variety and innovation of their techniques...Of course, on special occasions, there is a compelling reason to potentially re-cycle previously used graphic archetypes and there was an example of this last week that was both astute and highly impactive.
  • Visual Analytics 101: When To Use Numbers vs. Visualizations
    In its traditional form, data is nothing more than letters and numbers in rows and columns. Bringing that data to life—where it can be sliced and diced, interacted with, and ultimately consumed and understood—has become a science in and of itself. And while our data may begin with raw numbers, today we’ll ask when it should end with numbers and when it’s better to use a data visualization instead.
  • Miso Storyboard.js
    Storyboard.js is a tiny library that allows one to define scenes and then define entry and exit methods for each scenes. As the application progresses based on user actions or a predefined flow, the entry and exit functions execute in accordance with the switching of scenes.

D3.js Reading and Videos

  • Plottable.js
    Plottable.js consists of pluggable set of Components which encapsulate rendering logic, and a layout engine that is responsible for positioning them...Because Plottable handles layout, sizing, and positioning, Plottable charts are easier to create and more reusable than charts built only with D3. And, since Plottable Components are powered by D3, the full flexibility of D3 is still available.
  • Creating Charts With C3.js
    So one of the well known JavaScript library to create all kind of charts is D3.js. This library provided us the option to create a simple line chart with a tooltip that shows some data. So we thought that this would be a good fit for our project and started to create a chart. But wait… I see you thinking.. the title said C3.js and now you’re using D3.js?! Keep on reading to find out why!
  • Qlik Sense Extension – Network Diagram
    I built my first Qlik Sense Extension using code from an old network visualization I put together with d3js. The extension is not the best general, all-purpose extension, but it’s a good starting point for anyone needing to build a network diagram. It includes examples of interactive components in d3 – you can hover over the nodes to brush the graph. This implementation highlights both directly neighboring nodes and second-degree neighboring nodes...
  • How To Combine D3 With AngularJS
    As we all know, Angular and D3 frameworks are very popular, and once they work together they can be very powerful and helpful when creating dashboards. But, they can also be challenging and confusing especially when new to these frameworks. The right way to incorporate D3 with Angular is to use custom directives. Directives in Angular are essentially functions that are executed on a DOM element. Let’s go through a simple example together.
  • Markov Chains
    A visual explanation of Markov Chains by Victor Powell with text by Lewis Lehe...Markov chains, named after Andrey Markov, are mathematical systems that hop from one "state" (a situation or set of values) to another...Built with Angular & D3.js...

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