Interactive Data Visualisation

David KellyDigital Humanities Manager,

Moore Institute @ NUI, Galway

8 March, 2018 davidkelly.ie/talks/gmit-2018

https://medium.com/@kennelliott/39-studies-about-human-perception-in-30-minutes-4728f9e31a73

“Everything we know about how humans interpret graphics” -https://www.youtube.com/watch?v=s0J6EDvlN30, Kennedy Elliot

Explorable Explanations

Explorable ExplanationsAn active reader asks questions, considers alternatives, questions assumptions, and even questions the trustworthiness of the author. An active reader tries to generalize specific examples, and devise specific examples for generalities. An active reader doesn't passively sponge up information, but uses the author's argument as a springboard for critical thought and deep understanding.

Bret Victor, March 10, 2011: http://worrydream.com/ExplorableExplanations/

Why?

New Perspectives

Cultural NetworksData from interviews with cultural practitioners:

• Demographic • Funding• Relationship types • Geographic data

Dr. Patrick Collins – Geography @ NUI Galway

Dr Mark Stansbury – Classics @ NUI Galway

Data Exploration

Dr Patrick Collins & Dr Aisling Murtagh – Geography @ NUI Galway

Impact & Engagement

https://www.nytimes.com/interactive/2016/01/07/us/drug-overdose-deaths-in-the-us.html

GalwayDashboard.ieEconomic Baseline Assessment for Galway City & County

Prof. James Cunningham, Galway City Council, Galway County Council

Complexity & non-expert users

http://projects.propublica.org/louisiana/

The Guardian, Feb 2015

How?

• Do it yourself

• Collaborate with people that have different skillsets to you

• Seek the help of IT professionals (€)

• Provide the data to others for them to produce the visualisation.

Gatto, M. (2015), “Making Research Useful: Current Challenges and Good Practices in Data Visualisation” http://reutersinstitute.politics.ox.ac.uk/our-research/visualisation-academic-research

But, how?

Plan• Requirements - Data Preparation• Audience(s) - Research

Design• Paper Prototypes - Visual Design• Wireframes

Develop• Functional Prototype• Production Development

Deploy & Evaluate• Deployment• Evaluation

!

"

#

$

www.davidkelly.ie/data-vis-workflow

First Nameaffiliation to your agency/group

Location

“Quote about his primary purpose in using the

product”

Attributes• List of his traits• Mobile and social• Frustrated by previous experience with your

product

Goals• List of reasons why is he looking at the

product• Finding out what new products are available• Feeling involved in the community

We must• List how to best reach this person• Reach out via mobile device• Show value in his input

We must not• List what might annoy this person• Contact him too much/ bother• Make him read long messagesTE

MPLATE

https://www.digitalgov.gov/resources/digitalgov-user-experience-resources/digitalgov-user-experience-program-usability-starter-kit/

http://datasketch.es

Storyboard Interactions

Wireframe wider context

DANGER

https://twitter.com/Nrg8000/status/957318498102865920

From: http://de.slideshare.net/vis4/making-data-visualizations-a-survival-guide

From: http://viz.wtf/

Get a job

Useful ToolsMostly web-based, free option, little/no

programming

http://ft.com/vocabulary

http://ft.com/vocabulary

http://chartmaker.visualisingdata.com

à CSV

Import.io

Option for non-profit / student use

Code-based:

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

Code-based:

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

A free, open source, powerful tool for working with messy data

openrefine.org

• Limited free plans available

Code-based:

• Map design

• Data storage

• Embed maps

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

carto.com

mapbox.com

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

Omeka Plugin

storymap.knightlab.com

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

Code-based:

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

http://datamatic.io

www.datawrapper.de

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

https://timeline.knightlab.com

Uses a Google Spreadsheet as a data source

https://juxtapose.knightlab.com/

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

https://juxtapose.knightlab.com

Code-based:

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

http://palladio.designhumanities.org/

gephi.org

http://hdlab.stanford.edu/

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

public.tableau.com/s/

Also offer free academic licenses for Tableau Desktop for students & teachers

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

http://www.metabase.com/

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

• Colour Choices (Maps) - http://colorbrewer2.org• ProPublica's Nerd Guides - https://github.com/propublica/guides• UK Government Service Design Manual -

https://www.gov.uk/service-manual/user-centred-design/data-visualisation.html

• Data Viz Style Guide Collection: http://policyviz.com/style-guides/

• ai2html - an open-source script for Adobe Illustrator that converts your Illustrator documents into html and css (NY Times)

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

“Easily manage all your research outputs and make them available in a citable, shareable and discoverable manner”

http://www.nature.com/sdata/policies/repositories

Data Gathering, Cleaning & Preparation

Mapping

Charting

Data Management

Design

Visu

alisa

tion

“…gives you the digital analytics tools you need to analyze data from all touchpoints in one place”

“Deeply understand every user's journey with instant insights for everyone on mobile and web”

http://www.clean-sheet.org/

• “The list of 2017 visualization lists”: http://www.maartenlambrechts.com/2017/12/28/the-list-of-2017-visualization-lists.html

• The Data Visualisation Catalogue: https://datavizcatalogue.com/• FT Visual Vocabulary - http://ft.com/vocabulary• Seeing Data: http://seeingdata.org• Gatto, M. (2015), “Making Research Useful: Current Challenges and Good Practices in Data Visualisation” -http://reutersinstitute.politics.ox.ac.uk/our-research/visualisation-academic-research

Books• “The Visual Display of Quantitative Data” (2001) by Edward Tufte• “The Functional Art: An introduction to information graphics and visualization“ (2012), Alberto Cairo• “Visualising Data” (2016) by Andy Kirk

Useful Resources

Thank youDavid Kelly

david.d.kelly@nuigalway.ie

davidkelly.ie/talks/gmit-2018