living-with-machines / accidents-interactive Goto Github PK

• Change comment header to 'On an accident reported on [newspaper date], a Zooniverse volunteer commented'

Including all requirements, all notebooks must be fully offline.

Dependencies

• https://cdn.jsdelivr.net/npm/[email protected]/dist/htl.min.js [1 ,2, 3]
• https://cdn.jsdelivr.net/npm/[email protected]/moment.js [3]
• https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/dist/plot.umd.min.js [3, 4]
• https://cdn.jsdelivr.net/npm/@observablehq/[email protected]/dist/inputs.min.js [3]
• https://cdn.jsdelivr.net/npm/[email protected]/dist/d3.min.js [3, 4, 5]
• https://cdn.jsdelivr.net/npm/[email protected]/lodash.min.js [3, 4]

Due to the responsive design, hard-coded pixel values (like here, here, and potentially even here) are not recommended, and need to be changed.

Solution

• Change hard-coded pixel values to rem, vw, or vh CSS values.

Showstopper

• Buttons on bottom of screen
• "About an accident reported on..." (not "On an accident reported")
• all hrefs are correct

Nice to have

• Make touch to explore button bigger - maybe?
• headline + body text (ex. We asked online volunteers)
• "Where do you think more accidents happened" instead of "Accident sites" header + "Tap a decade" bolded
• Set a max-height on accident comment
• Remove hr + Zooniverse volunteer attribution after comment
• Add graphic to first screen
• Add timer that resets to / at a given timeout.
• Color scheme on accident sites: different colors for different sites

Test

• Dropdowns
• Font is correctly set

I hope people enjoy this one!

It’d be great if we could list all the sites on the page so people have more chance of guessing things right. Ideally also with a version of the explanatory text from the Zooniverse task?

MANUFACTURING: including factories, mills, workshops, works
EXTRACTIVE INDUSTRY: including mines, quarries, pits, collieries
RAIL: all railway-related locations including train stations, track, rail yards
ROAD: all road-related locations and machines including trams, steamrollers, bicycles
WATER TRANSPORT: all inland, coastal and marine locations including ports, docks, canals, rivers
DOMESTIC: including houses, yards
AGRICULTURAL: including farms
AIR: including balloons, aeroplanes
OTHER

There was also 'not enough information to know'.

Software

• Remove selection when holding finger on text for a longer period of time
• What does it look like when you hold the back button (or, similarly albeit differently, hesitantly press)
• Add a credits/about screen
  • Add thank you to Zooniverse contributors on credits/about screen. (See related issue)
• An explanation of what you’re looking and clicking at might be nice
• Add timeout on inactivity / add a countdown timer that re-initiates on activity and, when timing out, takes user to root of website
• Ensure the script can handle clear file paths to datafiles (for ease of exchange)
• Add graphic to first screen
  • Options can be found on britishlibrary‘s Flickr account + by searching for machine there
• change commentID 3900642 to "This page is a feast. First a servant putting coal on a fire was severely injured by an explosion - perhaps caused by unexploded dynamite inside a shot hole in a piece of coal. Second, 2 passengers survived unharmed in the flight of a balloon which had a continuous series of near-fatal accidents. Third, survivors of the sinking of the SS America were shipwrecked again in the SS Senegal on Gran Canaria."
• Set and add colour scheme on accident sites with different colours for different sites
• Add ability to view accident sites by location by decade
• Add ability to view victim age and gender by decade + by location

Data

• https://github.com/alan-turing-institute/Living-with-Machines/issues/3041
  • see related issues Create a Find Stories II workflow, Find industrial accidents, Details about industrial accidents, Create a new subject set

Hardware / Leeds installation

• If possible, attempt to adjust the brightness. It's awfully hard to read on the monitor the way it is currently.
• Ensure Rick has a start-up script that starts the webserver in the right location and opens Chrome in kiosk mode

Current text:
Where did newspapers report accidents involving machinery? We asked online volunteers to tag articles from selected regional newspapers. Explore our early results.

Change to:
Where did newspapers report accidents involving machinery? We asked online volunteers to tag articles from selected regional newspapers. Explore the results.

Find stories about industrial accidents

https://www.zooniverse.org/lab/9943/workflows/12264
Call to action: classify type of accident - industrial, transport or other, and optionally 'Draw an outline around each article that mentions a specific accident involving machinery.'
Images retired: 1,099 / 1,099
Subject set: mini_003 (#79477)

Accident victim age and gender

https://www.zooniverse.org/lab/9943/workflows/18831
Call to action: 'how many specific victims are mentioned' etc
Retirement limit: 2
Images retired: 1,794 / 1,794
Subject sets: Dynamic set accidents for workflow 21525 (#105221); SingleArticlesMentioningAccidents (#78831); Subset of Accidents II (#102701) and Accidents II - engine (#102709) (#103618)

Record details about industrial accidents

https://www.zooniverse.org/lab/9943/workflows/21525
Call to action 'Where did accidents involving machinery happen?'
Retirement limit: 4
Images retired: 1,794 / 1,794
Subject sets: Dynamic set accidents for workflow 21525 (#105221); SingleArticlesMentioningAccidents (#78831); Subset of Accidents II (#102701) and Accidents II - engine (#102709) (#103618)

Find stories about accidents involving machinery

Find stories about accidents involving machinery #20921
Call to action: 'Do one or more articles in this image mention a specific accident involving machinery?'
Retirement limit: 5
Images retired: 2,405 / 2,405
Subject sets: Accidents II (#102701); Accidents II - engine (#102709)

Find stories about industrial accidents II #16931

Blank workflow, used for testing

Text tweaks (I'll do a pull request to make the changes)

Original text:
Who was affected by accidents?
Who was affected by accidents involving machinery? We gathered data via a crowdsourcing task to plot age and gender distributions.
Press different decades above to see different results.

Potential update:
Who was affected by accidents involving machinery?
We asked online volunteers to note the age and gender of people mentioned in newspaper articles about accidents involving machines.
Tap a decade to see sample results.

Bar chart styling

Two issues come to mind. Firstly, our numbers are (currently) sadly tiny! (We really need to emphasise that this is live data and will get more accurate over time, and use terms like ‘indicative’ as well as ‘sample’.)

Secondly, I had to peer a bit to see what the labels said.

So - could we take out the numbers affected, and just have big labels saying girls, women, men, boys above the relevant bars? In about the same font size as the ‘We gathered data’ text?

To Do after our review today...

It looks like the longest comment is the one that begins 'This page is a feast'.

The chart

‘Select a particular place to view details’ - perhaps this needs to be set up more like:

‘The chart [timeline] shows the total number of accidents reported in our sample over time. Select a place to see how local reports contributed to the total'.

Or 'Select a place to see how the number of reports changed by location.’

The map - swap for comments?

As we don't (yet) have enough data to really make the map work, I’m wondering if we should swap it out. At this stage of sampling it just shows which regions we selected newspapers from.

But we could swap it for participant comments?

‘Online volunteers read thousands of articles to create this dataset. Comments they made on the articles helped shape this exhibition. We’ve shared some here for a sense of what they read’

Display sample comments in a two column layout of article date and volunteer comment - if possible linked to the place chosen?
Article date
1 May 1839
Volunteer comment: Of course the death of a teenager crawling around under a machine while it was working was "accidental"!

Specifically usernames who contributed to this project, for the:

• webpage
• v2 interactive