This data jam will introduce d3.js through hands-on tutorials and activities
d3.js, which is short for Data Driven Documents, has now been available for more than ten years. Yet, it is still one of the programming libraries that are most often used to create novel interactive data visualizations both in industry and research. Since its publication, the library has undergone a wealth of changes and improvements. However, the core idea still stands: To support developers in binding data to visual elements.
In this tutorial, Søren will give a first-hand introduction to the library and how to use it. He will assume some familiarity with common web technologies, such as HTML, CSS, and JavaScript.
At the end of the tutorial, we expect that you will be able to:
- Explain the core idea of d3.js.
- Create an interactive version of a simple well-known visualization type in d3.js (likely, a bar chart).
- Explore d3.js further on your own.
We hope to offer a follow-up data jam later in the semester (probably on May 2 or 9).
Schedule
We loosely follow this plan but are open to drop-ins as time permits.
| 16.00 | Brief introduction to d3 and simple prototyping setup (this will assume basic knowledge of common web technologies) |
| 16.30 | How to draw a barchart in d3 (hands-on): |
| Joining data to visual elements | |
| Setting visual attributes from data | |
| Loading data | |
| Using d3.scale to map data values to stuff on the screen | |
| Adding axes using d3.scale | |
| 17.00 | Check in |
| 17.15 | Animating the bars |
| 17.30 | Adding interactivity |
| 18.00 | Light refreshments and informal chat |
Expectations
Keeping with the jam narrative, we aim for this event to be fun and engaging, and to allow us to meet fellow people with interests related to human data interaction.
- Have fun
- Bring your own laptop
- Discuss perspectives related to human data interaction and beyond
