An implementation of the visualization pipeline

D3.js Charts Library

Design Patterns

Unstructured examples (D3 alternative gallery)
Boilerplate (NVD3)
Inheritance (Rickshaw)
Composition (d3.chart)
Mixin (D4)
Components (Plottable)

Grammar of Graphics

Pipeline
dataset -> variables (e.g., speed) -> transformation (e.g., rank) -> scale (e.g., log) -> coordinate system (e.g., cartesian) -> element and visual attributes (e.g., rectangle, color)

D3 implementation

D3 binds data to graphics by adding a __data__ attribute to DOM objects
dataset: json, array, ajax
variables: lazy accessors
transformation: d3.nest, d3.layout
scale: d3.scale
coordinate system: d3.layout + d3.scale used on accessors
element: DOM elements and attributes (SVG/HTML/CSS)

What could be different

Though D3 is a very clever implementation of the vis pipeline, some alternatives could be discussed
dataset: data manipulation (cleaning, format, validation)
variables: doesn't have to be lazy (e.g. d3.layout; interesting discussion here)
transformation: more consistent data formats (see here)
scale: separate data scaling from view scaling
coordinate system: abstracting SVG and canvas coordinates system; abstraction for polar
element: not tied to the DOM

Assembly implementation

D3 assembles the graphical element on the DOM tree. One way of getting away from the DOM is to use a pipeline pattern.
From Firespray:
    	var pipeline = fy.utils.pipeline(
		fy.setupContainers,
		fy.setupScales,
		fy.setupBrush,
		fy.setupAxisY,
		fy.setupAxisX,
		fy.setupHovering,
		fy.setupStripes,
		fy.setupGeometries
	);

Opportunity with Planet OS charts

Requirements

Links