This page is designed to generate "Small Multiples with Gaps" layouts.
That is, an arrangement of cells, where each cell maps to an input point or region in a 2D distribution or map.
Most items have been annotated, but here follows a quick introduction to the general intended work flow.
The left-hand side contains various settings and controls to load data and compute SMWGs for it on various grids.
At the top of the middle column, the loaded input map or distribution is drawn.
Directly below it, is an area where information of the scripts is printed.
Finally, the middle column contains some options to obtain many SMWGs using batch computation.
At the top of the right column, the chosen grid and the layout are visualized using shaded cells.
Directly below it, the computed assignment is printed.
The general work flow for computing SMWGs focuses on the left-hand-side column. Generally, you may want to take the follow steps.
Load a map or distribution under "Map settings".
Choose an appropriate grid under "Grid settings". Note that some initialization is done after both a grid and a map are loaded (or one of these is changed); this may take some time.
Click "Compute LP assignment" to compute the best solution under the Displacement metric. Often, this produces quite a good result!
Click "Run Simulated Annealing" to compute the best solution under the Shape metric. This is mostly relevant when there are some gaps in your layout, but you're not happy with the shape produced by the previous step.
You can also try different metrics by opening the "Metrics" part and changing the weights.
MAP SETTINGS
Details
Input distributions (maps, or otherwise) can be loaded by providing an appropriate file.
The file format is GeoJSON (for geographic maps) or TSV (for point-based distributions).
The Width/Height/Color fields (marked with **) are optional and used to replace the simple gray shading in the SMWG with a rectangle reflecting some data values.
Alternatively, one of several predefined maps can be used.
.geojson:
The topology is automatically derived, but a custom topology can be provided as well.
The fields labeled * have no effect.
.tsv:
No topology is derived, but a custom topology can be provided.
The fields labeled * are mandatory, and ask for column names in the TSV file.
The "Square" option maintains a uniform scale for X- and Y-coordinates.
Topology:
You can specify a custom topology by using a .tsv file (without headers!) such that each row contains at least two entries.
The first two specify the labels of two adjacent regions or points.
The optional third entry specifies a strength of the connection; if omitted, this value defaults to 1.
The "Min strength" field allows you to filter the topology, maintaining only those with at least the specified strength.
Note: this code runs fully client-side: your files will not be uploaded to the server!
Predefined
File
Label
Square*
X*
Y*
Width**
Height**
Color**
Topology
Min strength
GRID SETTINGS
Details
The grid can be set in two different ways. Either by simply configuring its number of rows and columns, or by computing the number of cells necessary to obtain a given level of whitespace.
For the latter, there are again options of how to control for the aspect ratio of the resulting grid.
There are also several advanced options.
We recommend leaving these settings as is, not all of them have been thoroughly tested (especially different grid shapes).
Columns
Rows
Whitespace
AR control
Adv.
Shape
Cell aspect ratio
Cell size
Grid aspect ratio
Min AR slack
LAYOUT
Details
Below are two methods for computing a layout from scratch.
There are also a few methods of changing the layout after one has been created.
You can click cells in a layout to swap their assignment (e.g. to get a nicer shape) and then optimize the assignment to these cells for Displacement using "Shuffle: LP".
Simulated-annealing settings
Initialization
Rounds
Tempscale
Hillclimbing
HC time (sec)
Invariance opt
Maintain best
Runs the Simulated Annealing method with the loaded, using the specified metric weights (see "METRICS").
Computes the Linear Programming result, optimizing Displacement.
Changing layouts
Perform additional hillclimbing, towards a local maximum.
As "Compute LP assignment", but now only using the cells that are currently assigned.
As the above, but now using squared geodesic distances
rather than squared Euclidean distance.
Load layout
File
Label
Column
Row
Keep grid
Loads a layout from a .tsv file, using the indicated column names.
Defaults are set to work with assignments produced by this software.
Analysis
(Re)measure the current input.
(Re)measure the current assignment.
(Re)prints the current assignment.
VIEW CONTROLS
Below are some controls over the map, grid, assignment rendering and annotations.
METRICS
Details
Below you can control which metrics to measure (checkboxes) and
the weighting for optimization (numbers). Clicking on the category
label toggles all simultaneously. If you click a metric name while
holding alt, it is added as a new measure to the batch optimizations.
If you hold down shift, it is appended as an additional criterion for
the last optimization.
Note: you cannot disable the "Displacement" metric, as it is used internally for various purposes.
SCRIPT OUTPUT
ASSIGNMENT TSV
BATCH COMPUTATION
Run a batch computation using the settings as configured,
producing a zip file of the results that can be used with the data explorer.
Maps
Whitespaces
Trials
Optimization
Time cap (mins)
First new
Square grids
Batch output:
ABOUT
This page and its code are supplementary material to the paper "Small Multiples with Gaps", published in the TVCG proceedings of IEEE VIS 2016.
This code is released under the LGPLv3 license.
This code gratefully makes use of
jsLPSolver (MIT licensed) for solving linear programs,
JSZip (dual licensed under MIT and GPLv3, used under MIT license) for packaging the output files of batch computation,
and D3 (licensed under 3-clause BSD) for various DOM manipulations and SVG interactions.