
Proportional Area Chart | NodeBox 3
This example is using Nodebox 3 to visualise data by drawing bubbles/circles, sized by area. We will be using a data driven approach, using external data fed in via external JSON using Google Sheets. Ending up with something like:

Proportional Area Charts usually use squares or circles, however any shape can be used, so long as you use the shape’s area to represent the data. A common technical error with area charts is to use one length to determine the shape’s size, when in fact you need to calculate the space inside the shape to determine its size. Otherwise you will cause exponential increases and decreases. [source: datavizcatalogue]
Step 0. Bring in some data
My example data is just some arbitrary values, showing coffee caffeine in some major brands in the UK. I’m going to use Google Sheets to store/create my data for the example:
- Create a new Google Sheet. Put in some data (only use numbers for the values, no commas or £/$/% signs). Or you make a copy of my sheet.
- Publish the file so it’s accessible. Use the top spreadsheet menu:
File→Publish to the weband click thePublishbutton - Close that window and go to the top right
Sharebutton and selectGet shareable linkand then use the dropdown using theMore...options and selectAnyone on the internet can find and view. Then you can useCopy Linkbutton to copy the URL. (Here's my Published Google spreadsheet) - Use Sheetsee with Glitch via this link so we can access the data in JSON format: https://spreadsheet.glitch.me/ Just paste in your copied link from step-3 into the
Paste your spreadsheet keyand hitsubmit
You will now have a URL displaying the JSON data, which we will use to pass into NodeBox. (Here’s my JSON data link)
TIP: Json-formatter is a great plugin for viewing JSON in Chrome
Let’s connect the data into NodeBox:
NodeBox has a many convenient ways to import data, we are going to connect to the data via the url, so if we update our spreadsheet, our visualisation will also update. Open NodeBox and:
- Add a
http_getnode and paste in the JSON link (from step-4 above) into theurlfield (e.g. https://spreadsheet.glitch.me/?key=1XsE6OHjsMEMeqb-Jlujw72bbDoGRPKPNdWu-SUkKeYg) - We connect the
http_getnode to alookupnode with thekeyvalue set tobody - The
lookupnode is connected to aquery_jsonnode into thejson (string)port, which should have it’squeryfield set to$

Step 1. Draw and size some circles using the data
- Grab another
lookupnode and set it’skeytocaffine(or whatever your data column name you are using for your values) - Get a
ellipsenode and connect thelookupnode to it’swidthandheight. NodeBox will automatically add the same amount of circles based on the data we passed in. - We can’t see the circles as they are stacked on top of each other. Just so we can see what’s happening let add a
colorizenode and connect theellipsenode to it’sshapeport. We can now change the colour, I’m using#f45844from the awesome swiss style color picker. Then turning the alpha down so we can see all the circles.

We can now see circles sitting on top of each with their diameter set to value in the data. This is not the way we want to represent the size, we will fix this in Step 3, when we size them by area.
Step 2. Spread them out on a line
We can use the line node to space out the circles, as we can pass in the circles in each of its points. The length of the line (controlled from the point parameters) will determine the spacing.
- Add a
linenode andcountnode - Connect the
lookupnode to thecountnode. This will give us the total number of items in our data. - Connect the
countnode to thepointsport in thelinenode. It will now have a point for each data item. (You can see this by double clicking thelinenode and selecting thePoint numberscheckbox in the top left menu. - Connect the the
linenode to thepositionport in ellipse. This will loop through each points on the line to position the circles. (Change the length of thelineto change the spacing of the circles)

Step 3. Size the circles correctly
The sizes of the circles need to be drawn based off the circle’s area, not its radius or diameter. To size radiuses correctly, we look to the equation for area of a circle:
Area of circle = πr2
In this case area of the circle is the number of repetitions. We want to know r. Move some things around and we get this:
r = √(Area of circle / π)
[source: flowingdata.com]
We could do this quite easily with NodeBox:

But don’t really need the PI, just the square root will work:
Multiplying by a constant factor (such as 1/π) has no effect on the
proportionality of the relationship between data and area. For
example, if you view a visualization from farther away, all the
circles get smaller, but the proportionality stays the same.
Mathematically:sqrt(area / π) = sqrt(area) * sqrt(1 / π)
sqrt(1 / π) = 0.5641895835477…So as long as you use Math.sqrt or d3.scale.sqrt, the encoding is
accurate; you generally don’t need the π.
[source]
Let’s leave out the pi and divide, and just add a sqrt node to our sketch:

To give us control over the visual size of the circles we need to use a Convert Range this will allow us to map our source data to a target value. In our example the target end will be the max size of the circle (try changing it’s size to scale up or down the circles.
- Add a
Convert Rangenode and connect it’s output to thewidthandheightports of theellipseport - Feed the
sqrtnode into thevalueport of theConvert Rangenode - Add a
maxnode and connect it to the output of thesqrtnode and feed it into thesource endport of theConvert Rangenode

We now have proportional area circles driven by our data!
Step 4. Add some labels
We can add some labels using Textpath node. We use the sameline node to space them out and another lookup to get the labels from the data. The combine node lets us view/combine our elements.

All steps in this article have their own code files in this repo for ease of reference: https://github.com/eesur/nodebox-proportional-area-chart
Tip: If you don’t use GitHub just download the zip folder using the green clone or download button (top right)
This is a series of my explorations of using nodeBox, sharing what I’ve learnt to facilitate learning of this amazing platform. Let me know if anything a miss and thanks for reading!
Bonus (related)pic from Grammar of Graphics:

