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

Hi Friends -

Welcome to the seventy-seventh issue of's Weekly Newsletter

Onwards to this week's links...


  • The DataViz Design Process: 7 Steps For Beginners
    Data visualization requires two skillsets: technical skills to create visualizations in a software program and critical thinking skills to match your visualization to your audience’s information needs, numeracy level, and comfort with data visualization...This post outlines a 7-step Dataviz Design Process. My goal is to give you a behind-the-scenes look into the design process so that you feel armed and ready to begin editing your own charts.
  • An Introduction To D3.js: From Scattered To Scatterplot By Scott Murray
    ~3hr Video Tutorial: Confused by D3? Interested in coding data visualizations on the web, but don't know where to start? This video course will have you transforming data into visual images in no time at all, starting from scratch and building an interactive scatterplot by the end of the session. We'll use d3.js, the web's most powerful library for data visualization, to load data and translate values into SVG elements — drawing lines, points, and scaled axes to label our data.

Data Visualization Reading and Videos

  • Teaching Data Visualization: Recommended Readings And Resources
    I want to share the reading/resource list in a data visualization course; the list breaks into three sections corresponding to three topics in the course: why we need data viz, choosing the right chart, and communicate your message using data viz tools. This list will be a work in progress and all suggestions are welcomed.
  • SVG Tools And Resources to Serve Your Purpose
    In this article we have gathered up a list of SVG Tools and Resources that would make designers and developers work easy and creative. Scalable Vector Graphics (SVG) is an XML-based vector image format for two-dimensional graphics with support for interactivity and animation.
  • Choosing Your Graph Types
    Graphing data is surprisingly difficult. It’s easy to dump data into Excel and create a basic chart. That’s not difficult, and that’s what you’ll see from most people - even seasoned analyts who know how to crunch numbers...But the art of effectively communicating through data visualization is a valuable skill on its own right...Simple graphing also falls under the umbrella of data visualization, and most people don’t give it the respect it deserves.
  • Chart.js - Simple HTML5 Charts Using The <canvas> Tag
    Easy, object oriented client side graphs for designers and developers. 6 Chart types, HTML5 based, Simple and flexible. Chart.js is dependency free, lightweight (4.5k when minified and gzipped) and offers loads of customisation option. Chart.js uses the HTML5 canvas element. It supports all modern browsers, and polyfills provide support for IE7/8.
  • Best Of The Visualisation Web… March 2014
    At the end of each month I pull together a collection of links to some of the most relevant, interesting or thought-provoking web content I’ve come across during the previous month. Here’s the latest collection from March 2014.

D3.js Reading and Videos

  • Transitive.js - Transit Data Visualization
    A tool for generating dynamic stylized transit maps that are easy to understand. Transitive takes in information describing specific transport network elements (routes, stops, journeys) -- typically produced by the OpenTripPlanner Profiler extension -- and produces a schematic map of those elements. Dynamic styling of the network elements allows for interactivity and flexibility in the visual presentation...
  • Playing with REALTIME data, Python And D3
    I am taking a break from my MOOC Aggregator project to play with D3.js and some realtime data. I recently read this great blog post about performing some data analysis with python using the twitter stream and I wanted to take it another step and play with the data in realtime. So instead of dumping the data into mongodb I wanted to fill a queue in order to play with the data as it flows in. I decided to use RabbitMQ as a AMQP provider.
  • SankeyMATIC - A Sankey Diagram Builder For Everyone
    A Sankey diagram depicts flows of any kind, where the width of each flow pictured is based on its quantity. Sankey diagrams can be difficult to produce without specialized software. SankeyMATIC aims to change that. ankeyMATIC builds on the open source tool D3.js and its Sankey library, which are very powerful but require a fair amount of work & expertise to use. SankeyMATIC unlocks the capabilities of the D3 Sankey tool for anyone to use.
  • Fast Interactive Prototyping With D3.js II - Tricks Of The Trade
    We have described in the previous post how we develop interactive prototypes at Snips: we design SVG content in graphical apps like Sketch and script them using d3.js...This approach represents a sweet spot that enable us to quickly develop high-content prototypes, yet gives us all the leeway for complex interaction and animations prototyping...In this post, we list a few tricks that we use when dealing with more complex interactions.
  • The Largest Vocabulary In Hip Hop - Built With D3.js
    Literary elites love to rep Shakespeare’s vocabulary: across his entire corpus, he uses 28,829 words, suggesting he knew over 100,000 words and arguably had the largest vocabulary, ever. I decided to compare this data point against the most famous artists in hip hop. I used each artist’s first 35,000 lyrics. That way, prolific artists, such as Jay-Z, could be compared to newer artists, such as Drake.

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