ungodly cocktail - visualising three editions of raynal’s “histoire” · 2020. 6. 16. ·...
TRANSCRIPT
![Page 1: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/1.jpg)
Ungodly cocktail - visualising three editions of Raynal’s “Histoire”
Geoff HinchcliffeSchool of Art and Design
College of Arts & Social Sciences
![Page 2: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/2.jpg)
The project
![Page 3: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/3.jpg)
Intro & Context
Raynal’s Histoire
Glenn Roe’s project
Diderot contributions
Glenn: “Design an interface…”
![Page 4: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/4.jpg)
Aims
Track and visualise change across editions
An interface for reading & investigation
Show Diderot labelled sections in multi-edition context
![Page 5: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/5.jpg)
Our Approach
Front-end development & design
Sketching in code - investigation & iteration
“Generous Interfaces” (Whitelaw)
Existing code resources & code libraries (strategic bricolage)
![Page 6: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/6.jpg)
Prior ArtLERA Molitor, Ritter et al, Martin-Luther-Universität Halle-Wittenberg
![Page 7: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/7.jpg)
Sketches
![Page 8: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/8.jpg)
![Page 9: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/9.jpg)
![Page 10: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/10.jpg)
![Page 11: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/11.jpg)
![Page 12: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/12.jpg)
![Page 13: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/13.jpg)
Demo
![Page 15: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/15.jpg)
Demo
Addition
Preserved
Deletion
Strong link
Weaker link
![Page 16: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/16.jpg)
Demo
![Page 17: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/17.jpg)
Demo
![Page 18: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/18.jpg)
LIVRE 9: Establissement des Portugais dans le Brésil.
Demo
![Page 19: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/19.jpg)
Workflow
![Page 20: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/20.jpg)
Ingest & Parse
Parse into books > paras
Output as JSON
{ NodeJS, Cheerio parser }
![Page 21: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/21.jpg)
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 }
![Page 22: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/22.jpg)
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 }
![Page 23: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/23.jpg)
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 }
![Page 24: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/24.jpg)
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
![Page 25: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/25.jpg)
Tech
![Page 26: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/26.jpg)
UngodlyCocktail
![Page 27: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/27.jpg)
Reflections
![Page 28: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/28.jpg)
The Browser?
Web UI as dataviz
Dataviz as web UI *
* rather than a discreet figure on a page
![Page 29: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/29.jpg)
The Browser?
Web browser as dev platform
html / css / javascript / …
Fast, cheap, widely supported, generous communities of practice
![Page 30: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/30.jpg)
The Browser?
Accessible, democratic, powerful, ubiquitous, public
![Page 31: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/31.jpg)
The Front-end Fallacy
https://davidmles.com/difference-frontend-backend/ Burns Sheehan UK
![Page 32: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/32.jpg)
data
interpretation
interaction
manipulation
representation
cheeriofuzzyset
diffmatchpatchyear 9 maths
angular jsjavascript
htmlcsssvg
xml / json
web browser
![Page 33: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/33.jpg)
EXPLORATORYINSTRUMENTAL
data
interpretation
interaction
manipulation
representation
![Page 34: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/34.jpg)
EXPLORATORYINSTRUMENTAL
Design AS DHDesign FOR DH
data
interpretation
interaction
manipulation
representation
![Page 35: Ungodly cocktail - visualising three editions of Raynal’s “Histoire” · 2020. 6. 16. · Build Interface 1. Load & render summary data 2. Load & render book-para data on demand](https://reader035.vdocument.in/reader035/viewer/2022071113/5fea1d6ff283a24e20053a40/html5/thumbnails/35.jpg)
Geoff HinchliffeSchool of Art and Design
College of Arts & Social Sciences
Cheers!
http://bit.ly/dha2018-raynal