Building a Beeswarm Chart with Svelte and D3

Learn how to create a dynamic, physics-based beeswarm plot with Svelte and D3. This free course contains three lessons that cover everything from the basics of d3-force for positioning circles in a beeswarm plot (via a force layout) to dynamically styling and sizing circles in a beeswarm plot. By the end of the course, you will have built a simple beeswarm plot that visually summarizes a distribution of data.

  • 4.5 / 5 (3 ratings)
  • Published
  • Updated
Video Lessons

3 Videos

Coding Exercises

3 Exercises

Course Instructor
Avatar Image

Connor Rothschild

Partner & Visualization Engineer at Moksha Data Studio. Previously at Axios, Coding it Forward, USSOCOM, and Texas Policy Lab.

How The Course Works

01Remote

You can take the course from anywhere in the world, as long as you have a computer and an internet connection.

02Self-Paced

Learn at your own pace, whenever it's convenient for you. With no rigid schedule to worry about, you can take the course on your own terms.

03Community

Join a vibrant community of other students who are also learning with Building a Beeswarm Chart with Svelte and D3. Ask questions, get feedback and collaborate with others to take your skills to the next level.

04Structured

Learn in a cohesive fashion that's easy to follow. With a clear progression from basic principles to advanced techniques, you'll grow stronger and more skilled with each module.

Course Preview

What You Will Build In This Course

Build a dynamic, physics-based beeswarm plot with Svelte and D3.
Build a dynamic, physics-based beeswarm plot with Svelte and D3.
Explore the basics of D3 force simulations.
Explore the basics of D3 force simulations.
Perform updates via Svelte reactive blocks.
Perform updates via Svelte reactive blocks.
Course Overview

What you will learn

  • How to create a dynamic, physics-based beeswarm plot for the web

  • The importance of enforcing clear separation of concerns (Svelte for the DOM, D3 for mathematical calculations)

  • How to integrate Svelte and D3 to create interactive beeswarm plots

  • Differences between the imperative (pure D3) and declaractive (Svelte and D3) approaches to building modern data visualizations

  • What problems using Svelte in D3 data visualizations can solve

  • How to create a beeswarm plots that allow you to better understand the extent and distribution of your data

In this free, one hour course, we will learn how to create a dynamic, physics-based beeswarm plot with Svelte and D3. Beeswarm plots offer an elegant and dynamic way to display distributions, outliers, and patterns within our datasets. Whether you're a seasoned developer or a curious beginner, this course will guide you step-by-step through the process of creating a stunning and interactive beeswarm plot that will captivate your audience.

We will start by scaffolding a new Svelte project. Then, we will cover the fundamentals of d3-force and the underlying force simulation that arranges nodes, which are represented as circles, in a physics-based, D3 force layout. This approach will automatically position nodes in clusters via a chosen categorical variable and prevent node collisions/overlap. Svelte will handle the rendering of these nodes to the DOM.

As we progress through the course, we will come across common problems that developers encounter when integrating Svelte with D3's d3-force module, and we will learn how to address them using Svelte's reactivity system. Finally, we will dynamically color and size the nodes in the beeswarm plot based on specific dimensions of our dataset.

This course aims to be an introductory guide to creating a dynamic, physics-based beeswarm plot with Svelte and D3 from scratch. By the end of the course, you will know how to bring your beeswarm plots to life with Svelte's declarative syntax and D3's data manipulation and mathematical capabilities.

svelted3

One-Time Purchase for Free -

If you enjoyed the free course, then check out the Better Data Visualizations with Svelte course below!

In the Better Data Visualizations with Svelte course, not only will you learn to enhance beeswarm plots with filters and peripheral elements, but you will also learn how to:

  • Build a Scatterplot with a Tooltip
  • Build a Rotating Globe Visualization
  • Build an Interactive Scrollytelling Scatterplot

Our students work at

  • salesforce-seeklogo.com.svgintuit-seeklogo.com.svgAdobe.svgDisney.svgheroku-seeklogo.com.svgAT_and_T.svgvmware-seeklogo.com.svgmicrosoft-seeklogo.com.svgamazon-seeklogo.com.svg

Sample Course Lessons

Course Syllabus and Content

Module 1

Building a Beeswarm Chart with Svelte and D3

3 Lessons 57 Minutes

In this module, you'll learn how to create a dynamic, physics-based beeswarm plot using Svelte and D3, everything from positioning circles in a beeswarm plot to dynamically styling and sizing circles in a beeswarm plot.

Meet the Course Instructor

Connor Rothschild

Connor Rothschild

Connor Rothschild is a Data Visualization Developer at Moksha Data Studio, where he tells data stories on the web. He's worked with clients in the government, nonprofits, higher education, and journalism, and is excited to share with students the lessons he's learned to make better data visualizations.

Connor has worked on data visualizations at several companies, including Axios, Coding it Forward, USSOCOM, and Texas Policy Lab. He has extensive experience building interactive, responsive, and accessible data visualizations that communicate insights effectively.

Connor is a graduate of Rice University, where he studied computer science and statistics. He has also completed several online courses in data visualization, including courses on D3.js and Svelte, and is passionate about teaching others how to create better visualizations.

As the author of this course, Connor brings a wealth of experience and knowledge to the table. His work on various data visualization projects has given him a unique perspective on what works and what doesn't in the field.

By taking this course, you'll be learning from someone who has worked with a diverse range of clients and has a deep understanding of what it takes to create effective data visualizations. You'll be learning from someone who has been in the trenches, building visualizations that communicate insights effectively, and who is passionate about sharing his knowledge and insights with others.

Purchase the course today

One-Time Purchase

Get lifetime access to this course

Free
Building a Beeswarm Chart with Svelte and D3
  • Discord Community Access
  • Full Transcripts
  • Money Back Guarantee
course preview promo image url

Frequently Asked Questions

Who is this course for?

This course is for anyone who wants to learn how to create effective data visualizations using Svelte and D3, regardless of their experience level. Whether you're a beginner or an experienced developer, this course will provide you with the knowledge and skills you need to create compelling data visualizations.

Why is this course free?

We wanted create a super simple course for anyone looking to start building data visualizations with D3 and Svelte.

What if I need help?

You can ask us questions anytime through the community Discord channel or by sending us a message.

Building a Beeswarm Chart with Svelte and D3

Free