In the [Better Data Visualizations with Svelte](/courses/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**

If you enjoyed the free course, then check out the [Better Data Visualizations with Svelte](/courses/better-data-visualizations-with-svelte) course below!

An Introduction to Beeswarm Charts with D3 and Svelte

Svelte Reactivity and D3 Force Ticks in Beeswarm Charts

Dynamically Styling a D3 and Svelte Beeswarm Chart

Building a Beeswarm Chart with Svelte and D3

svelte

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.

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.

Build a dynamic, physics-based beeswarm plot with Svelte and D3.

Explore the basics of D3 force simulations.

Perform updates via Svelte reactive blocks.

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

---
title: Svelte Reactivity and D3 Force Ticks in Beeswarm Charts
description: In this lesson, we will learn how ticks work in D3 force simulation layouts, and we will dive into Svelte reactivity (reactivity blocks) for correctly rendering nodes of a force layout in a responsive SVG canvas. A tick represents a “frame” in a force simulation - the state of the force layout at a specific point in a force simulation. With Svelte reactivity, nodes, represented as circles, will be positioned correctly in a beeswarm plot upon initial page load.
privateVideoUrl: https://stream.mux.com/188w8JhEJo02KvDO00sWSlbhfVh63bYeAez2ZIMY5ira4.m3u8
isPublicLesson: true
useMdx: true
---

import Embed from "~/components/Embed";
import TopPageMargin from "~/components/TopPageMargin";
import Blockquote from "~/components/Blockquote";
import CallToAction from "~/components/CallToAction";

<TopPageMargin />

<CallToAction />

In our last lesson, we finished off with a broken force diagram that looked like this:

<Embed title="xmzghl" height="400px" previewOnly module="02" lesson="01" />

In this lesson, we'll identify what's wrong with our code, and fix it. In doing so, our chart will also become responsive.

## A Lesson in Svelte Reactivity

Our force simulation has many [**ticks**](https://observablehq.com/@d3/simulation-tick). A tick can be thought of as a frame of animation. In the [example below](https://observablehq.com/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho#beeswarm_sect), see how the animation progresses based on the current "frame", which represents a tick.

<iframe width="100%" height="634" frameborder="0"
  src="https://observablehq.com/embed/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho?cells=chart_beeswarm%2Cviewof+keyframe_beeswarm"></iframe>

But in our code, we have no way of recording updates to the simulation on tick. And so rendering `simulation.nodes()` in an `{#each}` loop is problematic, because it will only render those nodes at the outset, and when any of the relevant dependencies change. This explains why they appear in the top left corner, and then move to their correct positions on resize. (It would also be problematic if we wanted to use physics to smoothly transition element positions.)

So how do we solve this problem?

## D3 Force Simulation's Tick Handler - `.on('tick')`



We need to add an [`.on('tick')`](https://github.com/d3/d3-force#simulation_on) function to the simulation object already instantiated in our `<script />` tag. This function will run every time the simulation ticks.

So what do we want to do with our simulation? On simulation tick (remember, "every frame"), we want to update the `nodes` array—the array that we render in our `{#each}` loop.



Let's begin by declaring both `simulation` and `nodes` as non-reactive variables (replacing our `$:` with `let`). Then, we'll add the `.on('tick')` listener in our `<script />` tag.

```js
let simulation = forceSimulation(data)
    .force("x", forceX()
        .x(d => xScale(d.happiness))
        .strength(0.8)
    )
    .force("y", forceY()
        .y(d => yScale(d.continent))
        .strength(0.2)
    )
    .force("collide", forceCollide().radius(RADIUS));

let nodes = []; // An empty array which will be populated once the simulation ticks
simulation.on("tick", () => {
    nodes = simulation.nodes(); // Update the nodes array
});
```

In essence, this chunk of code will create an array of nodes that updates every time the simulation ticks.

But recall that `xScale` was a reactive variable. This means that creating `simulation` with `const` will lead to an error, as `xScale` doesn't exist as a function on immediate page load. So how do we make sure that the simulation is updated when `xScale` changes? 

:::note

You may think that we could create `simulation` with a reactive dollar label, but you'll run into a tricky issue:

![](https://d2uusema5elisf.cloudfront.net/courses/building-a-beeswarm-chart-with-svelte-and-d3/module_00/lesson_00.02/public/assets/jitter.gif)

Our bubbles don't fit in the window — they "lag" our window resizing. 

The issue here is that `simulation` is **reinstantiating** every time any of its constituent elements changes. Because we are using `$:` to instantiate `simulation`, we will essentially overwrite the previous `simulation` with a new one every time we resize the window.

:::

Instead, we'll use a **reactive block**.

## Reactivity with Svelte Reactive Blocks

We instead want to instantiate a **single, simple** `simulation` object, and then _update_ it whenever any of its constituent elements change.

In this new configuration, we'll create `simulation` without any of its complicated force logic (_importantly, this means we're omitting `xScale`, and so we won't run into a build error_). We'll instead that entire chunk into a [reactive block](https://svelte.dev/tutorial/reactive-statements). In essence, this reactive block will update whenever any of the variables inside of it change.

We'll also include additional parameters in our reactive block: `alpha` and `alphaDecay`. These parameters control the rate at which the simulation finishes, which you can read more about [here](https://observablehq.com/@maliky/testing-the-d3-forces-parameters).

In sum, our code will look like this:

```js
let simulation = forceSimulation(data); // Instantiate a barebones simulation
let nodes = []; // Create an empty array to be populated when simulation ticks
simulation.on("tick", () => {
    nodes = simulation.nodes(); // Repopulate and update
});

// Run the simulation whenever any of the variables inside of it change
$: {
simulation
    .force("x", forceX()
        .x(d => xScale(d.happiness))
        .strength(0.8)
    )
    .force("y", forceY()
        .y(d => yScale(d.continent))
        .strength(0.2)
    )
    .force("collide", forceCollide().radius(RADIUS))
    .alpha(0.3) // [0, 1] The rate at which the simulation finishes. You should increase this if you want a faster simulation, or decrease it if you want more "movement" in the simulation.
    .alphaDecay(0.0005) // [0, 1] The rate at which the simulation alpha approaches 0. you should decrease this if your bubbles are not completing their transitions between simulation states.
    .restart(); // Restart the simulation
}
```

:::note

Finding precise values for `alpha` and `alphaDecay` is going to be more trial and error than it is exact science (unless you're well versed in physics, perhaps). As with adjusting `strength` values, it is common to play around with multiple values until you find the right combination for your data.

:::

Voila! With that change in place, we now have a smoothly animating simulation  that is reactive and responsive. 



<Embed title="g8l0s0" module="02" lesson="02" height="400px" />

<CallToAction />

## Need help? Further reading

-   [`simulation.tick`](https://observablehq.com/@d3/simulation-tick)
-   [Why do we need `force.on('tick'..` in d3?](https://stackoverflow.com/a/28745519)

### Reactivity

-   [Reactive statements](https://svelte.dev/tutorial/reactive-statements)

### Force simulations

-   [`simulation.tick()`](https://github.com/d3/d3-force#simulation_tick)
-   [`d3.force` testing ground](https://bl.ocks.org/steveharoz/8c3e2524079a8c440df60c1ab72b5d03)
-   [Exploring `d3.force`'s parameters](https://observablehq.com/@maliky/testing-the-d3-forces-parameters)
-   [Alpha, Velocity, and Restart](https://stackoverflow.com/a/52117221)

In this lesson, we will learn how ticks work in D3 force simulation layouts, and we will dive into Svelte reactivity (reactivity blocks) for correctly rendering nodes of a force layout in a responsive SVG canvas. A tick represents a “frame” in a force simulation - the state of the force layout at a specific point in a force simulation. With Svelte reactivity, nodes, represented as circles, will be positioned correctly in a beeswarm plot upon initial page load.

Learn

The newline Guide to Building Your First GraphQL Server with Node and TypeScript

Teach

Amelia Wattenberger

Author of Fullstack D3

Community

Building a Beeswarm Chart with Svelte and D3

WELCOMEIntroduction

Introduction:

Start Here

Module 1: Building a Beeswarm Chart with Svelte and D3

Introduction: (30:47)

An Introduction to Beeswarm Charts with D3 and Svelte

Lesson 1: (14:29)

Svelte Reactivity and D3 Force Ticks in Beeswarm Charts

Lesson 2: (12:40)

Dynamically Styling a D3 and Svelte Beeswarm Chart

Svelte Reactivity and D3 Force Ticks in Beeswarm Charts

Masterclasses

Tutorials

Fullstack React with TypeScript