How to migrate from C3.js?

What are the changes?

• Basically there are no big difference, except namespace and few option name changes.
• Every interface is identical to those in C3.js'.

Here is a step by step guide for migration

Step 1

• Load d3 v4.x to your page, replacing your old d3 v3.x.
• Replace C3.js files to billboard.js

<!-- Your code -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.17/d3.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3-0.4.11.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/c3/0.4.11/c3.min.css">

<!-- Change to -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.js"></script>
<script src="$YOUR_PATH/billboard.js"></script>
<link rel="stylesheet" href="$YOUR_PATH/billboard.css">

Step 2

• Change the namespace of your generation code from c3 to bb.
• Almost all of the options are identical to the ones before. (Check Step 5 for options name changes)

// Your code
var chart = c3.generate( ... );


// Change to
var chart = bb.generate( ... );

Step 3

Replace your defined CSS class prefix from c3- to bb-

/* Your code */
.c3-region.regionY {
    fill: red;
}
.c3-region.regionY2 {
    fill: green;
}

/* Change to */
.bb-region.regionY {
    fill: red;
}
.bb-region.regionY2 {
    fill: green;
}

Step 4

Look for any code(ex. selectors using c3- prefix) using c3 namespace and replace them to bb.

// Your code
d3.select(".c3-chart-lines")
   .attr( ... );

// Change to
d3.select(".bb-chart-lines")
   .attr( ... );

Step 5

Change generation options if they are used.

C3.js	billboard.js
onmouseover	onover
onmouseout	onout
data.onmouseover	data.onover
data.onmouseout	data.onout
legend.item.onmouseover	legend.item.onover
legend.item.onmouseout	legend.item.onout

Step 6

Other changes you might need to know.

Removed d3 member variable from ChartInternal class

There's no reason to hold d3 reference within.
To reference d3 on your callback function, just use window.d3 directly instead of this.d3.

// Your code
var chart = c3.generate({
	...
	onrendered: function() {
		// 'this' reference instance of 'ChartInternal'
		this.d3.select( ... );
	},
	tooltip: {
		contents: function() {
			this.d3.select( ... );
		}
	}
});

// Change to
var chart = bb.generate({
	...
	onrendered: function() {
		d3.select( ... );
	},
	tooltip: {
		contents: function() {
			d3.select( ... );
		}
	}
});

Finished

If you have reviewed and applied all of the above steps, you're done!

Bear in mind:
Not every detail is exactly the same as C3.js', because there are changes caused by D3 v4 from the previous version.
These differences will be taken as future considerations, if needed by the community.