Data Visualization and D3.js Newsletter Issue 208

DashingD3js.com Weekly Data Visualization and D3.js Newsletter

Hi Friends -


Welcome to issue 208 of the DashingD3js.com Weekly Newsletter.



4 years!  In the blink of an eye and here we are. 208 weeks of looking at amazing things created by you (and others) and sharing the ones that moved me the most. Thank you. Keep being you - you're the best!

 

Onwards to this week's links...
 

Featured
 

  • Film Money - A Data Story
    Films cost money. However, they hope to make that money back and often do. When they do, it can be a lot and when they don’t it can be bitter...This visual story shows the ups and downs (or rather rights and lefts) of the film business, portraying a handful of stories, surprises and failures. Just keep on scrolling...
  • D3 in Depth - Scale functions
    D3 in Depth aims to bridge the gap between introductory tutorials/books and the official documentation...It focuses on version 4 of D3...This chapter focuses on Scale Functions...Scale functions are JavaScript functions that: a) take an input (usually a number, date or category) and b) return a value (such as a coordinate, a colour, a length or a radius)...They’re typically used to transform (or ‘map’) data values into visual variables (such as position, length and colour)...
 

Data Visualization Reading and Videos
 

  • The NYT Election Map
    I am a huge admirer of the New York Times graphics team and their cartographic work but this map, I'm afraid, contributes to the misinformation that has become so toxic this election season. Let's not worry about the periphery because it's the main map that takes centre-stage. It's that image which is defining and the impression that people see...So what do they see? RED...lots of red. Any map that attempts to summarise a sparsely populated data set into a surface that exhausts space will mislead. It's inevitable...
  • Drawing With Numbers
    I have...become deeply interested in generative art. How numbers can be governed to create visually interesting works, with seemingly complex but gratifyingly simple sets of rules...I can’t draw, but I can tell computers to draw for me...
  • What would Aristotle say about data stories?
    This series humbly looks up to Aristotle asking him how his principles of storytelling (plot, character, thought, diction, song and spectacle) can be applied to, and potentially enhance, data visualisation. After a brief introduction in the last post let’s put some feathers on the bird by looking at Aristotle’s first principle: Plot...
  • Colors of the Rails - Every color of every line of every metro system
    When a map is created for a metro, subway, or raid transit system, colors are assigned to each line for identification. After creating the Global Subway Spectrum a few years ago which catalogs all these colors, I wanted to revisit the idea and create something new with updated data that transit fans like myself would enjoy hanging on their wall...The result is Colors of the Rails...
 

D3.js Reading and Videos
 

  • Dominant Baseline Style
    Demonstrates the effect of dominant baseline for each of its possible values on text positioning in an SVG...Each browser/ mobile browser seems to handle these a bit differently...
  • Encoding Values As Circles
    This gist demonstrates why it's a mistake to linearly map a data value to a circle radius...Notice that in the first example, while 50 is only 2 times smaller than 100, the circle that encodes the value 50 is 4 times smaller than the circle that encodes the value 100. Even worse, while 10 is only 10 times smaller than 100, the circle that encodes the value 10 is 100 times smaller than the circle that encodes the value 100!...The occurrence of this mistake stems from 2 factors...
  • Sol LeWitt's Wall Drawing 614 with D3.js Treemap and Randomization
    Make Your Own Sol LeWitt Wall Drawing 614: Sol LeWitt is a conceptual artist who typically produced directions for producing a piece of art. Those ideas are the art itself.I made a standalone version with 40 rectangles and 15px wide bands. This was made with D3.js Treemap and randomly-generated data...I thought it would be a fun learning experience to make it customizable with user inputs, so I made it possible for users to change the number of rectangles and the width of the bands and see the differences in real-time...
  • d3-cloud - Create word clouds in JavaScript
    This is a Wordle-inspired word cloud layout written in JavaScript. It uses HTML5 canvas and sprite masks to achieve near-interactive speeds...See here for an interactive demonstration along with implementation details...

Hope that you had a great past week and that next week is even better!

Wishing you the best, 
Sebastian Gutierrez
@DashingD3js
www.dashingd3js.com

Want to better understand this topic?
Check out these super-useful D3.js Screencast Videos (1 in 3 are free...)
=> D3 Screencasts Videos