Taught by Annelie Berner at the The Royal Danish Academy of Fine Arts
Contact: a.berner@ciid.dk
March 10 - April 3rd, 2020
As we cannot be in the same location for the next 2 weeks, we will follow this plan for how to continue the learning:
-
Communication: I will send important updates on the #general channel on slack. You can always also reach me at a.berner@ciid.dk or +45 50 21 27 65
-
"Location": We will meet on google hangouts from 9 a.m. to 4 p.m. (excluding lunch and coffee, water breaks) on each class day. To join the video meeting, click this link: https://meet.google.com/wfw-ofqr-irx Otherwise, to join by phone, dial +45 70 71 41 20 and enter this PIN: 195 549 041# To view more phone numbers, click this link: https://tel.meet/wfw-ofqr-irx?hl=en-419&hs=5
-
Lectures: Join me on our google hangout at 9 a.m. during our course days (check below for the course day list)
-
Participation: I will ask questions of the general group during lectures. I may also call on you or you can send chats in the google hangout during our lectures.
-
In-class exercises: Stay on google hangouts. Use slack to post about programming questions in the #code channel. Ping me directly about any personal questions as you work.
NOTE 1: As we will all be on video calls for many hours, feel free to simply mute yourself so that the sound coming from all our devices do not make too much audio chaos :) I prefer that you keep your video cameras ON as much as possible because this also helps me to see whether you are physically available (I can ask you a question or ask for your input) or whether you may have gone to another room for water, etc.
NOTE 2: I understand that for some of you, the online classroom does not work because of the already-constraining situations of staying home. In that case, please be aware of the following:
- I will record all my lectures (though will still do them each morning) if possible (depending on storage space)
- Access them here
- You’re welcome to just listen in without video on
- I’m happy to have devoted chat-times with you instead of calls to help figure out code issues as you continue to work
- Homework: Remains the same. I will review your work once you post it in the #assignments channel.
- Guidance: Remains the same: sign up for office hours with me or ping me at any time during our course days for extra help, project mentorship, brainstorms, troubleshooting.
- Peer-to-peer learning: We will stay on google hangouts when working on in-class exercises. Therefore, feel free to simply un-mute yourself and ask someone a question just as you would in the class at any point. Also, PLEASE post any questions, code issues, thoughts in slack.
- Materials:
- Lectures: After each lecture-day, I will post a PDF of my slides on slack.
- Code: I will also continue to post all relevant code on github. Make sure you can pull my updates to your local repository. Tutorial here
- Handouts: When there are handouts for you to read, I will upload them in a handouts folder or share links to them in slack.
- References: The reference page is constantly being updated with new inspiration, talks, readings, code tutorials, etc. Please check it on a daily basis.
- Syllabus + Homework Assignments: I will keep the schedule - which lives at the bottom of this page - up to date with class plans, assignments and due dates (as they evolve). Please check it before and after each class.
Visualization is an increasingly important part of making sense of our highly networked, data-rich world. Using a combination of interpretive methods and representational techniques, we will explore various ways visualization can make invisible relationships, structures and stories visible. We will learn how to extend the capabilities of ordinary perception to tell stories and draw insight from information.
We will use analog and digital techniques to practice creating compelling interactive data visualizations using a variety of data. We will learn how to collect, classify, encode, and display data and use interactivity to construct relationships and meaning. The course will involve drawing, prototyping, and programming using data.
Along the way, we will also learn about the principles and processes of data visualisation, how to develop small projects, tell stories with data, the ethics of working with data, use web programming technologies to express ourselves.
We will focus our data visualisations on the topics of cycles, seasonality, repetition, and time in relation to the environment, changing climate, and ecosystem. We will use data about the past, present and future of our environment.
Part A will be a warm-up and introduction to the topics of design, data, programming, getting set up and familiar with our topic. Part B will focus on playing and experimenting with data visualisation. Part C and D will focus on mini-project development, finessing and communication.
- Interactive data visualisation
- Programming, troubleshooting
- Programming for the web
- D3.js
- Data visualisation processes
- Storytelling
- Visual encoding
- Data and Ethics
- Seasonality, patterns, time
- Climate, environment, ecosystem
-
Each week's plan and the accompanying assignments will shift slightly to accommodate the pace of the learners.
-
Attendance is mandatory. Please inform me via email if you are going to miss a class.
-
This class is participatory. You are expected to participate in discussions and give feedback to other students both in class and participate with their projects.
-
You will gain resources to dive deeper in the future
-
It takes years to get familiar with code so expect to hit your head against your computer for many hours.
-
Expect to ask for and give help.
-
Breaks are good. Take as many water, stretching and bathroom breaks as you need
- Turn your assignments in before each morning class as indicated on each assignment deadline.
- Keep your blog/slack post to assignments and github up to date with the work you did in-class and/or in the assignments.
- Join our class slack channel to easily chat and help one another with small things.
- In the afternoons, I will be sitting at KADK but not always in the same room as you - depending on what we are all working on. You can always book me for office hours here.
- We will have weekly assignments that are relevant to material from the previous class. These assignments are required and you should be prepared to show/talk about them in class. It is expected that everyone in the class will create and maintain a blog for their assignments. Feel free to use your preferred platform for the blog - for example, tumblr. You can also make your own "blog-like" spot - for example, google slides, docs, etc. - as long as it is online.
- References and resource list here
Every day, we will go through some variation of:
- inspiration - review - code - design - theory - exercises - wrap-up We will timebox, which means that we will get to wherever we get to within each topic/day and some may roll over into the next or some may be achieved more quickly in which case we will move forward
- Warm up to the class, topic and technique
- Focus: Warm up
- Lecture:
- Overview: introductions (to me and you), class structure
- Theory: processes
- Design: why visualise + inspiration
- Code: the web, our coding environment, html/css/js
- Exercises:
- Analog data collection, analysis, visualisation
- Assignment: due before Thursday at 9 a.m.
- Admin: set up blog or if you prefer, you can simply plan to post on our slack channel "#assignments". Post your code on your github account + sign in to our slack channel
- Design: post your work from the analog data exercise
- Theory: find one data visualisation inspiration for you (could be digital, art, a piece of nature like tree rings) - feel free to use the references page where there are many inspirations - and post the link or a photo with a discussion of:
- Why it inspires you
- Who it is for
- How you think they built it
- What its goal seems to be
- Read: The Philosophy of Data
- Extra: Watch Amanda Cox
- Read: About HTML/CSS/JS depending on which one is weaker for you.
The below work is due by end of day (17h) Friday, March 13.
-
Please watch at least 3 of the videos in the references page.
-
If you have not already done so, make sure that you can get updates from our github repository.
-
Check out the video tutorials on HTML, CSS and Javascript. These are in the "Tutorials" section of the references page. If you already know this very well, then take a look at a code-concept in the Javascript-specific area
- DELIVERABLES: due by 17h Friday, March 13
- Write on #assignments with your favorite quotation and something you learned from at least 1 of the videos.
- Write me a direct message on slack that you were able / unable to get updates on our github repository.
- Write on the #assignments channel on slack with one key term from the coding tutorials that you do understand better and one key term from the coding tutorials you still don't understand. For example: "I still don't understand the key term of variable. I understand the key term of conditionals like <="
- Draw with data in d3, experiment
- Focus: visual encoding, getting started with d3/svg/data binding
- Lecture:
- Review: discuss inspirations, assignments, reading
- Code: check the set-up, check github, start d3/svg/data binding
- Exercises:
- Code: play with data: make at least 3 variations on our original code (week2 / monday).
- For example:
- Variation 1: Do exactly the same as what we already have in our code but change the color of the circles.
- Variation 2: Use your data from your analog data visualisation. How many circles are there now?
- Variation 3: Try making the data inform the x position, the color, the y position, the radius. Can you figure something out?
- Variation 4: Try applying more styling to your SVG shapes and/or HTML page and/or canvas. For example, try adding some text into your HTML body. Just to understand how things are working together.
- Variation 5: Can you figure out how to work with rectangles or lines instead of circles? Look up the "rect" and "line" reference on SVG website and experiment.
- For example:
- Read at least one of the following three links about how d3 creates magic with selections and binding data:
- Deliverable:
- Post at least 1 screenshot of whatever you were able to make in your variation on our original code from the morning. If possible, share the code that built it (via your own github page or over slack).
- Code: play with data: make at least 3 variations on our original code (week2 / monday).
- Focus: drawing with data (1)
- Lecture:
- Review: code concepts
- Code: scope + variables, data formats + loading data, scales ++
- Exercises: play with data using scales:
- Take our forest CSV.
- Sketch by hand at least 3 ideas for how to represent the data visually.
- Using a section of our code as a "starter", try to make your own variations. For example:
- What if each year-forest area were plotted on top of each other, where the circles overlap? Can you play with opacity and see something interesting?
- Can you work with color to show "thriving" forest vs. declining forest?
- What if your visualisation takes over the whole canvas?
- Close your eyes and think of trees. Are there other visual inspirations that come to mind? Can you incorporate them into your sketch somehow? Or sketch by hand and save for later?
- Keep track of the coding concepts that are clearer for you today. Keep track of the coding concepts that are confusing for you today. We will check through your lists on Friday.
- If you want more tutorials, check:
- Scales
- Shapes
- Variables: var, const, let or from Dan Shiffman video
- Promises / async functions
- Deliverable:
- Post at least 1 screenshot of whatever you were able to make in your variation on our original code from the morning. If possible, share the code that built it (via your own github page or over slack).
-
Sketch:
- Look through the forest data yourself and consider if there are any patterns or unusual aspects of it. Count the dimensions of the data (we have just two :) forest and years). (Sidenote: if you want to continue with your own analog data, you can do that instead of the forest data. Let me know if you need help making it into a csv or anything).
- Put your computer aside and grab a paper and pen.
- Sketch at least 6 ideas by hand:
- Brainstorm through sketching how each dimension will be visualised (for example: dimension of years is on the x axis, dimension of forest area is on the y axis).
- Brainstorm through sketching different shapes you will use to represent the data. Will you show the data through the size of the shape, its position, or both, etc?
- By hand, sketch a few of the data points in your intended visualisation (for example: what will 3 of the data points look like?)
- Check Dear Data hand-drawn sketching
- Make at least 1 of YOUR hand-drawn sketches into a "Dear Data" style postcard with the legend of exactly how each data point is represented visually.
- Put your sketching to one side and pick up your computer again.
-
Code: Try to code at least 1 of your ideas - or simplify it down to build on an example from class.
- If this is easy, make at least 3 variations of different ways to visualise the same data.
- Keep track of your issues by listing them on the blog and / or sharing them in the slack coding channel.
-
Read: Interaction of Color
-
Deliverables: Post in the assignments channel, your own blog, your onedrive, or send to me directly:
- Dear Data hand-drawn sketch (see points v. and vi. above)
- One file of your working or not-working code
- Thank you!
- Focus: drawing with data (2)
- Lecture:
- Review: assignment
- Code: more scales, containers, labels, axes
- Design: visual encoding, "right" visualisation for "this" data
- Exercises:
- Experiments: Use the same code you started working on yesterday and play with it again using color scales. Feel free to change datasets and work with the oldestTrees.csv instead of the forestData.csv if you prefer to start fresh.
- Data design: As individuals or in groups (up to you and what works with your schedules), revisit your previous group analog data assignment and prepare to post responses to the following questions:
- What kinds of data did we track? (quantitative? qualitative?)
- How many dimensions are there? (2 dimensions? 3? more?)
- What is my interesting insight (or insights) from the data? (patterns? outliers?)
- What is my goal for this data representation? (explain, explore, exhibit)
- How could we represent that data (3 ideas)? (for example: we represent each data point with a line. Each line is placed on the x axis according to its progression in time. Color of line represents speed of movement of thing we observed).
- Draw this by hand or if you prefer, in a computer drawing program of your choice. Use shapes, sizes, positions, colors, textures or other data visualisation ingredients. Make a clear legend of how we should understand your visualisation.
- Extra:
- If you want, you can translate your analog data collection activity to a spreadsheet. For example, make a copy of mine. Download it as a csv (file -> download as csv) and place it in your overall code folder (same place as where I put the forest.csv). Make sure to check the name and keep it simple (in my example - annelie_sky.csv).
- Load it up in a javascript file where you have already been working with the forest data and replace that "forest.csv" with your own CSV filename. Try to visualise it in your code!
- I have created an example that follows this logic with the data file of "annelie_sky.csv" and then the javascript file of "sky.js" in our thursday folder of code ;)
- Deliverables:
- Experiments: Post in #assignments at least 1 screenshot of your experiments and your code. Post at least some lines of code that are not working (or working) in the #code channel with a comment of what you were trying to figure out (or figured out).
- Data design: Post in #assignments your responses to the re-visited analog data visualisation activity.
- Focus: drawing with data (3)
- Lecture:
- Review: confusing code concepts
- Code: time-based visualisations: bars, paths - arcs, geometry, conditionals, logic
- Assignment:
- Sign up for office hours with me next week. Link should work now! https://calendly.com/a-berner/kadk-office-hours
- Would you be up for doing it in a pair? If so, meet together and discuss ideas.
- Start mulling over ideas for your mini project. It can start with a topic or it can start even with a dataset. Need help finding an idea? Here are some datasets to start with: https://github.com/aberner6/kadk-data-vis/blob/master/mini-projects.md
- Mini-project development
- Focus: project research and conceptualisation
- Lecture:
- Review: project ideas
- Design: visualisation process, storytelling
- Theory: how to plan a project
- Afternoon activity:
- Mini-project choice: Start documenting your project idea. I made a template for you which is in this folder: https://drive.google.com/drive/folders/1GNFcgAb3PAGegkV0zV8uk9syWyX4rv4i?usp=sharing . Please make a copy, name it with your name(s). Fill out at least the first two steps (get data, understand data). Let me know if you have any questions.
- Office hours
- Focus: project development
- Lecture:
- Review: assignments
- Theory: perception, ethics + data visualisation
- Afternoon activity:
- Mini-project: continue documenting your project idea through the template you began working on yesterday: https://drive.google.com/drive/folders/1GNFcgAb3PAGegkV0zV8uk9syWyX4rv4i?usp=sharing .
- Fill out at least steps 3, 4, 5 (audience, sketch, story).
- Office hours
- Focus: project development
- Code: pull in your data. Log it to the console. Try to visualise at least one dimension.
- Deliverable: post the link to your current status of the project development template (the google slides link you should have already made a copy of and begun working on during Monday and Tuesday)
- Focus: project development
- Morning activity:
- 9 a.m. review: project status
- How is it going with the mini project? What have you done thus far? What do you need help with? What is your project plan for next steps?
- Day plan:
- Make and share your (extremely) detailed checklists for what to do next… for example, this one: https://docs.google.com/spreadsheets/d/1e6PNbfY69Cc76REKYn04rFK3l5BNUc--vJX1jXQssgc/edit?usp=sharing
- If you cannot make the meeting now (this morning) at least write me on slack about your status update.
- Check in with your project documentation template in the mini projects folder. Keep it or at least some place on your computer up to date with new sketches, code etc: https://drive.google.com/drive/u/1/folders/1GNFcgAb3PAGegkV0zV8uk9syWyX4rv4i
- Check this example and see if you can amend it with your data / visualisation: https://github.com/aberner6/kadk-data-vis/tree/master/code/week3/wednesday
- Office hours
- 13h: Animation and mouseover tutorial
- Focus: project development
- Morning activity:
- 9 a.m. review: project status: how are you doing, what have you done yesterday, what are you working on today and what do you need help on?
- 10:30 Small Multiples tutorial
- Office hours
- Afternoon activity:
- Code
- Office hours
- Code for animation, interaction and project-specific visualisations will be shared and I will record/be available to give a tutorial walking through that code as needed
- Finessing
- Focus: project development
- Lecture:
- Check in on expectations, questions to answer with your presentations and suggested structure for Friday presentation
- 15:30: Tutorial: how to create networks
- Office hours
- Reach goal:
- By the end of Monday, your visualisation should be working at least in its most basic, "minimum viable product" form
- Focus: presentation
- Lecture:
- 9: Light visual critique and suggestions, help, helper code session
- Tutorial: how to add accompanying information surrounding your visualisation
- Office hours
- Repeating goal:
- Your visualisation should be working at least in its most basic, "minimum viable product" form
- Assignment:
- Prepare for presentations, gather documentation
- Focus: presentation
- Office hours
- Prepare your presentations:
- Feel free to use the documentation template that you started on google drive
- Collect: process of learning (data analysis, ideas, etc), process of mini-project (for example, presented as a grid of many sketches, screenshots)
- Show: output of mini project - the visualisation AND title, legend, explanation of data (and where it comes from, what you found out about it), the story you would like to share with the audience
- Add: If I had 4 more weeks, I would...
- Reminder: fonts, color choices, layout all matter to the viewer's eyes!
- Focus: presentations
- Our presentations and my summary of the course
- 9 a.m. project presentations: feel free to use your video (the one you will submit to KADK) and present to our group the data visualisation work specifically.
- Please upload all project documentation into your google drive folder.
- Remember to share your final code - on github or google drive
- For KADK video:
- Feel free to use the documentation template that you started on google drive
- Collect: process of learning (data analysis, ideas, etc), process of mini-project (for example, presented as a grid of many sketches, screenshots)
- Show: output of mini project - the visualisation AND title, legend, explanation of data (and where it comes from, what you found out about it), the story you would like to share with the audience
- Add: If I had 4 more weeks, I would...
- Reminder: fonts, color choices, layout all matter to the viewer's eyes!