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!

Beeswarm plots offer an elegant and interactive way to visualize distributions, outliers and patterns within datasets. In this lesson, we will cover the fundamentals of building a beeswarm plot, beginning with an in-depth explanation of force simulations in D3 data visualizations. Then, we will learn how to prepare data for a force layout via D3’s data manipulation methods (e.g., rollup), how to create a force layout with the d3-force module (to automatically position nodes, represented as circles, in clusters and avoid node collisions/overlap) and how to render nodes of the force layout in a responsive SVG canvas with Svelte. 

An Introduction to Beeswarm Charts with D3 and Svelte

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.

Svelte Reactivity and D3 Force Ticks in Beeswarm Charts

In this lesson, we will learn how to dynamically style nodes in a force layout. The color and radii of nodes, represented as circles, in a beeswarm plot will be determined by specific data dimensions and scales defined via methods (e.g., scaleOrdinal for mapping discrete values of a categorical variable to visual elements like colors) of the d3-scale module.

Dynamically Styling a D3 and Svelte Beeswarm Chart

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.

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: Dynamically Styling a D3 and Svelte Beeswarm Chart
description: In this lesson, we will learn how to dynamically style nodes in a force layout. The color and radii of nodes, represented as circles, in a beeswarm plot will be determined by specific data dimensions and scales defined via methods (e.g., scaleOrdinal for mapping discrete values of a categorical variable to visual elements like colors) of the d3-scale module.
privateVideoUrl: https://stream.mux.com/5PnyKJnDdd7kqIvIlW1e02Eck02ysTTDDOrgn02R4BX02eY.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 making our chart **reactive** and **responsive**.

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

One evident problem is that every circle looks mostly the same. Obviously, we want to link each circle to the data it represents, in whatever way we can. 

We've already connected each circle's **y position** to its `continent`, and its **x position** to its `happiness`. In this lesson, we will:

-   Connect the circle's **color** to its grouping variable (`continent`)
-   Connect the circle's **radius** to its `happiness` variable

## Setting Up an Ordinal Scale (`scaleOrdinal`) to Color Circles in a D3 Visualization

We will use the `fill` attribute to color our circles, and we will use the `continent` variable to determine the color of each circle. 

In order to create a mapping between the `continent` variable and the color, we will create a function called `colorScale`. We will use D3's `scaleOrdinal()` to create this scale, where we pass in an array of continents to the domain, and an array of colors to the range. (Recall that `continents` is an array of continents, sorted by average happiness score, that we generated in a previous lesson.)

```js
import { scaleOrdinal } from "d3-scale";

const colorRange = ["#dda0dd", "#fe7f2d", "#fcca46", "#a1c181", "#619b8a", "#eae2b7"];
let colorScale = scaleOrdinal()
    .domain(continents) // continents was already defined in our code
    .range(colorRange);
```

We will then use this scale to assign the color of each circle. In our `{#each}` loop which renders our circles, we will add the `fill` attribute:

```html

<circle fill={colorScale(node.continent)} />
```

Now, our circles' color is determined by their continent. 

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

## Setting Up a Square-Root Based Scale (`scaleSqrt`) to Size Circles in a D3 Visualization

Let's also map our circles' radii to their `happiness` value. We'll want to create a new scale for our radius — called `radiusScale` — that takes in a happiness value and returns a radius.

In order to do this most accurately, we'll use [`scaleSqrt()`](https://github.com/d3/d3-scale#scaleSqrt), which is a square root scale. We do this because viewers perceive the **area** of a circle, not its **radius**. If we used a normal linear scale, the circles would look disproportionately large. 

As explained by [Robert Kosara](https://eagereyes.org/blog/2008/linear-vs-quadratic-change):

<Blockquote>

One of the most common mistakes in chart design is to scale an area by two sides at the same time, producing a quadratic effect for a linear change. That overstates the larger numbers and produces a badly skewed chart. A little care and some basic high-school math can help avoid the problem.

</Blockquote>

```js
import { scaleSqrt } from "d3-scale";
let radiusScale = scaleSqrt()
    .domain([1, 9]) // The same domain passed to xScale
    .range([3, 8]);
```

Finally, we pass this scale to the `r` attribute of our circles:

```html

<circle r={radiusScale(node.happiness)} />
```

This is working, but notice that our circles slightly overlap:

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

This is because our force layout is preventing a collision based on the radius of each circle. We previously hardcoded this radius (in a variable called `RADIUS`) to be 5. We can now remove this variable, and use our `radiusScale` instead.

In our force simulation declaration, we'll change this line:

```js
.force("collide", forceCollide().radius(RADIUS))
```

to this:

```js
.force("collide", forceCollide().radius(d => radiusScale(d.happiness)))
```

And our circles are no longer overlapping!

![](https://d2uusema5elisf.cloudfront.net/courses/building-a-beeswarm-chart-with-svelte-and-d3/module_00/lesson_00.03/public/assets/overlap-fixed.png)

### Making Radii Smaller for Smaller Screens via Svelte Reactivity

If you look at our chart on a smaller screen, you'll notice that the circles are slightly too large. We'll fix this by making our `radiusScale` reactive (using the dollar label `$:`), and changing its domain based on the width of the screen. 

```js
$: radiusScale = scaleSqrt()
    .domain([1, 9])
    .range(width < 568 ? [2, 6] : [3, 8]);
```

:::note

This can be read as: "If the width of the screen is less than 568 pixels, use a range of `[2, 6]`. Otherwise, use a range of `[3, 8]`."

:::

Great! Now our circles are sized according to their happiness score (and screen size), and colored according to their continent.

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

To learn how to:

-   Add axes, titles and legends to the beeswarm plot
-   Show tooltips with information about the beeswarm plot's data points
-   Add filters and hover effects to the beeswarm plot

Enroll in the **Better Data Visualizations with Svelte** by clicking the image below:

<CallToAction />

## Need help? Further reading

### Scales

-   [`scaleSqrt`](https://observablehq.com/@d3/continuous-scales#scale_sqrt)
-   [`scaleOrdinal`](https://observablehq.com/@d3/ordinal-scales#scale_ordinal)

### Theory

-   [Linear vs. Quadratic Change](https://eagereyes.org/blog/2008/linear-vs-quadratic-change)