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

What’s New?

Bubble dimension

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

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

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

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

New release process adoption

  • 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?

--

--

--

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

Love podcasts or audiobooks? Learn on the go with our new app.

Recommended from Medium

3 easy ways to customize the Box UI Elements

Alert in React Native

Identity Federation with Google Identity in React App -Part II

JavaScript Algorithm: Square Every Digit

How to Integrate Ziggeo’s Video API With A Simple web app

TIL/2021–01–01

A Step-by-Step Guide to Handling Form Validation in React

Mongoose Basic for Mongo DB

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

More from Medium

Introduction to Astro

Create Real-Time Visualizations with React and D3.js

Setting up an API rule to execute queries and mutations regardless of @auth rules on Dgraph with…

INTERACTIVE WEBPAGE THROUGH APIGATEWAY USING DYNAMODB