jstcki

A little experiment to see if animating >500 SVG path elements really puts us in the "middle of screwed-up country" as Dominikus Baur puts it in his excellent write-up about the OECD Better Life Index HTML5 implementation.

jstcki

Filtering items in a grid layout with a fixed amount of columns and rows.

jstcki

Filtering items in a grid layout.

jstcki

Grid layout in combination with multi-dimensional sorting using d3.comparator.

jstcki

Grid layout demo.

jstcki

Indented tree layout demo.

jstcki

When creating a polylinear time scale, the tricky part is to know to which value in the range the intermediate dates should map.

Let's say we want to "zoom in" on 4 particular days and make them appear with the size of 10 days each. Because these days now take up more space (36 or (factor - 1) * n), we need to create a linear time scale where the domain ends at 36 days later than we want to show. This scale is then used to determine the intermediary range values of the polylinear scale.

jstcki

A D3 ZIPScribbleMap of Switzerland (with a hint of zipdecode).

Inspired by Ralph Straumann's map.

Data from GeoNames.

jstcki

A minimalistic zipdecode for Switzerland.

Also see Mike Bostock's version with cross-fading canvas elements.

Data from GeoNames.

jstcki

require("http://d3js.org/d3.v3.js");

var data = [{"id":"ARE","pop":7890924,"country_name":"United Arab Emirates"},
{"id":"ARG","pop":40764561,"country_name":"Argentina"},
{"id":"AUS","pop":22620600,"country_name":"Australia"}];

// How many items are in the data?

var dataCount = data.length;