https://github.com/dcs-training/custom-dataviz-observable

Materials for the workshop "Creating custom data visualizations with Observable notebooks & D3". Go to the readme file
https://github.com/dcs-training/custom-dataviz-observable

d3 data-visualisation javascript observable-notebook

Last synced: 23 days ago
JSON representation

Materials for the workshop "Creating custom data visualizations with Observable notebooks & D3". Go to the readme file

• Host: GitHub
• URL: https://github.com/dcs-training/custom-dataviz-observable
• Owner: DCS-training
• License: other
• Created: 2024-02-20T09:58:22.000Z (11 months ago)
• Default Branch: main
• Last Pushed: 2024-07-26T15:56:27.000Z (5 months ago)
• Last Synced: 2024-12-06T21:29:06.212Z (29 days ago)
• Topics: d3, data-visualisation, javascript, observable-notebook
• Homepage:
• Size: 18.4 MB
• Stars: 1
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md
  • License: License.md

Awesome Lists containing this project

README

        
# Creating custom data visualizations with Observable notebooks & D3

## Summary

Have you ever felt like a bar chart, scatterplot, or line chart just won’t cut it? In this course, we will explore how to create custom data visualizations. You will learn how to come up with ideas for custom visualizations and how to determine if they are helpful for your data project. You are also going to learn the basics of implementing custom visualizations using the JavaScript library D3 and Observable notebooks.

D3 is a popular JavaScript library for data visualization that lets you create fully custom visualizations. Observable is an online platform that lets you easily get started with D3, even if you have no prior experience with JavaScript. Observable notebooks let you upload and use data and are great for prototyping web-based data visualizations. This course will provide a basic introduction to the D3 library and the Observable platform, allowing you to build on these skills independently afterwards.

This is an intermediate level course. You will need some familiarity with basic data visualizations. Some experience with programming (in any language) is also beneficial. If you would like to familiarize yourself with JavaScript prior to the course, you may want to work through part of the [W3Schools JavaScript guide](https://www.w3schools.com/js/) or the [Observable introduction](https://observablehq.com/d/f253f790ec8c6ff0) focused on data wrangling, particularly Part 1 and Part 2 .

## Schedule

### Week 1

- 13:00-13:30 Slides

- 13:00-14:00 Sketching Visual Variables

- 14:00-14:10 Break

- 14:10-14:15 Walk Through of Observable, [D3 Scatterplot](https://observablehq.com/@custom-dataviz-observable/d3-scatterplot)

- 14:15-14:55 [Practice Notebook](https://observablehq.com/d/dac99a677506c105)

- 14:55-15:00 Wrap-Up

### Week 2

- 13:00-13:15 Welcome Back/Intro

- 13:15-13:45 Open Session 1

- 13:45-13:55 Catchup

- 13:55-14:05 Break

- 14:05-14:55 Open Session 2

- 14:55-15:00 Wrap-Up

## Useful Links & D3 Resources

- [D3 API Documentation](https://d3js.org/api): This is the place to look for specific functions and information on how they work

- [D3 Examples](https://observablehq.com/@d3/gallery)

- [D3 In-Depth](https://www.d3indepth.com/introduction/)

- [D3 Categorical Colour Schemes](https://d3js.org/d3-scale-chromatic/categorical)

- [Observable has a series of notebooks for learning D3](https://observablehq.com/@d3/learn-d3)

- [Interactive Data Visualization for the Web (book)](https://scottmurray.org/work/d3-book-2e) (from 2017 so a little outdated now, but a great resource for the basics)

- [Tutorial for creating simple charts and maps](https://www.freecodecamp.org/news/d3js-tutorial-data-visualization-for-beginners/)