Ungodly cocktail - visualising three editions of Raynal’s “Histoire”

Geoff HinchcliffeSchool of Art and Design

College of Arts & Social Sciences

The project

Intro & Context

Raynal’s Histoire

Glenn Roe’s project

Diderot contributions

Glenn: “Design an interface…”

Aims

Track and visualise change across editions

An interface for reading & investigation

Show Diderot labelled sections in multi-edition context

Our Approach

Front-end development & design

Sketching in code - investigation & iteration

“Generous Interfaces” (Whitelaw)

Existing code resources & code libraries (strategic bricolage)

Prior ArtLERA Molitor, Ritter et al, Martin-Luther-Universität Halle-Wittenberg

Sketches

Demo

Demo

Demo

Addition

Preserved

Deletion

Strong link

Weaker link

Demo

Demo

LIVRE 9: Establissement des Portugais dans le Brésil.

Demo

Workflow

Ingest & Parse

Parse into books > paras

Output as JSON

{ NodeJS, Cheerio parser }

Match Text

Find matches between 1770-1774, 1774-1780

Identify best-scoring match for each paragraph

Save indexes & score for each paragraph

Output as JSON

{ NodeJS, Fuzzyset.js }

Alignment & Layout

Filter connections to > 0.35 match

Build grid of paragraphs

Class paragraphs as insertion, deletion, match

Embed text & match scores into data

Output as JSON (book-paras data)

{ NodeJS }

Build Summary

Analyse book-paras data

Tally text lengths per book

Tally total inserted / deleted paras for each book

Tally average match score

Output as JSON (summary data)

{ NodeJS }

Build Interface

1. Load & render summary data

2. Load & render book-para data on demand

Render para joins on demand { SVG+Angular }

3. Render paragraph on demand

Render text diffs on demand

{ AngularJS, HTML, CSS, diff_match_patch.js }

1

2

3

Tech

UngodlyCocktail

Reflections

The Browser?

Web UI as dataviz

Dataviz as web UI *

* rather than a discreet figure on a page

The Browser?

Web browser as dev platform

html / css / javascript / …

Fast, cheap, widely supported, generous communities of practice

The Browser?

Accessible, democratic, powerful, ubiquitous, public

The Front-end Fallacy

https://davidmles.com/difference-frontend-backend/ Burns Sheehan UK

data

interpretation

interaction

manipulation

representation

cheeriofuzzyset

diffmatchpatchyear 9 maths

angular jsjavascript

htmlcsssvg

xml / json

web browser

EXPLORATORYINSTRUMENTAL

data

interpretation

interaction

manipulation

representation

EXPLORATORYINSTRUMENTAL

Design AS DHDesign FOR DH

data

interpretation

interaction

manipulation

representation

Geoff HinchliffeSchool of Art and Design

College of Arts & Social Sciences

Cheers!

http://bit.ly/dha2018-raynal