class-06.md

Class 6

Impostor syndrome

..or rather, you shouldn't!

🛠️ Data Structures

Common structured data types:

• Arrays
  • Indexed values (0, 1, 2, 3...)
  • Various ways of looping through arrays
    • for loop
    • for...of loop
    • forEach() method
    • map() method
  • Other array functions
• Dictionaries/Hashes (Objects in .js, HashMap in Java)
  • Key-value pairs rather than indexed values
  • Various ways of looping through objects
    • for...in loop
    • Object.keys() method
    • Object.values() method
    • Object.entries() method
• Other languages have other data structures
  • Lists, Sets, Tuples, etc in Python
  • Arrays, Vectors, Linked Lists, etc in C/C++
  • Structs, Enums, etc in Java/Rust/Go/Swift

Loading data payloads from external files or APIs

• Text file
  • loadStrings() - p5 example
• CSV (spreadsheet/tabular data)
  • loadTable() - p5 example
• JSON
  • json validator
  • json tools
  • loadJSON() - p5 example
• XML
  • loadXML() - p5 example

🛠️ APIs

• "WTF is an API?"
• Load some data!
  • loadJSON() demo
  • vanilla fetch() demo
• Example of swapping an API:
  • q5.js
  • q5 Example
• How does code talk to other code?
  • Example live-code w/collision detection

🛠️ Databases

• Databases are searchable data structures
• Relational & queryable databases allow for large sets of searchable data
  • Pro: More powerful and reliable than a data file
  • Pro: Hosted in the cloud, a db can share data between users
  • Con: More difficult to set up and work with
  • Some different types of databases: SQL, Mongo, GraphQL
• What's the best tool for the job?
  • Or which tool is most in fashion?
• Data search example

🛠️ Data Visualization

• Types of data viz
  • Traditional visual components
  • Storytelling
  • Art
• Data sources
  • awesome-json-datasets
  • public-apis
  • freepublicapis.com
  • Topic-specific:
    • OpenWeather
    • Spacekit
• Data Viz drawing tools
  • Make your own! - This is a Processing-specific series, but would port easily to p5js
  • D3
  • chart.js
  • Vizzu
  • deck.gl
  • Other data viz libraries
    • More libraries
    • https://roughjs.com/
    • https://semiotic.nteract.io/
    • http://dimplejs.org/
    • https://vega.github.io/vega/
    • https://github.com/antvis/G2
    • https://plotly.com/javascript/

📝 Homework:

Watch:

• The Pudding
• Daniel Shiffman: Introduction to Data and APIs in JavaScript
• Giorgia Lupi: How we can find ourselves in data
• Aaron Koblin: From Data to Digital Art
• Data Becomes Art in Immersive Visualizations
• Refik Anadol: Art in the age of machine intelligence

Build a data visualization

• Types of visuals to consider
  • A chart
  • An interactive visual representation
  • A storytelling device
  • An abstract interpretation of the data
• Data sources
  • Handcrafted/hard-coded arrays, objects
  • Loaded data files (json, csv, xml, text)
  • API requests
• Inspiration
  • Nadieh Bremer
  • Nikcy Case
  • Shirley Wu
  • Nicholas Felton: Annual Reports
  • FlowingData
• Steps
  • Find or create some interesting data
  • Load your data source into your environment
  • Draw something based on your data

📋 Review code

• Present your generators