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

Hi Friends -

Welcome to issue 94 of the Weekly Newsletter

Onwards to this week's links...


  • Data Visualization In Games
    Games, at their core, are all about learning: spatial, temporal, motor, and sometimes even intellectual. You learn how to play within a game's rule-set, and to improve you learn....Data visualization provides a way to aide in the learning process; to keep games fun. If the game is no longer fun, data visualization can also be used to provide other motivators to play.
  • New D3.js Book: Mastering D3.js
    Starting with the reusable chart pattern, we will take you through designing and creating complex, real-time data visualizations...You will learn how to create reusable D3-based charts and integrate them into data visualization projects. You will get to know how to create and distribute a custom charting package. You will get acquainted with how to integrate D3 with mapping libraries to provide reverse geocoding and interactive maps.

Data Visualization Reading and Videos

  • Talking With... Eva Constantaras
    Eva currently...the Internews Data Journalism Advisor and specializes in cross-border journalism projects to combat corruption and encourage transparency...we had the opportunity to ask her a few questions about the state of data journalism, Internews activities and the growth of the Open Data community...
  • False Visualizations: When Journalists Get Data Viz Wrong
    Last week, the article The Truth about the Ice Bucket Challenge by Julia Belluz on Vox Media included the infographic, Where We Donate vs. Diseases That Kill Us, that used proportionally sized circles as its data visualization. The problem with this design is that the circle sizes don't match the values shown. This is a false visualization and significantly exaggerates the smaller amounts of money contributed to each charity and the deaths attributed to each cause.
  • US Population Trends Over The Last 220 Years
    A cartogram is a map in which a variable of interest (e.g. population, income) is substituted for area. In this case, we've taken the population of each US state as determined by the census, conducted every decade. The animation below illustrates high-level trends that have happened in the United States over its lifetime, such as a general migration westward....
  • Git Live
    Git Live is a visualization of collaboration and interaction on GitHub. It uses the GitHub Events API and the Google Maps API to map interactions between people around the globe in real-time. Git Live tracks several different types of activities: issues, pull requests, forks, and stars. To see the details of what people are up to, you can move your mouse over the circles, and you'll get something that looks like this...
  • 38 Maps That Explain The Global Economy
    There's no better way to depict those interactions and the social and political circumstances that give rise to them than with a map or two. Or in our case, 38. These maps are our favorite way to illustrate the major economic themes facing the world today...The overall portrait that emerges is of a world that's more closely linked than ever before, but still riven by enormous geography-driven differences.

D3.js Reading and Videos

  • TechanJS
    A visual, technical analysis and charting (Candlestick, OHLC, indicators) library built on D3. Build interactive financial charts for modern and mobile browsers...
  • Two Reusable Line Components For D3 Charts
    In this article I’m going to create two simple, reusable D3 components for adding line annotations to charts. One of the things I appreciate most about D3 components is that, regardless of the complexity of the component itself, adding one to a chart is typically a really simple process, and these components will illustrate that elegance...
  • Adding Some D3 Magic To AngularJS
    In this tutorial I’m going to show you how you could combine AngularJS and the D3 framework...For this tutorial I’m going to use four frameworks: D3: Drawing a chart, AngularJS: Model-View-Controller, LoDash: Utilities Twitter Bootstrap: User interface, as well as using Bower to load my dependencies...
  • Animating Maps With D3 And Topojson
    An easy, lightweight path-animation technique inspired by the NYT...Last year the New York Times interactive news team came up with a clever idea how to make SVG maps move. In their The Russia Left Behind feature they created a path of the railway between Moscow and St. Petersburg that gets filled with color as we scroll through the the page....I decided to find out how the New York Times feature was made to see if I could use the same approach....
  • Color Legend With Dynamic Pointer: Demo
    This is a demo of a dynamic axis component for D3 that generates a color legend for numeric to color scale. Hover over the circles to see the pointer in action. The circles are just some random data so you can see how the axis works. Source and Documentation on Github...

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