This is a short 5 minutes tutorial on the basics of using and reusing BioJS components.
...
...
@@ -11,7 +12,7 @@ This is a short 5 minutes tutorial on the basics of using and reusing BioJS comp
-------------------------
{% alert warn %}
You need to install `node` before you can start to rock. See <ahref="20_getting_started.html"> the getting started guide </a> for more info.
You need to install `node` before you can start to rock. See <ahref="{{site.baseurl}}/101/getting_started/"> the getting started guide </a> for more info.
{% endalert %}
How does the LEGO-System of BioJS works?
...
...
@@ -35,10 +36,10 @@ module.exports = biojs101;
~~~
Congratulations, you wrote your first BioJS Component!
Run
Run
~~~
node index.js
node index.js
~~~
to run this file! It should show you `3`.
...
...
@@ -60,7 +61,7 @@ Congratulations! You reused your first biojs function in the source code!
Check for yourself, type in:
~~~
node reuse.js
node reuse.js
~~~
It will show you `3` (because of console.log in `index.js`) and `9`.
...
...
@@ -98,7 +99,7 @@ var parsed_data = parser(newick);
@@ -19,7 +20,7 @@ var instance = new App({el: rootDiv, <other options>});
~~~
You might realize that an ideal snippet doesn't include any HTML at all. Well why should you?
If you convert the BioJS snippet to real HTML you would have to create this minimal HTML file for every snippet that you provide. In fact you state all your global dependencies in a global configuration file - the [`package.json`](../details/40_package_json.html)
If you convert the BioJS snippet to real HTML you would have to create this minimal HTML file for every snippet that you provide. In fact you state all your global dependencies in a global configuration file - the [`package.json`]({{site.baseurl}}/details/package_json)
~~~
<html>
...
...
@@ -36,7 +37,7 @@ var instance = new App({el: rootDiv, <other options>});
</html>
~~~
If you don't want us to create a DOM element automatically and assign this DOM element to the variable `rootDiv`, you can create your own HTML, but please use only the body part (here `<div id=rootDiv></div>`).
If you don't want us to create a DOM element automatically and assign this DOM element to the variable `rootDiv`, you can create your own HTML, but please use only the body part (here `<div id=rootDiv></div>`).
### Wait ... I have never seen `require` in a browser JS!
- First we need a `radius`,`width` and `height` value for our svg components.
-`color` is a function which will translate values into color code.
-`color` is a function which will translate values into color code.
-`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.
...
...
@@ -139,15 +140,15 @@ function converter(genome){...}
For more information about how each code component works, have a look at following [resources](http://schoolofdata.org/2013/10/01/pie-and-donut-charts-in-d3-js/).
In our final component `biojs-vis-snipspector`, we also included a function to visualize all chromosomes.
In our final component `biojs-vis-snipspector`, we also included a function to visualize all chromosomes.
You can find the complete solution of this package on [github](https://github.com/biojs/biojs-io-snipspector) and [npm](https://www.npmjs.org/package/biojs-io-snipspector).
There is no need to add your CI badges to the `package.json` , the BioJS registry will soon automatically recognize existing continuous integration services.
The modularity and re-usability is one of the key ideas of BioJS. Maybe it helps to think of biojs.io as an "App Store" for JS components and "downloading the App" means actually embedding it in a website.
The modularity and re-usability is one of the key ideas of BioJS. Maybe it helps to think of biojs.io as an "App Store" for JS components and "downloading the App" means actually embedding it in a website.
### General assumptions:
(user refers to someone who embeds your application, e.g. a website owner)
* you only have __one div__ (nobody wants to copy HTML that will change over versions, to some extent you could have more for optional user controls)
* you only have __one div__ (nobody wants to copy HTML that will change over versions, to some extent you could have more for optional user controls)
* a user is allowed to create multiple instances of your app (on the same page)
* a user might want to customize your app by changing some options - he will have its own file and customize the your settings
* a user might want to customize your app by changing some options - he will have its own file and customize the your settings
### This means:
...
...
@@ -21,7 +22,7 @@ The modularity and re-usability is one of the key ideas of BioJS. Maybe it helps
* If you want to stick with your HTML upload form, please provide at least one minimal example with just your raw component (see below for a minimal example)
* Don't use global variables!
* Consider the div that your application gets as a virtual environment for your component - only modify stuff inside of it
* A user will instantiate your application (=will call your main class with new)
* A user will instantiate your application (=will call your main class with new)
* Don't do crazy shit with document.body or the Function.prototype
* Don't query the entire web page for DOM elements - an ID is unique. So $('#fancyId') won't work and $(".fancyClass") will return you the objects of all instances
