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

Hi Friends -

Welcome to issue 173 of the Weekly Newsletter.

Good News Everyone! has shifted to a D3.js Screencast Video Tutorial Website.  What does that mean?  It means that I'll be constructing/adding new video tutorials on a weekly basis (1 in 3 will be free).  Which means two things. :)  1) All of you should go an subscribe here -> and 2) If you have any questions or things you want explained about D3.js, reply to this email and over the next couple weeks/months, I'll answer your questions with a short (5-6 minute) video.

So again check out the D3 Screencasts:
D3 screencasts (1 in 3 are free) =>
Sign up today !! =)  =>

Onwards to this week's links...


  • Poemage: Data Visualization for Poets with Miriah Meyer and Nina McCurdy
    We have Miriah Meyer and Nina McCurdy on Data Stories for a project episode about the lovely Poemage, “a visualization system for exploring the sonic topology of a poem.”...Miriah and Nina worked hand-in-hand with a group of poets to design a tool that visualizes a poem and, as such, provides inspiration for interesting poetic structures and solutions...On the show we talk about how they derived phonological information from text, how the project evolved, and how data visualization tools can be designed to support creativity...
  • A Simple D3 Plugin
    D3 plugins are a integral part of the soon to be released D3 v4. Now, rather than having to include the all of D3, it is possible to pick and choose the bits of the framework that you want to use, and ignore the rest...Moreover this lets you create charts that can be versioned and distributed through package control. Awesome!..Since the current javascript modus operandi is to modularize as much as possible, lets modularize the most familiar part of any D3 chart...

Data Visualization Reading and Videos

  • How To Display Data By Color Schemes Compatible With Red-Green Color Perception Deficiencies [PDF]
    The use of color is [generally] required in order to display multidimensional information. In addition, color encoding a univariate image can improve the interpretation significantly. However up to 10% of the adult male population are affected by a red-green color perception deficiency which hampers the correct interpretation and appreciation of color encoded information. This work attempts to give guidelines on how to display a given dataset in a balanced manner. Three novel color maps are proposed providing readers with normal color perception a maximum of color contrast while being a good compromise for readers with color perception deficiencies...
  • PolicyViz Podcast Episode #35: Irene Ros
    If you haven’t heard, OpenVisConf 2016 is right around the corner (April 25-26 in Bostom). In its 4th year, OpenVis Conf is a two-day, single track conference centered around the practice of visualizing data on the web. The conference features some of the best folks in the fields of data visualization, information design, data analysis and implementation using the best open web technology. In this week’s episode of the podcast, I welcome Irene Ros, information visualization researcher and developer at Bocoup, and primary (though not only) organizer of OpenVisConf. In this week’s episode, Irene and I talk about the open web, Bocoup projects, and, of course, OpenVisConf...
  • How To Advocate For Data Throughout The Project Process
    If you’re building interactive data visualization projects as an individual creator or in a small team (2 to 4 people), you may be able to conceive, design, and build projects without too much explicit process or documentation. But if you’re building visualization projects with a larger team, and especially if you’re doing it for external clients, how can you make sure that all data-related concerns are successfully carried through the project?..
  • Little Boxes
    Would the field of data vis benefit from a clear line between art and design, as Lisa C. Rost suggests (see also the follow-up post)?..This debate has been around for a while (see e.g. Lev Manovich’s Info Aesthetics, The Manifesto debate, the Cargo Cult debate, Jorge Camoe’s attempts, but also helpful papers like “The Role of Design in Information Visualization“ etc) and of course, there is a literally a century of discourse on art and design in other fields as well...Here’s my [Moritz Stefaner] take:...
  • VizioMetrics
    In science, we formally communicate through published papers, books and conferences proceedings...In this project, we focus our efforts on the figures and images. These information dense objects are largely ignored in scientometrics yet they are many times the cornerstone of a paper...Our data for this research project comes from several sources. Currently, the prototype includes more than 8 million images from PubMed Central. We plan to add other data sets as they become available...

D3.js Reading and Videos

  • Using D3.js With Animations In React
    It was easy to find examples of ready-made React D3 components, but they didn't sit right with me - all they tend to do was to put the D3 code in a thin React wrapper and pretend the problem doesn't exist. As long we don't do anything else in React space then things will kind of work...First off - here's the final result! The chart in the iframe below (standalone here) is rendered in React, the animations are done in JSX space, and only tiny tweaks to the D3 code was needed...You can read the source code here, but here's a walkthrough of the general idea...
  • d3-iconarray: A D3 Plugin Targeting V4 Helping You To Draw An Array Of Icons
    d3-iconarray - A D3 plugin targeting V4 helping you to draw an array of icons...Why?..There are two parts to this plugin. First a layout which will assign x,y coordinates to elements of an array given some parameters. Second a scale which will put regular breaks in the array of icons to aid legibility...
  • Swarm Simulation
    This d3.js app uses a few simple rules to simulate swarming behavior: swarmers (points) attempt to maintain fixed distances from, and match velocity to, their neighors...
  • Radviz In D3.js
    What is Radviz? [Radviz Screenshot] Here's a definition, taken from this excellent article: Radviz, described in this article, attaches to each data point fixed springs each of which is also attached at points around a circle. The springs represent dimensions of the data. The data points are displayed at the position where the sum of the spring forces is zero. The spring force K for each spring is the value of the data point for that dimension...
  • Exploring The Web Audio API With D3
    HTML5 adds a lot of new features for developers to make use of to build rich web applications. One of these is the Web Audio API – not to be confused with just the
    element – which allows access to raw audio data. This data can then be analysed and visualised through the HTML5 canvas or using charting libraries like D3...

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