Visualizing on the web: Workshop edition

Welcome! 🙋‍♀️ We're here to start creating data visualizations on the internet!

Get ready to make fun, interactive charts that anyone can view from their browser. But first! Let's see what we need to get started.

Getting set up

We'll be using CodeSandbox for collaborative coding. Make sure to create an account before we get started. We'll be working off of our starter template.

Our schedule

Week 1: October 1st

Week 2: October 8th

Week 3: October 15th

D3 resources

• Birds-eye view of modules

• D3.js documentation

• Observable: lots of d3 examples in a notebook layout

• Learn JS data: guide for how to manipulate data in Javascript

What's next?

Congrats on making it through! Seriously, you deserve a pat on the back, we covered tons of material. If you want to review, check out the recap.

As for your scatter plot, it's really impressive as is! Share it around and brag about yourself - click the "Open in new window" button in the top right corner to see it as a standalone web page.

If you want to continue tinkering with it, here are a few exercise ideas:

• check out the last exercise
• change the metrics to ones you're curious about
• add a color scale and legend
• add a radius scale and legend
• customize the design in a styles.css file (make sure to this file in the index.html file so that the styles load)
• change the markers from circles to rectangles

If you're interested in taking your knowledge of web development & d3.js further, I'd recommend reading through the book.

Learning from Fullstack D3 (the book)

A few chapters will be review for you:

• Chapter 1 goes over creating a line chart
• Chapter 2 goes over creating a scatter plot
• Chapter 4 goes over creating animations (.transition())
• Chapter 5 goes over creating interactions

While there will be overlap with what we learned together, I'd also recommend at least skimming these chapters. There are many edge cases and alternatives that I didn't have time for, but are covered in the book. The other chapters go over other concepts such as creating a histogram, map, other common charts, dashboard design, and in-depth walkthroughs of three more complex visualizations.

While you're going through the book, there is one difference to be aware of. Instead of running within a CodeSandbox, you'll be running the book code locally. Any code editor will work - my favorite is VS Code. Due to running locally, you'll need to set up a light server (this is way less intimidating than it sounds!), which is covered in Chapter 1.