Quick Recap on variables and drawing. Login in (or sign up if you havent already) to openprocessing and go to my recap on variables sketch, fork it and see what we can change.
We previously looked at .json
files in our first data workshop and had a go at making our own. The humbel table or spreadsheet is one of the most simple and oldest forms of organising data.
Computers can easily deal with tables translated into .csv
files which stand for C ommma S eperated V alues. All spreadsheet software can export their data in this format and you’ll find it in my Data sources section below.
We are going to use some disturbing real data of reported Cholera deaths in Syria to draw some graphs. Login in (or sign up if you havent already) to openprocessing and go to my Tutorial sketch, fork it and see what we can change.
We can then experiment looking for other data sets from our list of data sources or make your own
Using .csv
files with latitude and longitude data in them can be really effective. Login in (or sign up if you havent already) to openprocessing and go to my Tutorial
This uses the flights.csv
file to map out flight density. But you’ll notice you can also change to another much smaller dataset showing locations of air quality sensors.
See if you can find more data sets or make your own
Have a look at this sketch based on the iconic Joy Division Album cover that looks like data, in fact it’s generating the data which is then drawn which really show the connection between data and interaction.
Just as a recap, we can work our way through the p5 Interactivity Page
If there’s time we’ll visit a bit more advanced stuff with Matt DesLauriers below.
Allison Parrish’s continues with some more sophisticated methods of plotting from files like this. CSV files in p5
Matt DesLauriers AKA @mattdesl made some really nice tutorials for some @shapeofdata workshops. It uses the Glitch platform and is really good for seeing what we’ve learnt entangled with contemporary javascript.
🗒️ Course Notes
Allison Parrish’s work on the NYU ITP Foundation course in Computational Media, where Daniel Schiffman (founder of Processing) works
Also Allison runs an excellent introductory syllabus to Creative Coding in javascript & p5.js the Computational approaches to Narrative syllabus
You can learn some really advanced stuff by following the course materials from the [Nature of Code}(https://natureofcode.com/book/)
It’s made for using with the Processing application but there are p5.js implementations here
It’s well worth working your way through if you really want to take this further as it helps you get to grips with working with object orientated programming in depth and adding simulations of natural like physics using forces and gravitation.
Taking data out onto social media is another interesting form of activism worth looking into. When you make your sketches it would be interesting to send them out as posts and generate responses or even a whole new audience.
You’ll notice that with an election looming in Dec 2019 and various contested regime change conflicts around the world the amount of bot activity is pretty intense. Got some data that might help deliberate over geopolitical power? Favourite poetry dumped into a .csv
file? Use it to power a twitter bot!
Start with Leonard Richardson’s Bots should punch up. and then browse all the content of BotWiki
Name | Link | Notes |
---|---|---|
UK Data Service | UK Data Service | UK’s largest collection of social, economic and population data for research and teaching purposes covering a range of different disciplines. |
Planet Parts | Planet Parts | All kinds of environmental data |
data.gov.uk |
data.gov.uk | Official big and small UK Government data |
DroneWars | UK Drone Strikes against ‘ISIS’ | Tracking drone strikes for journalism |
Armed Conflict Location & Event Data Project (ACLED) | ACLED | disaggregated data collection, analysis, and crisis mapping project |
Caveat of finding CSV files is that you can still ‘quote’ data presented online and make your own table .csv
files, which you can make with spreadsheet software and exporting or just text using a text editing program like Notepad. Just remember to follow the format below and save as .csv
:
Column_Name_1,Column_Name_2,Column_Name_3,Column_Name_4
String_or_value_1,String_or_value_1,String_or_value_1,String_or_value_1
String_or_value_2,String_or_value_2,String_or_value_2,String_or_value_2
String_or_value_3,String_or_value_3,String_or_value_3,String_or_value_3
Also good practice to include a link to the data set you are quoting.
Name | Link | Notes |
---|---|---|
Air quality monitoring York | Air-quality-monitoring-stations York | Air quality data is an all too common data set, popular as it indicates environmental change and awareness in urban settings. This one has lat long data so you can plot it map-like and Ive used it as an alternative to the fight density sketch. |
Yemen Cholera Epidemiology Data | Yemen Cholera Epidemiology | Humanitarian data where cholera can indicate extreme infrastructure collapse as a consequence of conflict. Not a good way to die. This data is almost too horrible to be true. |
Kristen and Hugh both liked Twine as a possible way of interlinking processing pages and datasets and seemed useful for 2 of their recent projects.
You can use it online
Find documentation on the Twine wiki Full instructions on Harlowe the default theme.
I made a cheatsheet to get started from my general guide Twine for Librarians
Once you’ve made something in twine, included links to cool data and openprocessing sketches you can publish your data easily using glitch
<a href="my_processing_sketch_address">the displayed link</a
You can even embed audio in Twine games like I did in this story made around Bertrand Russell positivist monologues.
Sign up and use Glitch to host and edit all your p5 codes, .csv
files, Twine html etc.
Start a project, preview it and then view it as an html app.
Don’t forget to display a twine file at your glitch project address first, choose publish to web
and place the file in a fresh hello-webpage
glitch project and rename it to index.html
. Otherwise you can just make your own index page with links to twine, other glitch projects, datasets or openprocessing pages.
Checkout the p5.js documentation on displaying your processing sketch in an html page