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

Hi Friends -

Welcome to issue 137 of the Weekly Newsletter.

Onwards to this week's links...


  • The Atlantic Slave Trade In Two Minutes: 315 Years, 20,528 Voyages, And Millions Of Lives.
    This you a sense of the scale of the trans-Atlantic slave trade across time, as well as the flow of transport and eventual destinations. The dots—which represent individual slave ships—also correspond to the size of each voyage. The larger the dot, the more enslaved people on board. And if you pause the map and click on a dot, you’ll learn about the ship’s flag...its origin point, its destination, and its history in the slave trade. The interactive animates more than 20,000 voyages cataloged in the Trans-Atlantic Slave Trade Database...
  • Introduction To D3.js Web Mapping Through 7 Simple Maps
    Listed below are the seven example maps from Rich Donohue's introductory lesson on D3.js, presented at the June meetup of maptimeLEX. You can follow along with the presentation on GitHub to create the maps listed below...

Data Visualization Reading and Videos

  • CartoCSS Tutorial Part 3: What is CartoCSS?
    I’ll be going through how to get started with CartoCSS and Mapbox Studio. I’ll be walking through how to style in CartoCSS with my infamous Roy Liechtenstein tileset...
  • Synchronicity - Sunrise: Sunset
    All Our Suns is a map visualization of photos tagged #sunset and #sunrise uploaded to Instagram in the past 24 hours and updated in real-time. While Instagram users upload photos of the sunset within 4 hours of the sun setting, many Instagram users wait until the end of the day to remiscence about the sunrise. The closer a user is to actual sunset or sunrise time when uploading a photo, the larger the point on the map.
  • Designing Data-Driven Interfaces -  Telling The Story Of Your Data
    “Dashboard”, “Big Data”, “Data visualization”, “Analytics” — there’s been an explosion of people and companies looking to do interesting things with their data. I've been lucky to work on dozens of data-heavy interfaces throughout my career and I wanted to share some thoughts on how to arrive at a distinct and meaningful product...
  • Visual Correspondence - Analyzing Letters Through Data Visualisation
    All of the visualisations available on this site are interactive allowing the user to tailor their queries to their own particular needs. Where the site is particularly useful is in tracking a person’s movements, activity and development over time. Often this allows us to fill in a gap in the record...As well as providing tools to visualise the metadata, in bringing together detail on sender, recipient, place and date for over 76,000 letters...

D3.js Reading and Videos

  • p5/D3 Cookbook - Combining The Power Of D3.js With The Simplicity Of p5.js
    The p5 D3 Cookbook is a repository of documented examples for integrating the features of D3.js into the p5.js library. D3.js offers a wealth of tools for manipulating data and connecting data to visual representations. p5.js, whose goal is to make coding accessible for artists, designers, educators, and beginners, provides a environment where users can sketch their ideas in code. Together, these two libraries can be used for a range of applications from introducing beginners to data visualization to creating canvas-based visualizations that take advantage of D3...
  • d3-react-squared - Lightweight D3 Chart Loader For ReactJS.
    There are already some great solutions out there, combining React and D3...Our approach is not so different: we just keep all the d3 code of a chart in a module (also to have reusable, stateful components), without mixing in react there. This allows us to use most d3 examples on the net directly and also, we can port the d3 charts to other frame works rather direclty. Put differently: we do not mix react and d3 (or as little as possible), so that e.g. interaction designers don't have to think about react-lifecycle hooks etc...
  • Creating A Chart With D3 And TypeScript – Part 1
    This series of articles is basically about creating a JavaScript chart from scratch, using D3 and TypeScript...Through this series of articles, I will try to get you: a) understanding how D3 works and how easy it can be to create simple things, b) seeing an added value in using TypeScript, c) creating a basic build process that will help your development , d)structuring a JavaScript framework, e) and more...

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