vijithassar

!function(t,e){"object"==typeof exports&&"undefined"!=typeof module?e(exports,require("d3-selection")):"function"==typeof define&&define.amd?define(["exports","d3-selection"],e):e(t.d3=t.d3||{},t.d3)}(this,function(t,e){"use strict";var n,o,r,i,d,u,p,a;n="undefined"==typeof SVGForeignObjectElement?"tspans":"foreignobject",o=function(t){var n,o;return o="function"==typeof t,"object"!=typeof t||t.nodeType?!!(t instanceof e.selection||t.nodeType||o||n)||(console.error("invalid bounds specified for text wrapping"),!1):!(!t.height||!t.width)||(console.error("text wrapping bounds must specify height and width"),!1)},r=function(t){var e,n,o,r;for(e=["height","width"],"function"==typeof t?n=t():t.nodeType?n=t.getBoundingClientRect():"object"==typeof t&&(n=t),o=Object.create(null),r=0;r<e.length;r++)o[e[r]]=n[e[r]];return o},i=function(t){var e;return"function"==typeof t?e=t():"number"==typeof t?e=t:"undefined"==typeof t&&(e=0),"number"==typeof e?e:void console.error("padding could not be converted into a number")},d=

vijithassar

demonstration of d3.history, a plugin for D3.js which adds support for deep-linking and URLs based on the user interface state. (To see this demonstration with the URL bar intact, you'll need to open it without the iframe.)

vijithassar

Demonstration of d3-parent, a plugin that makes it easier to navigate around hierarchical selections and adds a more stable API around parentNode.

vijithassar

Demonstration of d3-rect, a plugin which simplifies drawing rectangles using path strings instead of rect elements so their shapes can be interpolated.

vijithassar

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;

vijithassar

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.

vijithassar

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

vijithassar

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:

vijithassar

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

vijithassar

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,