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: An Introduction to Beeswarm Charts with D3 and Svelte
description: 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. 
role: "INTRODUCTION"
privateVideoUrl: https://stream.mux.com/aCb01sFtDo13ujytrThKvAP7cn00yD8d2bKez1cYeKv88.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 this module, we'll be building a [**beeswarm chart**](https://observablehq.com/@d3/beeswarm) that uses physics-based force layout to arrange bubbles with motion.

The chart visualizes happiness data from the [2022 World Happiness Report](https://worldhappiness.report/ed/2022/#appendices-and-data). Each bubble represents a country, and you can arrange the bubbles by continent, by clicking anywhere on the chart. 

The chart is responsive, includes hover interactions, and has meaningful peripheral elements. Additionally, the chart will feature a physics-based force layout that's created via [`d3-force`](https://github.com/d3/d3-force).

## Setting Up a New Svelte Project

You can get started by scaffolding our [project template](https://github.com/connorrothschild/svelte-visualization-template). 

In a new project directory, run:

```shell
npx degit connorrothschild/svelte-visualization-template beeswarm
```

And once it is cloned, run:

```shell
cd beeswarm
npm install
npm run dev
```

And we're ready to get started!

## First Steps of Building a Beeswarm Chart - Creating a Force Layout

We begin by drawing circles via a physics-based force layout to arrange the circles.

This means that rather than apply some fixed x and y position to each circle, we'll let a physics engine determine the position of each circle. In particular, we'll be using [`d3-force`](https://github.com/d3/d3-force) which will do the following:

<Blockquote>

This module implements a velocity Verlet numerical integrator for simulating physical forces on particles. The simulation is simplified: it assumes a constant unit time step Δt = 1 for each step, and a constant unit mass m = 1 for all particles. As a result, a force **F** acting on a particle is equivalent to a constant acceleration **a** over the time interval **Δt**, and can be simulated simply by adding to the particle’s velocity, which is then added to the particle’s position.

</Blockquote>

Don't have any idea what's going on? No problem. D3 is going to handle a lot of the "behind the scenes" math and physics for us, and we'll convert that into points on a canvas. 

### A Force Simulation Primer

:::note

This module is somewhat advanced and it wouldn't hurt to spend a bit of time with `d3-force` before diving in. Here's a [great introduction](https://observablehq.com/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho) from Ben Tanen.

:::

The basic component of use here will be a force simulation. Here's an example of force simulation:

```js
import { forceSimulation, forceY, forceX, forceCollide } from "d3-force";

const simulation = forceSimulation(nodes)
    .force("x", forceX().x(d => d.x).strength(0.02))
    .force("y", forceY().y(d => d.y).strength(0.02))
```

Here, `nodes` would be an array of objects, each containing at least an `x` and `y` property. (Those are needed because they are referenced in the `force*` functions.)

We can apply any number of **forces**, where each represents a new interaction with the overall simulation. For example, if we omitted `forceX`, our simulation would only attract toward the vertical axis.

We could also add others. For example, we could add a `forceCollide` to make sure that the circles don't overlap. In the example below (a barebones version of our final chart), click the button to see what something like `forceCollide` does:

<iframe src="https://codesandbox.io/embed/force-collide-toggling-7xndiv?view=preview" 
      style={{ width: "100%", height: "400px", border: "0" }}
      allow="accelerometer; ambient-light-sensor; camera; encrypted-media; geolocation; gyroscope; hid; microphone; midi; payment; usb; vr; xr-spatial-tracking"
      sandbox="allow-forms allow-modals allow-popups allow-presentation allow-same-origin allow-scripts" 
/>

* * *

In our chart, we're going to want three forces: `forceX`, `forceY`, and `forceCollide`. Here's a brief description of each:

-   [`forceX`](https://github.com/d3/d3-force#forceX): attracts nodes towards the horizontal axis toward a given position, `x`.
-   [`forceY`](https://github.com/d3/d3-force#forceY): attracts nodes towards the vertical axis toward a given position, `y`.
-   [`forceCollide`](https://github.com/d3/d3-force#forceCollide): makes sure that no two nodes overlap.

Let's begin by importing our data and defining which columns we want to map to the `forceX` and `forceY` forces.

`data.js` will look like this:

```js
export default [
  {
    country: "Afghanistan",
    happiness: 2.404,
    continent: "Asia"
  },
  {
    country: "Lebanon",
    happiness: 2.955,
    continent: "Asia"
  },
  {
    country: "Zimbabwe",
    happiness: 2.995,
    continent: "Africa"
  },
  {
    country: "Rwanda",
    happiness: 3.268,
    continent: "Africa"
  },
  // ...
];
```

...where each country is represented by an object. 

In total, there is one object for every country in the world. Each object includes its name (`country`), its happiness score (`happiness`), and its continent (`continent`).

You can download the complete file [here](https://d2uusema5elisf.cloudfront.net/courses/building-a-beeswarm-chart-with-svelte-and-d3/module_00/lesson_00.01/public/data/data.json) or see it in CSV form [here](https://docs.google.com/spreadsheets/d/1ebYGFODm2z7hUmNlYkjThV23YNxwWkbMY2wIbiWhM5Y/edit?usp=sharing). 

In `App.svelte`, we can import our data and `console.log` to verify that everything is working.

```html
<script>
    import data from "$data/data.js";
    console.log(data)
</script>
```

Within our chart, each circle's attributes will be determined in the following way:

-   Each circle's radius and x position will be determined by its `happiness` score
-   Each circle's color and y position will be determined by its `continent`

As it relates to our force layout:

-   Map the `happiness` column to the `forceX` force.
-   When grouped by continent, map the `happiness` column to the `forceY` force.
-   Apply a `forceCollide` to make sure that no two circles overlap.

Let's do it!

```html
<script>
    import data from "$data/data.js";
    import { forceSimulation, forceX, forceY, forceCollide } from "d3-force";

    const RADIUS = 5;
    const simulation = forceSimulation(data)
        .force("x", forceX().x(d => d.happiness).strength(0.8))
        .force("y", forceY().y(d => d.continent).strength(0.2))
        .force("collide", forceCollide().radius(RADIUS);
</script>
```

:::note 

The `strength` parameter of each force is a multiplier for the force's effect on the simulation. You can set `strength` to any number between 0 and 1 to make it more or less powerful.

:::

If you `console.log` the `simulation`, you'll see it's an object with multiple properties.

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

Some of these properties allow us to adjust how our simulation behaves. For example, we can adjust the speed at which the bubbles move using [`simulation.alphaDecay`](https://github.com/d3/d3-force#simulation_alphaDecay). We can stop the simulation entirely using [`simulation.stop()`](https://github.com/d3/d3-force#simulation_stop), or we can start it again using [`simulation.restart()`](https://github.com/d3/d3-force#simulation_restart).

Of interest to us is `simulation.nodes()` which returns an array of all the nodes in the simulation.

In other words, this array will represent each circles' x and y positions, as well as some other attributes.

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

As we can see, each object in the array represents a country in our original dataset (with its original `country`, `happiness`, and `continent` properties). But it also has new ones, like `x` and `y`, which represent the force-directed position of the circle.

There are two problems. First, each circle's `x` value is unscaled, and second, `y` is consistently `NaN` (which stands for "Not a Number"). This is because the `forceY` force is applied to the `continent` column, and the `continent` column is not numeric. The `.x()` and `.y()` functions require a number to compute their coordinates.

In order to address this, we'll create `xScale` and `yScale` functions.

## Scaling Data with `d3-scale` Methods

### Setting Up a D3 Linear Scale for `xScale`

Let's begin by instantiating an `xScale` function, which will take in a raw "happiness" score and return some value between 0 and the width of the chart.

First, we'll bind the chart container's `clientWidth` to `width`. We'll also add some margin so that we can account for this chart padding in our newly created scales. Additionally, we'll create an `innerWidth` variable to represent the width of the chart minus the margin, and the same for `innerHeight`.

```html
<script>
  let width = 400, 
    height = 400;

  const margin = { top: 0, right: 0, bottom: 20, left: 0 };

  $: innerWidth = width - margin.left - margin.right;
  let innerHeight = height - margin.top - margin.bottom;

  // Other script code...
</script>

<div class='chart-container' bind:clientWidth={width}>
  <svg {width} {height}>
  </svg>
</div>
```

:::note 

`width` updates, but `height` doesn't, which is why we use `$:` to create `innerWidth`.

:::

Now we want to construct an `xScale` function, which maps a raw happiness score to a value between 0 and `innerWidth`.

```html
<script>
  import { scaleLinear } from "d3-scale";

  $: xScale = scaleLinear()
    .domain([1, 9]) // Alternatively, we could pass .domain(extent(data, d => d.happiness))
    .range([0, innerWidth])
</script>
```

Note that we are using a fixed domain of `[1, 9]`, because the happiness scores all fall within this range. We could alternatively pass a domain of `extent(data, d => d.happiness)`, which would dynamically generate the domain based on the `min` and `max` `happiness` scores, but we know that our data will always fall within this `[1, 9]` domain — so we'll pass it explicitly to have greater control.

### Setting Up a D3 Band Scale for `yScale`

Let's do the same thing with our `yScale` function. Rather than use `scaleLinear` which is used for numeric data, we'll use [`scaleBand`](https://observablehq.com/@d3/d3-scaleband) which is used for ordinal or categorical data (such as `continent` in our dataset).

`scaleBand` will take in an array of values in the domain (which are not numeric in nature), and return a position that is evenly spaced with the given range.

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

Here, passing any of the values `A`, `B`, `C`, or `D` to `scaleBand` would return that letter's index divided by the number of values in the array times the range. Assuming the range is `[0, 400]`, `A` would return 0, `B` would return 100, `C` would return 200, and `D` would return 300.

In our case, we want to pass in each of the unique `continent` values as the domain for our `yScale`, and return an evenly positioned y value in the range.

We could simply pass our array of continents in using `data.map(d => d.continent)`, but to make for a more visually appealing chart, we'll **sort the continents by their average happiness scores**. (It's small tweaks like this that can bring charts to the next level.)

We'll do some wizardry using [`d3.rollups`](https://observablehq.com/@d3/d3-group) to get this list of continents sorted by their happiness scores.

```js
import { mean, rollups } from "d3-array";

// Generate the average for each continent, so that we can sort according to that
const continents = rollups(
    data,
    v => mean(v, d => d.happiness),
    d => d.continent
  ) // Group data by continent and return the group-wide mean
  .sort((a, b) => a[1] - b[1]) // Sort according to value
  .map(d => d[0]); // Grab the continent name
```

:::note

Don't worry if you don't know what's going on here. If you want to learn more though, see [this guide](https://observablehq.com/@d3/d3-group).

:::

Now if you print `continents`, you'll see it's sorted in the following order:

-   `Africa`
-   `Asia`
-   `South America`
-   `North America`
-   `Europe`
-   `Oceania`

Let's pass that array into `yScale`:

```js
let yScale = scaleBand()
  .domain(continents)
  .range([innerHeight, 0])
  .paddingOuter(0.5);
```

Here, we're using [`paddingOuter`](https://observablehq.com/@d3/d3-scaleband#cell-180) to give some breathing room on the top and bottom of the chart.

## Drawing D3 Visualization Circles with Svelte

Let's revisit the `simulation` we instantiated earlier, and pass in our `xScale` and `yScale` functions.

```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 = simulation.nodes();
```

At first, you'll notice this errors out, because `xScale` is a reactive variable whereas `simulation` was instantiated with `let`. Because `xScale` is referenced within `simulation`, we need to replace `let` with `$:`. The same goes for `nodes`.

```js
$: simulation = forceSimulation(data)
// ...

$: nodes = simulation.nodes();
```

Now, if you `$: console.log(nodes)`, you will see that each node has a properly scaled `x` and `y` value.

With this set of nodes, which are now scaled from our data, we can draw our circles. As with previous examples, we'll write our markup directly, and use an `{#each}` block to iterate over our data.

```html
<svg {width} {height}>
  <g class="inner-chart" transform="translate({margin.left}, {margin.top})">
    {#each nodes as node}
      <circle cx={node.x} cy={node.y} r={node.happiness} fill="steelblue" />
    {/each}
  </g>
</svg>
```

:::note 

Here, we are wrapping our inner chart with a `<g>` element, and translating it according to our `margin` values. This is so that we can add axes later on, and have them be positioned correctly.

:::

Altogether, our code for drawing circles linked to our data looks like this:

```html
<script>
  import data from "$data/data.js";
  import { forceSimulation, forceX, forceY, forceCollide } from "d3-force";
  import { scaleLinear, scaleBand } from "d3-scale";

  let width = 400,
    height = 400;
  const margin = { top: 0, right: 0, left: 0, bottom: 20 };

  $: innerWidth = width - margin.left - margin.right;
  let innerHeight = height - margin.top - margin.bottom;

  const RADIUS = 5;

  import { mean, rollups } from "d3-array";

  // Generate the average for each continent, so that we can sort according to that
  const continents = rollups(
    data,
    v => mean(v, d => d.happiness),
    d => d.continent
  ) // Group data by continent and return the group-wide mean
    .sort((a, b) => a[1] - b[1]) // Sort according to value
    .map(d => d[0]); // Grab the continent name

  $: xScale = scaleLinear()
    .domain([1, 9]) // Alternatively, we could pass .domain(extent(data, d => d.happiness))
    .range([0, innerWidth]);

  let yScale = scaleBand()
    .domain(continents)
    .range([innerHeight, 0])
    .paddingOuter(0.5);

  $: 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))

  $: nodes = simulation.nodes();
  $: console.log(nodes);
</script>

<div class='chart-container' bind:clientWidth={width}>
  <svg {width} {height}>
    <g class="inner-chart" transform="translate({margin.left}, {margin.top})">
      {#each nodes as node}
        <circle cx={node.x} cy={node.y} r={node.happiness} fill="steelblue" />
      {/each}
    </g>
  </svg>
</div>
```



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

Congrats! We drew some circles. Very obviously, there's something wrong though. The circles are centered around the (0, 0) origin, and don't seem to be moving or actually correlated with our data points in any meaningful way. (We can fix this by resizing the window, but that's obviously not a reasonable solution.) We'll address this in our next lesson.

<CallToAction />

## Need help? Further reading

### Force layout

-   [D3 Force layout](https://www.d3indepth.com/force-layout/)
-   [A tutorial to using `d3-force` from someone who just learned how to use it](https://observablehq.com/@ben-tanen/a-tutorial-to-using-d3-force-from-someone-who-just-learned-ho)
-   [Use the (`d3`) force](https://wattenberger.com/blog/d3-force)

### Array manipulation

-   [`rollups`](https://observablehq.com/@d3/d3-group#rollups)

### Scales

-   [`scaleBand`](https://observablehq.com/@d3/d3-scaleband)

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. 

I got lost at the data part.. When I go on data.js in the git repository I do not get access to the extensive list of data shown in the video

Manèle

Hi Manèle, here's a direct link. Let me know if this doesn't work!export default [
  {
    country: "Afghanistan",
    happiness: 2.404,
    continent: "Asia"
  },
  {
    country: "Lebanon",
    happiness: 2.955,
    continent: "Asia"
  },
  {
    country: "Zimbabwe",
    happiness: 2.995,
    continent: "Africa"
  },
  {
    country: "Rwanda",
    happiness: 3.268,
    continent: "Africa"
  },
  {
    country: "Botswana",
    happiness: 3.471,
    continent: "Africa"
  },
  {
    country: "Lesotho",
    happiness: 3.512,
    continent: "Africa"
  },
  {
    country: "Sierra Leone",
    happiness: 3.574,
    continent: "Africa"
  },
  {
    country: "Tanzania",
    happiness: 3.702,
    continent: "Africa"
  },
  {
    country: "Malawi",
    happiness: 3.75,
    continent: "Africa"
  },
  {
    country: "Zambia",
    happiness: 3.76,
    continent: "Africa"
  },
  {
    country: "India",
    happiness: 3.777,
    continent: "Asia"
  },
  {
    country: "Togo",
    happiness: 4.112,
    continent: "Africa"
  },
  {
    country: "Jordan",
    happiness: 4.152,
    continent: "Asia"
  },
  {
    country: "Mauritania",
    happiness: 4.153,
    continent: "Africa"
  },
  {
    country: "Yemen",
    happiness: 4.197,
    continent: "Asia"
  },
  {
    country: "Ethiopia",
    happiness: 4.241,
    continent: "Africa"
  },
  {
    country: "Chad",
    happiness: 4.251,
    continent: "Africa"
  },
  {
    country: "Egypt",
    happiness: 4.288,
    continent: "Africa"
  },
  {
    country: "Madagascar",
    happiness: 4.339,
    continent: "Africa"
  },
  {
    country: "Sri Lanka",
    happiness: 4.362,
    continent: "Asia"
  },
  {
    country: "Myanmar",
    happiness: 4.394,
    continent: "Asia"
  },
  {
    country: "Eswatini, Kingdom of",
    happiness: 4.396,
    continent: "Africa"
  },
  {
    country: "Namibia",
    happiness: 4.459,
    continent: "Africa"
  },
  {
    country: "Mali",
    happiness: 4.479,
    continent: "Africa"
  },
  {
    country: "Palestinian Territories",
    happiness: 4.483,
    continent: "Asia"
  },
  {
    country: "Pakistan",
    happiness: 4.516,
    continent: "Asia"
  },
  {
    country: "Tunisia",
    happiness: 4.516,
    continent: "Africa"
  },
  {
    country: "Kenya",
    happiness: 4.543,
    continent: "Africa"
  },
  {
    country: "Nigeria",
    happiness: 4.552,
    continent: "Africa"
  },
  {
    country: "Uganda",
    happiness: 4.603,
    continent: "Africa"
  },
  {
    country: "Comoros",
    happiness: 4.609,
    continent: "Africa"
  },
  {
    country: "Benin",
    happiness: 4.623,
    continent: "Africa"
  },
  {
    country: "Cambodia",
    happiness: 4.64,
    continent: "Asia"
  },
  {
    country: "Burkina Faso",
    happiness: 4.67,
    continent: "Africa"
  },
  {
    country: "Turkey",
    happiness: 4.744,
    continent: "Asia"
  },
  {
    country: "Ghana",
    happiness: 4.872,
    continent: "Africa"
  },
  {
    country: "Iran",
    happiness: 4.888,
    continent: "Asia"
  },
  {
    country: "Guinea",
    happiness: 4.891,
    continent: "Africa"
  },
  {
    country: "Venezuela",
    happiness: 4.925,
    continent: "South America"
  },
  {
    country: "Iraq",
    happiness: 4.941,
    continent: "Asia"
  },
  {
    country: "Gabon",
    happiness: 4.958,
    continent: "Africa"
  },
  {
    country: "Georgia",
    happiness: 4.973,
    continent: "Europe"
  },
  {
    country: "Niger",
    happiness: 5.003,
    continent: "Africa"
  },
  {
    country: "Senegal",
    happiness: 5.046,
    continent: "Africa"
  },
  {
    country: "Cameroon",
    happiness: 5.048,
    continent: "Africa"
  },
  {
    country: "Mozambique",
    happiness: 5.048,
    continent: "Africa"
  },
  {
    country: "Morocco",
    happiness: 5.06,
    continent: "Africa"
  },
  {
    country: "Congo",
    happiness: 5.075,
    continent: "Africa"
  },
  {
    country: "Ukraine",
    happiness: 5.084,
    continent: "Europe"
  },
  {
    country: "Liberia",
    happiness: 5.122,
    continent: "Africa"
  },
  {
    country: "Algeria",
    happiness: 5.122,
    continent: "Africa"
  },
  {
    country: "Laos",
    happiness: 5.14,
    continent: "Asia"
  },
  {
    country: "Bangladesh",
    happiness: 5.155,
    continent: "Asia"
  },
  {
    country: "Gambia",
    happiness: 5.164,
    continent: "Africa"
  },
  {
    country: "Azerbaijan",
    happiness: 5.173,
    continent: "Europe"
  },
  {
    country: "South Africa",
    happiness: 5.194,
    continent: "Africa"
  },
  {
    country: "Albania",
    happiness: 5.199,
    continent: "Europe"
  },
  {
    country: "North Macedonia",
    happiness: 5.199,
    continent: "Europe"
  },
  {
    country: "Ivory Coast",
    happiness: 5.235,
    continent: "Africa"
  },
  {
    country: "Indonesia",
    happiness: 5.24,
    continent: "Asia"
  },
  {
    country: "Libya",
    happiness: 5.33,
    continent: "Africa"
  },
  {
    country: "Bulgaria",
    happiness: 5.371,
    continent: "Europe"
  },
  {
    country: "Nepal",
    happiness: 5.377,
    continent: "Asia"
  },
  {
    country: "Tajikistan",
    happiness: 5.377,
    continent: "Asia"
  },
  {
    country: "Armenia",
    happiness: 5.399,
    continent: "Europe"
  },
  {
    country: "Hong Kong S.A.R. of China",
    happiness: 5.425,
    continent: "Asia"
  },
  {
    country: "Russia",
    happiness: 5.459,
    continent: "Asia"
  },
  {
    country: "North Cyprus",
    happiness: 5.467,
    continent: "Europe"
  },
  {
    country: "Turkmenistan",
    happiness: 5.474,
    continent: "Asia"
  },
  {
    country: "Vietnam",
    happiness: 5.485,
    continent: "Asia"
  },
  {
    country: "Ecuador",
    happiness: 5.533,
    continent: "South America"
  },
  {
    country: "Montenegro",
    happiness: 5.547,
    continent: "Europe"
  },
  {
    country: "Peru",
    happiness: 5.559,
    continent: "South America"
  },
  {
    country: "Paraguay",
    happiness: 5.578,
    continent: "South America"
  },
  {
    country: "China",
    happiness: 5.585,
    continent: "Asia"
  },
  {
    country: "Bolivia",
    happiness: 5.6,
    continent: "South America"
  },
  {
    country: "Malaysia",
    happiness: 5.711,
    continent: "Asia"
  },
  {
    country: "Dominican Republic",
    happiness: 5.737,
    continent: "North America"
  },
  {
    country: "Mongolia",
    happiness: 5.761,
    continent: "Asia"
  },
  {
    country: "Bosnia and Herzegovina",
    happiness: 5.768,
    continent: "Europe"
  },
  {
    country: "Colombia",
    happiness: 5.781,
    continent: "South America"
  },
  {
    country: "Belarus",
    happiness: 5.821,
    continent: "Europe"
  },
  {
    country: "Kyrgyzstan",
    happiness: 5.828,
    continent: "Asia"
  },
  {
    country: "Jamaica",
    happiness: 5.85,
    continent: "North America"
  },
  {
    country: "Moldova",
    happiness: 5.857,
    continent: "Europe"
  },
  {
    country: "Thailand",
    happiness: 5.891,
    continent: "Asia"
  },
  {
    country: "Philippines",
    happiness: 5.904,
    continent: "Asia"
  },
  {
    country: "South Korea",
    happiness: 5.935,
    continent: "Asia"
  },
  {
    country: "Greece",
    happiness: 5.948,
    continent: "Europe"
  },
  {
    country: "Argentina",
    happiness: 5.967,
    continent: "South America"
  },
  {
    country: "Portugal",
    happiness: 6.016,
    continent: "Europe"
  },
  {
    country: "Honduras",
    happiness: 6.022,
    continent: "North America"
  },
  {
    country: "Japan",
    happiness: 6.039,
    continent: "Asia"
  },
  {
    country: "Uzbekistan",
    happiness: 6.063,
    continent: "Asia"
  },
  {
    country: "Mauritius",
    happiness: 6.071,
    continent: "Africa"
  },
  {
    country: "Hungary",
    happiness: 6.086,
    continent: "Europe"
  },
  {
    country: "Kuwait",
    happiness: 6.106,
    continent: "Asia"
  },
  {
    country: "El Salvador",
    happiness: 6.12,
    continent: "North America"
  },
  {
    country: "Poland",
    happiness: 6.123,
    continent: "Europe"
  },
  {
    country: "Croatia",
    happiness: 6.125,
    continent: "Europe"
  },
  {
    country: "Mexico",
    happiness: 6.128,
    continent: "North America"
  },
  {
    country: "Nicaragua",
    happiness: 6.165,
    continent: "North America"
  },
  {
    country: "Chile",
    happiness: 6.172,
    continent: "South America"
  },
  {
    country: "Serbia",
    happiness: 6.178,
    continent: "Europe"
  },
  {
    country: "Latvia",
    happiness: 6.18,
    continent: "Europe"
  },
  {
    country: "Cyprus",
    happiness: 6.221,
    continent: "Europe"
  },
  {
    country: "Kazakhstan",
    happiness: 6.234,
    continent: "Asia"
  },
  {
    country: "Guatemala",
    happiness: 6.262,
    continent: "North America"
  },
  {
    country: "Brazil",
    happiness: 6.293,
    continent: "South America"
  },
  {
    country: "Panama",
    happiness: 6.309,
    continent: "North America"
  },
  {
    country: "Estonia",
    happiness: 6.341,
    continent: "Europe"
  },
  {
    country: "Slovakia",
    happiness: 6.391,
    continent: "Europe"
  },
  {
    country: "Lithuania",
    happiness: 6.446,
    continent: "Europe"
  },
  {
    country: "Malta",
    happiness: 6.447,
    continent: "Europe"
  },
  {
    country: "Kosovo",
    happiness: 6.455,
    continent: "Europe"
  },
  {
    country: "Italy",
    happiness: 6.467,
    continent: "Europe"
  },
  {
    country: "Uruguay",
    happiness: 6.474,
    continent: "South America"
  },
  {
    country: "Spain",
    happiness: 6.476,
    continent: "Europe"
  },
  {
    country: "Romania",
    happiness: 6.477,
    continent: "Europe"
  },
  {
    country: "Singapore",
    happiness: 6.48,
    continent: "Asia"
  },
  {
    country: "Taiwan Province of China",
    happiness: 6.512,
    continent: "Asia"
  },
  {
    country: "Saudi Arabia",
    happiness: 6.523,
    continent: "Asia"
  },
  {
    country: "United Arab Emirates",
    happiness: 6.576,
    continent: "Asia"
  },
  {
    country: "Costa Rica",
    happiness: 6.582,
    continent: "North America"
  },
  {
    country: "Slovenia",
    happiness: 6.63,
    continent: "Europe"
  },
  {
    country: "Bahrain",
    happiness: 6.647,
    continent: "Asia"
  },
  {
    country: "France",
    happiness: 6.687,
    continent: "Europe"
  },
  {
    country: "Belgium",
    happiness: 6.805,
    continent: "Europe"
  },
  {
    country: "Czechia",
    happiness: 6.92,
    continent: "Europe"
  },
  {
    country: "United Kingdom",
    happiness: 6.943,
    continent: "Europe"
  },
  {
    country: "United States",
    happiness: 6.977,
    continent: "North America"
  },
  {
    country: "Canada",
    happiness: 7.025,
    continent: "North America"
  },
  {
    country: "Germany",
    happiness: 7.034,
    continent: "Europe"
  },
  {
    country: "Ireland",
    happiness: 7.041,
    continent: "Europe"
  },
  {
    country: "Australia",
    happiness: 7.162,
    continent: "Oceania"
  },
  {
    country: "Austria",
    happiness: 7.163,
    continent: "Europe"
  },
  {
    country: "New Zealand",
    happiness: 7.2,
    continent: "Oceania"
  },
  {
    country: "Israel",
    happiness: 7.364,
    continent: "Asia"
  },
  {
    country: "Norway",
    happiness: 7.365,
    continent: "Europe"
  },
  {
    country: "Sweden",
    happiness: 7.384,
    continent: "Europe"
  },
  {
    country: "Luxembourg",
    happiness: 7.404,
    continent: "Europe"
  },
  {
    country: "Netherlands",
    happiness: 7.415,
    continent: "Europe"
  },
  {
    country: "Switzerland",
    happiness: 7.512,
    continent: "Europe"
  },
  {
    country: "Iceland",
    happiness: 7.557,
    continent: "Europe"
  },
  {
    country: "Denmark",
    happiness: 7.636,
    continent: "Europe"
  },
  {
    country: "Finland",
    happiness: 7.821,
    continent: "Europe"
  }
];


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

An Introduction to Beeswarm Charts with D3 and Svelte

Masterclasses

Tutorials

Fullstack React with TypeScript