Vijith Assar vijithassar

In The Wall Street Journal Guide to Information Graphics, Dona Wong suggests a clever and unusual algorithm for sorting pie chart segments: the two largest pieces should appear at the top of the chart, on the right and left hand sides of the 12 o'clock position. This aligns the two most consequential data points on either side of a shared vertical axis, allowing for more natural comparison than simply positioning each segment in the original input order.

The pie chart layout generator from d3-shape provides the .sort() method for custom sorting. To implement this segment sort you'll need to provide the complete data set to the sorting function so each value can be situated in context to determine which are the two largest – for example, by closing over it with a factory which returns the comparator function. You could also accomplish the same thing by manipu

Overview

In his influential data graphics text The Visual Display of Quantitative Information, Edward Tufte describes a chart form he calls the "dot-dash-plot" (p.133), which is similar to a scatter plot but also uses each of the chart axes to display a marginal distribution. This is a powerful extension which lets readers quickly interpret the concentration of values along each one-dimensional axis more readily than with the two-dimensional central plot alone.

There are many ways to implement this with D3.js, but one particularly concise and powerful approach is to write the distribution as a secondary chart function which is also an axis. The rendering function can both conform to the reusable charts pattern and also host additional proxy methods which fulfill the API of a d3-axis instance.

This project is written in a heavily annotated style called [literate programming](https://en.

Overview

Detailed graphics present a challenge for hover interactions because small target areas corresponding to individual data points are hard for the user to hit, making it difficult to access additional data revealed through mouseovers. One solution can be to increase the size of the targets such that effectively everything becomes a target, and it is assumed that the user's intention was to hit whichever target is closest to the mouse. The two scatter plots here illustrate the difference between these two approaches; it's certainly much easier to navigate the second.

One popular way to implement this kind of interaction is by overlaying a Voronoi diagram, turning each point into a polygon for the purposes of capturing user interactions. Nadieh Brehmer explains this technique in detail.

However, using a Voronoi diagram significantly complicates the markup of an SVG, which then essentially needs t

Summary

Raincloud Plots, a concise and powerful new way to visualize distributions of quantitative data, were introduced in March 2018 by Micah Allen, Davide Poggiali, Kirstie Whitaker, Tom Rhys Marshall and Rogier Kievit. They combine elements of violin plots and box plots and then aggressively maximize Tufte's "data-ink ratio" to provide multiple ways of viewing the same distribution in a minimal amount of space.

The data is drawn in three different ways simultaneously:

as a curve, which presents a nuanced histogram
as a box plot, marking the 10th, 25th, 50th (aka median), 75th, and 90th percentiles
as raw values,

Literate programming is a software development practice which treats source code like written material intended for humans instead of instructions intended for execution by computers. The most popular modern approach is to embed the source code in Markdown code blocks, surrounded by written explanatory text, comments, and other documentation, and then parse the Markdown before executing or compiling in order to extract only the code portions. In Node.js, one of the cleanest ways to do this is with the lit-node module, which works by adding a hook to the global require() function which is automatically added to the Node.js environment in order to load CommonJS modules, after which Markdown documents can be transpiled on the fly. Unfortunately lit-node seems to conflict with the esm module loader, which means it is not currently possible to use both

Keybase proof

I hereby claim:

I am vijithassar on github.
I am vijithassar (https://keybase.io/vijithassar) on keybase.
I have a public key ASCaCcXHmQwBCbw0IuEbbuWHxFoDXoXl978YKN03AdV0jAo

To claim this, I am signing this object:

Overview

Force-directed positioning based on a physics simulation can help with graph readability because it minimizes node occlusion, but it comes at the expense of precision, because both the X axis and the Y axis are compromised in favor of the simulation. As an alternative, we can position the points in some other fashion, then selectively apply force positioning to declutter the layout in specific regions when the user shifts attention toward them, such as with a mouseover.

This project is written in a heavily annotated style called literate programming. The code blocks from this Markdown document are being executed as JavaScript by lit-web.

Implementation

Setup

Since Mike originally intended the reusable chart pattern as a straw man proposal for further refinement, here's a simple extension which I've found helpful on some recent projects. In addition to the configuration methods, a single multiple-input wrapper method can be defined (it's called .set() in this example) which can then be used to run other individual configuration methods based on an input hashmap which specifies method names and arguments as keys and values. Here, it's used to safely run methods which set size and position attributes for circles and squares which have slight semantic differences (r/cx/cy vs height/width/x/y, respectively) without needing to know which shape it's operating on. This small addition allows for the flexibility and syntactic clarity of the individual methods while also retaining the option for fast one-shot configurations based on a single object.

Terse Configurable Functions

The powerful function configuration methods from the reusable charts design pattern are verbose, but their syntax can be condensed down to a one-liner by combining ES6 arrow functions, ternary operators, expression grouping, and the underscore variable convention for variadic functions. Note that this example will not work in Internet Explorer 11 or below.

Original syntax:

some_function.x = function(value) {
  if (!arguments.length) {
 return x;