Data Visualization and D3.js Newsletter Issue 177

DashingD3js.com Weekly Data Visualization and D3.js Newsletter

Hi Friends -


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

Onwards to this week's links...
 

Featured
 

  • Sorting
    SORTING is an attempt to visualize and help to understand how some of the most famous sorting algorithms work. This project provides two standpoints to look at algorithms, one is more artistic..., the other is more analytical aiming at explaining algorithm step by step...Sorting was born to create visual representations of sorting algorithms with the hope of finding visual patterns. It turned out that the visual footprints of algorithms are unique and differ from each other and they look gorgeous...
  • Using Ember Charts To Integrate D3.js Into Your Ember App
    Recently, while working on an Ember application with a Rails API back end, I wondered how difficult it might be to incorporate D3.js for a data visualization feature. So, I started googling, and came across the Ember Chart library from Addepar. And, with only a small amount of hacking, I was able to get it working...Since I encountered a few significant "gotchas" while working with the Ember Chart library, I thought I'd write up my implementation, including work-arounds...
 

Data Visualization Reading and Videos
 

  • All The 'Six Question With...' Interviews In One Place
    I've been doing a few interviews with various professionals from data visualisation and related fields. These people span the spectrum of industries, backgrounds, roles and perspectives. I gave each interviewee a selection of questions from which to choose six to respond. The title of the series is therefore 'six questions with...'. For convenience, here is the full collection of the interview posts so far, which will be completed in time for the release of my book at the end of May...
  • Caravel
    Caravel is a data exploration platform designed to be visual, intuitive and interactive...Caravel provides: a) A quick way to intuitively visualize datasets by allowing users to create and share interactive dashboards, b) A rich set of visualizations to analyze your data, as well as a flexible way to extend the capabilities, and much more!...
  • When(ish) is My Bus? User-centered Visualizations of Uncertainty in Everyday, Mobile Predictive Systems
    Users often rely on realtime predictions in everyday contexts like riding the bus, but may not grasp that such predictions are subject to uncertainty. Existing uncertainty visualizations may not align with user needs or how they naturally reason about probability. We present a novel mobile interface design and visualization of uncertainty for transit predictions on mobile phones based on discrete outcomes...
  • Speed Limit Map Berlin /// Mapping The Speed Of The City
    Cities are built on networks of streets that move us through urban space, while also providing spaces for us to shop, hang out and observe. In today’s world however, the history and nature of the street is closely tied to the automobile...With this in mind, I wanted to see how the Berlin was organized based on its speed limits. I drew the following map of Berlin’s street network...
  • vizflow - An ES6 Interactive Visualization Engine
    vizflow.js - a render-loop library written using EcmaScript.6 (ES6) with no other external dependencies. Vizflow is a light-weight library for adding transition effects and interactive visualizations to HTML5 documents with a simpler design compared to other popular interactive visualization libraries like D3js...Instead of focusing on specific applications such as data visualization, it only provides an engine for running animations, transition effects, simulations, games, etc., depending on the application...
 

D3.js Reading and Videos
 

  • Directed Graph Editor
    Click in the open space to add a node, drag from one node to another to add an edge...Ctrl-drag a node to move the graph layout...Click a node or an edge to select it...When a node is selected: R toggles reflexivity, Delete removes the node...When an edge is selected: L(eft), R(ight), B(oth) change direction, Delete removes the edge...
  • 2015 NYC Yellow Taxi Trips
    Click on the map to see the most common destinations for trips originating from that point. The histogram below shows trip frequency by hour of the day for all trips leaving the origin. Hover for details. Powered by open data found here. Over 77 million taxi trips from January to June 2015...
  • Responsive D3.js
    Q: Is it possible to create a scatter plot that is a pleasure to navigate on both a phone and a computer?..A: Yes, with some caveats...Using D3.js, Zoom Behavior, and D3-tip, I’ve created a graph that works reasonably well on both a phone and a computer...
  • Latin Squares Visualizations
    Once you translate your puzzle into an exact hitting set problem, you can begin using well known algorithms to analyze them. (For example, Dancing Links and Algorithm X.) The giant constraint matrices can be hard to grok so I created three visualizations of a 4x4 Latin Square. All three are linked to the same model — hovering over a cell in one will show the same cell in each of the others...
  • State Of The Weather
    You can use the following visualization to see changes through time in American weather. You can view the average temperature, maximum average temperature, minimum average temperature, average precipitation level and the average drought level for every state in the contiguous United States. The strip charts below each line chart show anomalies from the historical averages for the chart above it. Data ranges from 1895 to 2016, depending on the state. Hover over or swipe a graph to see details for that state and month...

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