- How do I use it ?
- NPM
- API
- UMD
- Examples
- Guidelines
- What is it ?
- Which browsers ?
- Which version of Javascript
- Which dependencies ?
- Usage
- Installation
- Youtube
- Known Issues
- Acknowledgement
- Support
If you are reading this document from NPM, relative links and images might not work, instead refer to the GITHUB README.
Below table describes the techinal jargon used for this repository.
Phrase | Definition |
---|---|
๐ | link to related doc, if not then this |
๐ | link to script |
xyz.(a) | single argument a |
xyz.(a[,b[,c]]) {a'|a'',b',c'} | optional arguments b and c with argument a having variable type(s) a' or a'',b having b' and c having c'.* |
{x} | a variable y with typeof y === "x" |
lexiconRainbow | lexicon-rainbow instance |
LexiconRainbow | lexicon-rainbow constructor |
*: Possible variable types: "number", "string", "function", "boolean". For clear distinction '{}' represents object literal while '[]' represents an array literal.
As a developer, you are probably more interested in just getting the script and dropping in your html file. So the ones you should care about are marked with โ
root |-- dev | |-- lexiconRainbow.d3v3.dev.js (development version of the library for d3 v3) ๐ โ | `-- lexiconRainbow.d3v4.dev.js (development version of the library for d3 v4) ๐ โ |-- min | |-- lexiconRainbow.d3v3.min.js (minified version of the library for d3 v3) ๐ โ | `-- lexiconRainbow.d3v4.min.js (minified version of the library for d3 v4) ๐ โ |-- pretty | |-- lexiconRainbow.d3v3.pretty.js (beautified version of the library for d3 v3) ๐ โ | `-- lexiconRainbow.d3v4.pretty.js (beautified version of the library for d3 v4) ๐ โ |-- examples | |-- AminoAcids | | |-- AAColorScheme.png (Glyph) ๐ | | |-- aminoAcids.jpg (Output of the example) ๐ | | |-- droplet.png (Glyph) ๐ | | |-- index_v3.html (d3 v4 example) ๐ | | |-- index_v4.html (d3 v4 example) ๐ | | `-- loadData.js (Load data via script tag) ๐ | |-- Minimal | | |-- index_v3.html (d3 v3 example) ๐ | | |-- index_v4.html (d3 v4 example) ๐ | | `-- minimal.jpg (Output of the example) ๐ | |-- RandomDataset | | |-- index_v3.html (d3 v3 example) ๐ | | |-- index_v4.html (d3 v4 example) ๐ | | |-- droplet.png (Glyph) ๐ | | `-- randomDataset.jpg (Output of the example) ๐ | |-- ServerDownTime | | |-- index_v3.html (d3 v3 example) ๐ | | |-- index_v4.html (d3 v4 example) ๐ | | |-- server.png (Glyph) ๐ | | `-- serverDownTime.jpg (Output of the example) ๐ | |-- USvotes | | |-- index_v3.html (d3 v3 example) ๐ | | |-- index_v4.html (d3 v4 example) ๐ | | |-- loadData.js (Load data via script tag) ๐ | | |-- usFlag.png (Glyph) ๐ | | `-- USvotes.jpg (Output of the example) ๐ | |-- USvotes_programmatic | | |-- index_v3.html (d3 v3 example) ๐ | | |-- index_v4.html (d3 v4 example) ๐ | | |-- loadData.js (Load data via script tag) ๐ | | |-- usFlag.png (Glyph) ๐ | | `-- USvotes_programmatic.jpg (Output of the example) ๐ | `-- Protein | |-- index_v3.html (d3 v3 example) ๐ | |-- index_v4.html (d3 v4 example) ๐ | |-- protein1.jpeg (Glyph) ๐ | |-- protein2.jpg (Glyph) ๐ | |-- protein3.png (Glyph) ๐ | `-- rainbow.gif (Output of the example) ๐ |-- snippets (Code samples for BioJS) |-- img | `-- anatomy.png (Parts of the visualization) ๐ |-- tests | |-- index_v3.html (Page for headless testing with d3 v3) ๐ | |-- index_v4.html (Page for headless testing with d3 v4) ๐ | |-- phantomjsTest.js (Render ../index.*\.html and print base64 data uri) ๐ | `-- nodejsTest.js (test for node, npm install) ๐ |-- docs | |-- CODE_OF_CONDUCT.md (CoC) ๐ | |-- LICENSE (License) ๐ | |-- README.md (Readme) ๐ โ | |-- API.md (Readme) ๐ โ | `-- CONTRIBUTING.md (Contribution guideline) ๐ |-- .gitignore (Ignore ./private) ๐ |-- package.json (Package json file for npm) ๐ |-- .travis.yml (For testing with PhantomJS) ๐ |-- .eslintrc.json (Custom linting rules :trollface:) ๐ `-- .jsbeautifyrc.json (Rules for jsbeautify) ๐
Below is an summary of different parts of the visualization.
Lexicon-rainbow is a library for visualizing combination of an ordinal scale (top) and a linear scale (bottom). Suppose you have items sorted based on some criteria at the top. From each item, you can define a link (ribbon, arm or whatever name you fancy) that goes to the linear scale. This link can be an integer, float or a range. You can specify as many ordinal and linear scales as you like. Then you either use the inbuit GUI or programmatic access (lexiconRainbow.ordinalG.update({number})
) to create new views of your data.
Lexicon-rainbow is tested with ie11, safari, chrome and firefox. It should also work on ie10, however svg related bugs maybe present under ie10. If you find one, please report them.
It is written in ES5. You do NOT need Babel and Browserify.
There are 2 versions of lexicon-rainbow, one compatible with d3.v3 (3.5.17) and the other with d3.v4 (latest).
Refer to Usage and API Reference
Drop one of the script tags below in your html file.
Your version of d3 | Script tag to use | |
Development version | d3v3 |
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/dev/lexiconRainbow.d3v3.dev.js"></script>
|
d3v4 |
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/e2a8a5a0/dev/lexiconRainbow.d3v4.dev.js"></script>
|
|
Pretty version | d3v3 |
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/pretty/lexiconRainbow.d3v3.pretty.js"></script>
|
d3v4 |
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/pretty/lexiconRainbow.d3v4.pretty.js"></script>
|
|
Minified version | d3v3 |
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/min/lexiconRainbow.d3v3.min.js"></script>
|
d3v4 |
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/min/lexiconRainbow.d3v4.min.js"></script>
|
$ npm install lexicon-rainbow
Once you install the module you can call from the root of your project:
$ node node_modules/lexicon-rainbow/tests/nodejsTest.js
or you can move to the directory of the lexicon rainbow and call:
$ npm run test
OR
$ npm test
The test file requires
module and prints out all enumerable properties of the exported object.
This library is not for use on server side (because you cannot manipulate the DOM).
The test file is just there to control if the object can be exported.
To use this library with other libraries on the server side to be later used for client consumption you shoulduse a tool like Browserify.
For a detailed list of available methods, refer to API.md.
The general pattern for invoking lexicon-rainbow is as follows:
(new LexiconRainbow) //initiate a new instance
.container("#containerDiv") //pass a node or id
.forceStyle() //take advantage of embedded style
.w(600) //set width of the viewbox
.h(200) //set height of the viewbox
.sW("1000px") //set css style width of the viewport
.sH("auto") //set css style height of the viewport
.position("relative") //set css style position
.sTop("0px") //set css style top property of the viewport
.sLeft("0px") //set css style left property of the viewport
.sMargin("100px auto 0px auto") //set css style margin property of the viewport
.lexID("lexiconRainbow") //set an id for the generated SVG
.input(sample) //provide the data
.append(true) //initialize internal variables
.render(); //render scene
Note: Viewport means the space taken up by the
ownerSVGElement
in document coordinates. Think of it as the values returned bySVGElement.getBoundingClientRect()
. (Space excluding the SVG's border) The Viewbox on the other hand is the user defined coordinate system in units of userSpaceOnUse
The library is wrapped inside UMD. You should be able to use it with CommonJS or AMD. In browser environment you will have LexiconRainbow
constructor as global variable.
Static figures only gives an idea. You can go to my youtube channel and start from this video to have a better overview.
- When there are too many links coming out from one item, you might have flicker issues,
as the event.target/elementFromPoint does not point to the right element. For the time being
consider turning off
enableOnpick
. - In lexicon-rainbow d3v3 version, if your data object has the "axis" field set, the tick path won't get colored due to stroke style not set. This will be fixed in the next patch.
- People
- Tuncer Can for server side maintanance and file hosting
- Mike Bostock for D3.
- Projects
- The Mutaframe (
) project, started in 2016 aims to be a visualization platform for mutations in human proteome (single nucleotide variants on coding regions of the human genome) that is guided by machine learning. What was unique about the project is that, it's not just about visualization of any data, it is related to healthcare. Several tools that is developed during this project (including this one) can also be used for generic purpose. I will document and release these tools as I sieze the opportunity.
- The Mutaframe (
- Organizations
I work on several small to medium sized projects. Development in one can also lead to development of the others. So if you would like to show your support for this project you can contribute to my PATREON page.