Simple example on how to reorder a table without D3 using the HTML Canvas, which is much faster than SVG.
Jean-Daniel Fekete jdfekete
Source: The Stanford GraphBase
A network can be represented by an adjacency matrix, where each cell ij represents an edge from vertex i to vertex j. Here, vertices represent characters in a book, while edges represent co-occurrence in a chapter.
Given this two-dimensional representation of a graph, a natural visualization is to show the matrix! However, the effectiveness of a matrix diagram is heavily dependent on the order of rows and columns: if related nodes are placed closed to each other, it is easier to identify clusters and bridges.
This example lets you try different orderings via the drop-down menu. This type of diagram can be extended with manual reordering of rows and columns, and expanding or collapsing of clusters, to allow deeper exploration. Jacques Bertin (or more specifically, his fleet of assistants) did this by hand with
Example to reorder a Parallel Coordinate using reorder.js with https://syntagmatic.github.io/parallel-coordinates/
Minimalist file showing how to reorder a Parallel Coordinate using reorder.js with https://syntagmatic.github.io/parallel-coordinates/
D3 plugin to compute antipodal pairs of a convex polygon, as well as its diameter. Useful for several things. In particular to align a graph along its longest axis.