Dec 15, 2017

5 min read

billboard.js 1.2.0 release!

It was almost 3 months since the last release. I’m really excited to announce the new release of the billboard.js today!

The main goal was implementing new features and new chart type support. Please check the release for the details:
- https://github.com/naver/billboard.js/releases/tag/1.2.0

In this article I want share the details for the changes we made.

New Features

Bubble type

Bubble is one of the general way to visualize the amount of data via the diameter of the circle(bubble).

Just set data type as “bubble” for the data you want display, as simple as other data types

bb.generate({
  data: {
    columns: [
      ["data1", 30, 350, 200, 380]
    ],
    type: "bubble"
  }
});

You can also set the maximum radius value to be used. If set, the max data bound will be set having indicated value.

bubble: {
  maxR: 50
}

Check out bubble type in action in the link below.
https://naver.github.io/billboard.js/demo/#Chart.BubbleChart

color.tile

This is the great feature to fill data areas with different patterns. Technically there’s no limit of the patterns, so you can make an unique visualized chart.

Data area filled with different patterns

The usage is simple, but you need to create own pattern type. If you don’t know about svg’s pattern, check the link below.
- https://developer.mozilla.org/ko/docs/Web/SVG/Tutorial/Patterns

There’s new color.tiles option which is a function returning an array of <pattern> elements.

color: {
 pattern: ["red", "blue", "cyan"],
 tiles: function() {
  var pattern = d3.select(document.createElementNS(d3.namespaces.svg, "pattern"))
   .attr("patternUnits", "userSpaceOnUse")
   .attr("width", "6")
   .attr("height", "6");var g = pattern
   .append("g")
   .attr("fill-rule", "evenodd")
   .attr("stroke-width", 1)
   .append("g")
   .attr("fill", "rgb(255, 127, 14)");g.append("polygon").attr("points", "5 0 6 0 0 6 0 5");
  g.append("polygon").attr("points", "6 5 6 6 5 6");  // Should return an array of SVGPatternElement
  return [
     pattern.node()
  ];
 }
}

The above example, will return a pattern element and then the node is appended to <defs>.

Check out the demos in action how this can be one of the useful feature on visualizing data.
- https://naver.github.io/billboard.js/demo/#ChartOptions.ColorTiles1
- https://naver.github.io/billboard.js/demo/#ChartOptions.ColorTiles2

Customized data points

The data points are point indication to emphasize each data values. Normally this was represented by ‘circle’.

Isn’t really bad idea using as is, but what if each data series can have different shapes rather than circles?

It’ll have more uniqueness of data series with different shapes. This was the reason on implementing the customized data points.

The ‘rectangle’ type is supported as one of the default option. Just set the point.type as “rectangle”.

bb.generate({
 data: {
  columns: [
   ['data1', 100, 200, 1000, 900, 500],
   ['data2', 20, 40, 500, 300, 200]
  ]
 },
 point: {
  type: "rectangle"
 }
});

Like color.tile option, user also can define a customized and unique shape for data points to be used.

Simply set a svg’s shape node represented as string value.

user defined ‘triangle’ data point shape

point: {
   pattern: [
      "<polygon points='2.5 0 0 5 5 5'></polygon>"
   ]
}

Data points can be combined for each data series shown in the chart.

For the example in action, check out the link below.

https://naver.github.io/billboard.js/demo/#Point.RectanglePoints

Bear in mind:
This is an ‘experimental’ feature and can have some unexpected behaviors in different occasions. This will be stabilized in the future release :)

Image export

There’re many occasions which chart rendering to be exported as an image.
This new feature will let export.

For this moment, it’s supported for non IE browsers only.

The usage is very simple. After generating a chart, call .export() method.
Without parameter, will return a base64 encoded Data URIs string.

If a function is given, Data URIs will be given as a parameter, which you can handle it in more details.

The default mime type is ‘image/png’.

chart.generate(...);chart.export();
 // --> "data:image/svg+xml;base64,PHN..."// Initialize the download automatically
chart.export("image/png", dataUrl => {
    const link = document.createElement("a");    link.download = `${Date.now()}.png`;
    link.href = dataUrl;
    link.innerHTML = "Download chart as image";    document.body.appendChild(link);
});

Check out the API doc for more details:
- https://naver.github.io/billboard.js/demo/#API.Export

line.classes

This is an useful option to apply specific class to each data lines.

line: {
   classes: [
      'line-class-data1',
      'line-class-data2'
   ]
}

class applied directly to line path element

This will let styling the line in more easy and convenient way.

For the example in action check out the below link.
- https://naver.github.io/billboard.js/demo/#Style.StyleForLines

We’re growing

Each day the usage of billboard.js is increasing. Last month reached 2K downloads per month and 100 downloads happens in each day.

This means a big growth comparing the first release in June, 2017.

And the brightest part is there’re increase participation of contributors. In this 1.2.0 release, the new features added(color.tile, customized data points, image export and line classes), was a great efforts from Julien Castelain!

The open source nature is evolving with the participation of the community and this is the positive moving for that way.

Closing

2017 was a big impressive year for billboard.js. We didn’t expected this reaction when we were releasing the 1st version.

We really appreciate for your attention and reactions. Hope billboard.js can help on your projects visualizing data in a very easy way.

Happy holidays for all and see you soon!