We will use this icon to mark check points.
A check point is a way for you to check how you are doing.

For most of the steps in this tutorial we will
provide the code as it should look after the task. It is tempting, we
know, but please, please, do not go for the “copy&paste” way.

We will use this icon to challenge you
with additional code-related tasks so you can go further at your own
pace. No inline answer will be provide for those challenges but we will
give you some guidelines and tips. By the way, within the instructions
we will use an italic font to refer to variables and pieces of code.

We will use this icon to ask you some questions related to the task your are working on.

Additional info and resources - this is not essential to complete the tutorial, but very interesting.

Tips that might help you on this task.

If you are following this tutorial as part of a workshop, do not hesitate to
raise your hand and share any questions or comments you may have.
If you are doing it by your own, you still can raise your hand in our
mailing list, just join our Google Group.

In the following section we will give you a gentle introduction on how to create a component for BioJS 2.0.
As a case study, we will continue working with chromosome data and show you how to visualize this data with D3.
First of all create a new folder called biojs-vis-snipspector by running slush biojs.
We will use this as our working bench and only edit the index.js file inside the lib folder.
Note: Please replace the current code with our following code!

1) Installing npm dependencies

For this tutorial, we will require d3 and our parser!
In npm this is very easy, just run.

arc draws our svg arc. We we set innerRadius to 0, we would get a piechart.

pie is our data transformer. D3 provides us with an converter (or layouts), which will convert an array data representation into a suitable representation for pie charts.

4) Checking for the BioJS snippet

Normally slush should have created an example snippet for you, let’s verify whether it is existent.
The file name doesn’t not matter as long as it is in the examples directory.

examples/simple_example.js

var app = require("biojs-vis-snipspector");
app({el: yourDiv});

So let’s use this snippet and show our current code, run:

npm run w

This will run sniper and let you browse our work at http://localhost:9090/examples.
Currently the snippet will be empty, but you can add some example code inside our module in lib/index.js to check whether every is working.

5) Convert our data

Now it is time to plot some data! In d3, data are arrays. So the format which our biojs-io-snipspector returns is not suitable for our representation.
Therefore we need to convert our data into this format for each chromosome (each chromosome will be represented by a pie/donut chart)

D3 handles new data with enter(). To learn more about enter,update and delete, visit the d3 tutorial.
Congratulations! You wrote your first visualization component for biojs!
Now it is time to export and build it!

To export it write a wrapper around your all your code (except the dependencies)