Bubble Chart with Simulated Forces in D3.js
Before We Go Further
I wanted to start by saying I followed this video by Jonathan Soma on YT to make this chart. I tried to work with some examples of code I had found on the D3 site but was quickly overwhelmed. The video I linked to explains things reasonably well to where I understand what’s happening now.
Also, if you’re the type that wants to see the result first, behold the glory of my bubble chart!
Getting Started with D3
Before we can start writing our JS, we need a few things:
- D3 library
- Some data (I have a CSV of bogus data)
- A div (or other element) with a unique id to add our chart into
So we add
scripttag to the head of our HTML that points to any publicly hosted version of D3 v4.11, we mock some data in a CSV and we add an id of “chart” to our div. Now we’re ready to get started writing our JS.
First, we’re going to wrap everything in an IIFE (immediately invoked function expression) for easy packaging. It’s going to prevent the variables from being hoisted. In this example we probably don’t care - there’s no sensitive data to speak of - but it was in the video I followed so I went with it.
Anyway, we have an IIFE and we’ll assign a few variables: height, width, and svg.
The height and width are self-explanatory, but the svg is kind of neat and follows familiar DOM manipulation patterns in Vanilla JS. Once I realized that, it clarified things a lot. Anyway, we find the HTML element we want (the div with id=”chart”), and we append an svg element. We then give that svg some attributes. That SVG gets a g element appended to it. That g is like a container for the chart elements we’ll render out later on.
Great, now we have an svg in our parent div, and a g in our svg that will hold our child elements. We now need a set of rules for how we will display our bubbles and how they should behave. And, jeez we don’t have any data yet! Lots to do, so let’s set some more rules.
As you can see in the comments above,
radiusScale defines the rules we use to display circles/bubbles by telling it what our min and max values ARE in our data and what they SHOULD BE on the page. Simulation takes a bit more explaining, really more than I can provide, but the short answer is that it’s an object that D3 creates that has a bunch of functions we can use later. Neato. Here’s what it looks like if we console.log it out…
More broadly, the simulation object is going to simulate forces acting on our bubbles. You can see in each of the
.force lines, we give a name and then we tell the code what kind of force we want to simulate. We have three here:
- an X force
- a Y force
- a collision force
These all map to positions of our bubbles with respect to the page and with respect to each other. A quick note: the
.strength chain method determines how quickly the bubbles move across the screen on load.
Now we’re getting to the good stuff - actually showing some bubbles. To do that we’re going to write a couple of functions and use some D3 methods.
Here we tell D3 to perform actions in a specific order using the
.queue method. To use the language from the documentation, the queue method “evaluates zero or more deferred asynchronous tasks with configurable concurrency: you control how many tasks run at the same time.” That means we can control when things happen. If there were an external API call for instance, we could defer rendering until we had data or some errors to work on.
In our case, we queue up getting our data from our locally-stored CSV and then we will run the callback we gave to the .await method - the
We add that function and BOOM… wait, what? Our circles are trapped in the top left corner! See, the issue right now is that even though we have our simulation, we aren’t using it. So we need to call it in our ready function.
Here we write another function, our ticker, which will update the x and y coordinates of our circles as the simulation is run. And that’s it! Thanks for stopping by :)