billboard.js 1.10 release: Bubble dimension, axis culling & more!

What’s New?

Bubble dimension

The ‘bubble’ visualizes the amount by its dimension. Normally attached with the axes, displaying bigger bubble when it goes from bottom to the top.

Bubble size tied with Y Axis value
  • x Axis: represent GDP per capita
  • y Axis: represent Life expectancy
  • Bubble’s dimension: the total GDP by region.
A sample chart visualizing GDP by region and the life expectancy (source)
// for 'bubble' type, data can contain dimension value:
// - an array of [y, z] data following the order
// - or an object with 'y' and 'z' key value
// 'y' is for y axis coordination and 'z' is the bubble radius value
data: {
columns: [
["data1",
[10, 140], // or {y:10, z: 140}
[100, 30],
200
]
],
type: "bubble"
}
Bubble’s dimension tied or untied from Y Axis value

Culling for y/y2 axes

The culling option, lets handle the amount of tick texts to be displayed.
Let’s check the below example. Tick texts are overlapped each other and it is harder to read.

x Axis tick text overlapped
axis: {
y: { // or 'y2'
tick: {
culling: false
// or set maximum tick text count to be displayed
culling: {
max: 5
}
}
}
}
How culling is applied according the option

Radar axis text position

Adjustment of radar axis text position was added to this release. When mutilined text value is used, there’s a possibility of text’s position to be close from its axis edges and for some cases overlapping with the shape.

Default axis text positioning
radar: {
axis: {
text: {
// Specify 'x' or 'y' value relative its original position.
position: {
x: 5,
y: -5
}
}
}
}
Position value according its edge’s position

Improvement on callback options

The lifecycle callback options as listed below, there was’t a simple way to access the current instance itself.

var chart = bb.generate({
// @param {Chart} ctx - Instance itself
onrendered: function(ctx) {
// ctx == chart
...
}
};

New release process adoption

If you followed closely on billboard.js release cycles recently, probably experienced that releases happening more frequently than as usual.

  • To be more frequent
    For the patch version, will be released as soon as possible. Is mainly to provide fixed version more frequently & let users apply without the need to wait for the next release period.
  • Shorten release period
    Implicitly, we maintained in a 3 months period for each release. But as the cut of some burden on release process, we will try to cut the 3 months release period.
  • New RC(@next ) channel
    Starting from this release, the pre-released version(Release Candidate) will out before the official release.
    We’re planning to run in a period of 1 ~ 3 weeks to give some period of tests for users.

What’s Next?

We started to planning work for the 2.0. Is in very early stage, so there’s no significant info to share yet. Our intention is hoping to make out within this year.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
Jae Sung Park

Jae Sung Park

Front-end engineer at NAVER, creator of billboard.js