Skip to content

Instantly share code, notes, and snippets.

Avatar

Jean-Daniel Fekete jdfekete

View GitHub Profile
@jdfekete
jdfekete / README.md
Last active Aug 26, 2015
Simple Reordering example using the HTML Canvas instead of SVG
View README.md

Simple example on how to reorder a table without D3 using the HTML Canvas, which is much faster than SVG.

@jdfekete
jdfekete / README.md
Last active Jul 6, 2021
Matrix diagram that visualizes character co-occurrences in Victor Hugo’s "Les Misérables"
View README.md

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

View README.md
@jdfekete
jdfekete / README.md
Last active Aug 29, 2015
Parallel Coordinate Example
View README.md

Minimalist file showing how to reorder a Parallel Coordinate using reorder.js with https://syntagmatic.github.io/parallel-coordinates/

@jdfekete
jdfekete / README.md
Last active Dec 14, 2015
Antipodal Pairs
View README.md

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.