HTML, Javascript, SVG, D3: a foot in the door

This is a 1.5 hour workshop for ResBaz Victoria 2024.

This workshop will provide a first step writing the elements of a web page that can interactively present your data.

Setup

Please download and unzip this ZIP file. It contains a data file needed for the workshop, a copy of D3, and example HTML files.

Please make sure you have a text editor. Some options are VSCode, VSCodium, Geany, Notepad, or nano.

Also please ensure you have an account on github.com, we will use this to put your web page on the web.

Workshop material

Useful resources

The Modern Javascript Tutorial

D3 in Depth book

D3 reference documentation

Mozilla Developer Network

Examples

D3 examples from Observable.

How to Use t-SNE Effectively in the brilliant Distill Journal, and a similar page on UMAP.

Sleepwalk to examine true distances in an embedding like UMAP.

More bioinformatics examples: Degust, Glimma, igv.js, kana

Journalism

Amanda Cox has written many interactive articles. For example this article features animations and reveals details where the mouse is pointing.

The Pudding features a similar style of article.

My own examples

Ghost Diagrams, a tiling pattern app. I wrote this in 2006, it still works.

Dance of the Confidence Intervals illustrates statistical concepts. This has been surprisingly useful for teaching!

Langevitour article in the R Journal about a widget to tour your high-dimensional data.