Functional separation of concerns

Desktop and Android Chrome, FireFox should work fine with current browser releases. Unfortunately, almost a full year after the ES2015 was finalized, IE11 and Safari on any platform still fail to support even the most trivial ES2015 additions. All iOS browsers fail, because Apple prohibits the use of browser engines other than their own.

An ES2015 variant of the small multiples example created by Mike Bostock with the following goals:

1. no data mutation
2. reduced coupling between rendering vs. the data and layout calculations that are invariant of the choice of the rendering substrate (SVG, DOM, Canvas, WebGL etc.)
3. linear data flow
4. some modularization
5. show how ES2015 makes a declarative solution more streamlined

The ES5 version, with lots of comments and all in one file, is here.

The ES2015 version is a particularly good match with D3 - it is more compact because the fat arrow functions, destructuring bind, Object.assign and string templating increase the signal / noise ratio of the code. Best of all, all these should work in reasonably current browsers without transpilation.

The standard style is adopted; the cleaner, more compact ES2015 looks better without semicolons and there’s no fundamental reason for the use of semicolons other than aesthetic preference.

Original forked from mbostock‘s block: Small Multiples III to compare the Local Variables proposal with my preference shown here for avoiding the model / render coupling in the first place.

Minor functional changes that are irrelevant from the viewpoint of the data flow:

• use of a log scale due to the long time period
• instead of [0, maxPrice] the price scale just uses [minPrice, maxPrice] for the domain