{"id":21530957,"url":"https://github.com/ibrahimtanyalcin/lexicon-rainbow","last_synced_at":"2025-07-13T17:08:06.964Z","repository":{"id":143885757,"uuid":"101138759","full_name":"IbrahimTanyalcin/lexicon-rainbow","owner":"IbrahimTanyalcin","description":"Lexicon-rainbow: minimal data visualization module between a single ordinal scale and a single linear scale with in-built GUI","archived":false,"fork":false,"pushed_at":"2018-01-20T05:42:46.000Z","size":14481,"stargazers_count":9,"open_issues_count":0,"forks_count":1,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-06-26T23:54:59.971Z","etag":null,"topics":["component","d3","d3js","d3v3","d3v4","data-structures","data-visualization","es5","es5-javascript","javascript-library","parallel-coordinates","sankey","svg","visualization"],"latest_commit_sha":null,"homepage":"","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":null,"status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/IbrahimTanyalcin.png","metadata":{"files":{"readme":"docs/README.md","changelog":null,"contributing":"docs/CONTRIBUTING.md","funding":null,"license":null,"code_of_conduct":"docs/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2017-08-23T04:48:31.000Z","updated_at":"2025-03-17T23:19:38.000Z","dependencies_parsed_at":"2023-08-01T09:00:59.785Z","dependency_job_id":null,"html_url":"https://github.com/IbrahimTanyalcin/lexicon-rainbow","commit_stats":null,"previous_names":[],"tags_count":1,"template":false,"template_full_name":null,"purl":"pkg:github/IbrahimTanyalcin/lexicon-rainbow","repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimTanyalcin%2Flexicon-rainbow","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimTanyalcin%2Flexicon-rainbow/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimTanyalcin%2Flexicon-rainbow/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimTanyalcin%2Flexicon-rainbow/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/IbrahimTanyalcin","download_url":"https://codeload.github.com/IbrahimTanyalcin/lexicon-rainbow/tar.gz/refs/heads/master","sbom_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/IbrahimTanyalcin%2Flexicon-rainbow/sbom","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":265175567,"owners_count":23722661,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["component","d3","d3js","d3v3","d3v4","data-structures","data-visualization","es5","es5-javascript","javascript-library","parallel-coordinates","sankey","svg","visualization"],"created_at":"2024-11-24T02:10:57.100Z","updated_at":"2025-07-13T17:08:06.930Z","avatar_url":"https://github.com/IbrahimTanyalcin.png","language":"JavaScript","funding_links":["https://www.patreon.com/ibrahimTanyalcin"],"categories":[],"sub_categories":[],"readme":"# \u003ca id=\"h1\" href=\"#h1\"\u003eLexicon-Rainbow [:rainbow:](https://github.com/IbrahimTanyalcin/LEXICON)\u003c/a\u003e\n\n[![Build Status](https://travis-ci.org/IbrahimTanyalcin/lexicon-rainbow.svg?branch=master)](https://travis-ci.org/IbrahimTanyalcin/lexicon-rainbow) \n[![Gitter](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/lexicon-rainbow)\n[![npm version](https://badge.fury.io/js/lexicon-rainbow.svg)](https://badge.fury.io/js/lexicon-rainbow)\n[![Codacy Badge](https://api.codacy.com/project/badge/Grade/6bbb6d3fc9c54590ba90e47b3659bf7e)](https://www.codacy.com/app/IbrahimTanyalcin/lexicon-rainbow?utm_source=github.com\u0026amp;utm_medium=referral\u0026amp;utm_content=IbrahimTanyalcin/lexicon-rainbow\u0026amp;utm_campaign=Badge_Grade)\n\u003ca href=\"https://www.patreon.com/ibrahimTanyalcin\" title=\"Patreon donate\"\u003e\u003cimg src=\"https://img.shields.io/badge/patreon-donate-yellow.svg\" alt=\"Patreon donate\" /\u003e\u003c/a\u003e\n\n\u003cbr\u003e\n\n\u003chr\u003e\n\n* [How do I use it ?](#how-do-i-use-it-)\n* [NPM](#npm)\n* [API](#api)\n* [UMD](#umd)\n* [Examples](#minimal-example)\n* [Guidelines](#guidelines)\n* [What is it ?](#what-is-it-)\n* [Which browsers ?](#which-browsers-)\n* [Which version of Javascript](#which-version-of-javascript-)\n* [Which dependencies ?](#which-dependencies-)\n* [Usage](#usage)\n* [Installation](#installation)\n* [Youtube](#youtube)\n* [Known Issues](#known-issues)\n* [Acknowledgement](#acknowledgement)\n* [Support](#support)\n\n\n\u003chr\u003e\n\n\u003cbr\u003e\n\n\u003e## [One Model, Many Views][PROTEIN]:\n\u003e[\u003cimg src=\"../examples/Protein/rainbow.gif\"\u003e][PROTEIN] \n\n\u003e## [Minimal example][MINIMAL]:\n\u003e[\u003cimg src=\"../examples/Minimal/minimal.jpg\"\u003e][MINIMAL] \n\n\u003e## [Comparing 2 tables][AMINOACIDS]:\n\u003e[\u003cimg src=\"../examples/AminoAcids/aminoAcids.jpg\"\u003e][AMINOACIDS]\n\n\u003e## [Some random data][RANDOMDATA]:\n\u003e[\u003cimg src=\"../examples/RandomDataset/randomDataset.jpg\"\u003e][RANDOMDATA] \n\n\u003e## [Server down time report][SERVER]:\n\u003e[\u003cimg src=\"../examples/ServerDownTime/serverDownTime.jpg\"\u003e][SERVER] \n\n\u003e## [2016 US elections][VOTES]:\n\u003e[\u003cimg src=\"../examples/USvotes/USvotes.jpg\"\u003e][VOTES] \n\n\u003e## [Programmatic Access][PROGRAMMATIC]:\n\u003e[\u003cimg src=\"../examples/USvotes_programmatic/USvotes_programmatic.jpg\"\u003e][PROGRAMMATIC] \n\n\u003cbr\u003e\n\n## NPM\nIf you are reading this document from NPM, relative links and images might not work, instead refer to the\n\u003ca href=\"https://github.com/IbrahimTanyalcin/lexicon-rainbow\" title=\"Github Readme\"\u003e\u003cb\u003eGITHUB README\u003c/b\u003e\u003c/a\u003e.\n\n## Guidelines\n\n### Legends\n\nBelow table describes the techinal jargon used for this repository.\n\nPhrase | Definition\n-------|-----------\n:link: |link to related doc, if not then *this*\n:mag:  |link to script\nxyz.(a)|single argument *a*\nxyz.(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'.*\n{x} | a variable *y* with typeof *y* === \"x\"\nlexiconRainbow | lexicon-rainbow **instance**\nLexiconRainbow | lexicon-rainbow **constructor**\n\n\u003csub\u003e*: Possible variable types: \"number\", \"string\", \"function\", \"boolean\".\nFor clear distinction '{}' represents object literal while '[]' represents an array literal.\u003csub/\u003e\n\n### Repository folder structure\n\nAs a developer, you are probably more interested in just getting the script and dropping in your html file. \nSo the ones you should care about are marked with :white_check_mark:\n\n\u003cpre\u003e\nroot\n|-- dev\n|   |-- lexiconRainbow.d3v3.dev.js \u003csub\u003e(development version of the library for d3 v3)\u003c/sub\u003e \u003ca href=\"../dev/lexiconRainbow.d3v3.dev.js\"\u003e🔍\u003c/a\u003e \u0026#10004;\n|   `-- lexiconRainbow.d3v4.dev.js \u003csub\u003e(development version of the library for d3 v4)\u003c/sub\u003e \u003ca href=\"../dev/lexiconRainbow.d3v4.dev.js\"\u003e🔍\u003c/a\u003e \u0026#10004;\n|-- min\n|   |-- lexiconRainbow.d3v3.min.js \u003csub\u003e(minified version of the library for d3 v3)\u003c/sub\u003e \u003ca href=\"../min/lexiconRainbow.d3v3.min.js\"\u003e🔍\u003c/a\u003e \u0026#10004;\n|   `-- lexiconRainbow.d3v4.min.js \u003csub\u003e(minified version of the library for d3 v4)\u003c/sub\u003e \u003ca href=\"../min/lexiconRainbow.d3v4.min.js\"\u003e🔍\u003c/a\u003e \u0026#10004;\n|-- pretty\n|   |-- lexiconRainbow.d3v3.pretty.js \u003csub\u003e(beautified version of the library for d3 v3)\u003c/sub\u003e \u003ca href=\"../pretty/lexiconRainbow.d3v3.pretty.js\"\u003e🔍\u003c/a\u003e \u0026#10004;\n|   `-- lexiconRainbow.d3v4.pretty.js \u003csub\u003e(beautified version of the library for d3 v4)\u003c/sub\u003e \u003ca href=\"../pretty/lexiconRainbow.d3v4.pretty.js\"\u003e🔍\u003c/a\u003e \u0026#10004;\n|-- examples\n|   |-- AminoAcids\n|   |   |-- AAColorScheme.png \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/AminoAcids/AAColorScheme.png\"\u003e🔍\u003c/a\u003e\n|   |   |-- aminoAcids.jpg \u003csub\u003e(Output of the example)\u003c/sub\u003e \u003ca href=\"../examples/AminoAcids/aminoAcids.jpg\"\u003e🔍\u003c/a\u003e\n|   |   |-- droplet.png \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/AminoAcids/droplet.png\"\u003e🔍\u003c/a\u003e\n|   |   |-- index_v3.html \u003csub\u003e(d3 v4 example)\u003c/sub\u003e \u003ca href=\"../examples/AminoAcids/index_v3.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- index_v4.html \u003csub\u003e(d3 v4 example)\u003c/sub\u003e \u003ca href=\"../examples/AminoAcids/index_v4.html\"\u003e🔍\u003c/a\u003e\n|   |   `-- loadData.js \u003csub\u003e(Load data via script tag)\u003c/sub\u003e \u003ca href=\"../examples/AminoAcids/loadData.js\"\u003e🔍\u003c/a\u003e\n|   |-- Minimal\n|   |   |-- index_v3.html \u003csub\u003e(d3 v3 example)\u003c/sub\u003e \u003ca href=\"../examples/Minimal/index_v3.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- index_v4.html \u003csub\u003e(d3 v4 example)\u003c/sub\u003e \u003ca href=\"../examples/Minimal/index_v4.html\"\u003e🔍\u003c/a\u003e\n|   |   `-- minimal.jpg \u003csub\u003e(Output of the example)\u003c/sub\u003e \u003ca href=\"../examples/Minimal/minimal.jpg\"\u003e🔍\u003c/a\u003e\n|   |-- RandomDataset\n|   |   |-- index_v3.html \u003csub\u003e(d3 v3 example)\u003c/sub\u003e \u003ca href=\"../examples/RandomDataset/index_v3.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- index_v4.html \u003csub\u003e(d3 v4 example)\u003c/sub\u003e \u003ca href=\"../examples/RandomDataset/index_v4.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- droplet.png \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/RandomDataset/droplet.png\"\u003e🔍\u003c/a\u003e\n|   |   `-- randomDataset.jpg \u003csub\u003e(Output of the example)\u003c/sub\u003e \u003ca href=\"../examples/RandomDataset/randomDataset.jpg\"\u003e🔍\u003c/a\u003e\n|   |-- ServerDownTime\n|   |   |-- index_v3.html \u003csub\u003e(d3 v3 example)\u003c/sub\u003e \u003ca href=\"../examples/ServerDownTime/index_v3.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- index_v4.html \u003csub\u003e(d3 v4 example)\u003c/sub\u003e \u003ca href=\"../examples/ServerDownTime/index_v4.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- server.png \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/ServerDownTime/server.png\"\u003e🔍\u003c/a\u003e\n|   |   `-- serverDownTime.jpg \u003csub\u003e(Output of the example)\u003c/sub\u003e \u003ca href=\"../examples/ServerDownTime/serverDownTime.jpg\"\u003e🔍\u003c/a\u003e\n|   |-- USvotes\n|   |   |-- index_v3.html \u003csub\u003e(d3 v3 example)\u003c/sub\u003e \u003ca href=\"../examples/USvotes/index_v3.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- index_v4.html \u003csub\u003e(d3 v4 example)\u003c/sub\u003e \u003ca href=\"../examples/USvotes/index_v4.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- loadData.js \u003csub\u003e(Load data via script tag)\u003c/sub\u003e \u003ca href=\"../examples/USvotes/loadData.js\"\u003e🔍\u003c/a\u003e\n|   |   |-- usFlag.png \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/USvotes/usFlag.png\"\u003e🔍\u003c/a\u003e\n|   |   `-- USvotes.jpg \u003csub\u003e(Output of the example)\u003c/sub\u003e \u003ca href=\"../examples/USvotes/USvotes.jpg\"\u003e🔍\u003c/a\u003e\n|   |-- USvotes_programmatic\n|   |   |-- index_v3.html \u003csub\u003e(d3 v3 example)\u003c/sub\u003e \u003ca href=\"../examples/USvotes_programmatic/index_v3.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- index_v4.html \u003csub\u003e(d3 v4 example)\u003c/sub\u003e \u003ca href=\"../examples/USvotes_programmatic/index_v4.html\"\u003e🔍\u003c/a\u003e\n|   |   |-- loadData.js \u003csub\u003e(Load data via script tag)\u003c/sub\u003e \u003ca href=\"../examples/USvotes_programmatic/loadData.js\"\u003e🔍\u003c/a\u003e\n|   |   |-- usFlag.png \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/USvotes_programmatic/usFlag.png\"\u003e🔍\u003c/a\u003e\n|   |    `-- USvotes_programmatic.jpg \u003csub\u003e(Output of the example)\u003c/sub\u003e \u003ca href=\"../examples/USvotes_programmatic/USvotes_programmatic.jpg\"\u003e🔍\u003c/a\u003e\n|   `-- Protein\n|       |-- index_v3.html \u003csub\u003e(d3 v3 example)\u003c/sub\u003e \u003ca href=\"../examples/Protein/index_v3.html\"\u003e🔍\u003c/a\u003e\n|       |-- index_v4.html \u003csub\u003e(d3 v4 example)\u003c/sub\u003e \u003ca href=\"../examples/Protein/index_v4.html\"\u003e🔍\u003c/a\u003e\n|       |-- protein1.jpeg \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/Protein/protein1.jpeg\"\u003e🔍\u003c/a\u003e\n|       |-- protein2.jpg \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/Protein/protein2.jpg\"\u003e🔍\u003c/a\u003e\n|       |-- protein3.png \u003csub\u003e(Glyph)\u003c/sub\u003e \u003ca href=\"../examples/Protein/protein3.png\"\u003e🔍\u003c/a\u003e\n|       `-- rainbow.gif \u003csub\u003e(Output of the example)\u003c/sub\u003e \u003ca href=\"../examples/Protein/rainbow.gif\"\u003e🔍\u003c/a\u003e\n|-- snippets \u003csub\u003e(Code samples for BioJS)\u003c/sub\u003e\n|-- img\n|   `-- anatomy.png \u003csub\u003e(Parts of the visualization)\u003c/sub\u003e \u003ca href=\"../img/anatomy.png\"\u003e🔍\u003c/a\u003e\n|-- tests\n|   |-- index_v3.html \u003csub\u003e(Page for headless testing with d3 v3)\u003c/sub\u003e \u003ca href=\"../tests/index_v3.html\"\u003e🔍\u003c/a\u003e\n|   |-- index_v4.html \u003csub\u003e(Page for headless testing with d3 v4)\u003c/sub\u003e \u003ca href=\"../tests/index_v4.html\"\u003e🔍\u003c/a\u003e\n|   |-- phantomjsTest.js \u003csub\u003e(Render ../index.*\\.html and print base64 data uri)\u003c/sub\u003e \u003ca href=\"../tests/phantomjsTest.js\"\u003e🔍\u003c/a\u003e\n|   `-- nodejsTest.js \u003csub\u003e(test for node, npm install)\u003c/sub\u003e \u003ca href=\"../tests/nodejsTest.js\"\u003e🔍\u003c/a\u003e\n|-- docs\n|   |-- CODE_OF_CONDUCT.md \u003csub\u003e(CoC)\u003c/sub\u003e \u003ca href=\"./CODE_OF_CONDUCT.md\"\u003e🔍\u003c/a\u003e\n|   |-- LICENSE \u003csub\u003e(License)\u003c/sub\u003e \u003ca href=\"./LICENSE\"\u003e🔍\u003c/a\u003e\n|   |-- README.md \u003csub\u003e(Readme)\u003c/sub\u003e \u003ca href=\"./README.md\"\u003e🔍\u003c/a\u003e \u0026#10004;\n|   |-- API.md \u003csub\u003e(Readme)\u003c/sub\u003e \u003ca href=\"./API.md\"\u003e🔍\u003c/a\u003e \u0026#10004;\n|   `-- CONTRIBUTING.md \u003csub\u003e(Contribution guideline)\u003c/sub\u003e \u003ca href=\"./CONTRIBUTING.md\"\u003e🔍\u003c/a\u003e\n|-- .gitignore \u003csub\u003e(Ignore ./private)\u003c/sub\u003e \u003ca href=\"../.gitignore\"\u003e🔍\u003c/a\u003e\n|-- package.json \u003csub\u003e(Package json file for npm)\u003c/sub\u003e \u003ca href=\"../package.json\"\u003e🔍\u003c/a\u003e\n|-- .travis.yml \u003csub\u003e(For testing with PhantomJS)\u003c/sub\u003e \u003ca href=\"../.travis.yml\"\u003e🔍\u003c/a\u003e\n|-- .eslintrc.json \u003csub\u003e(Custom linting rules :trollface:)\u003c/sub\u003e \u003ca href=\"../.eslintrc.json\"\u003e🔍\u003c/a\u003e\n`-- .jsbeautifyrc.json \u003csub\u003e(Rules for jsbeautify)\u003c/sub\u003e \u003ca href=\"../.jsbeautifyrc.json\"\u003e🔍\u003c/a\u003e\n\n\n\u003c/pre\u003e\n\n\u003cbr\u003e\n\n## Anatomy \nBelow is an summary of different parts of the visualization.\n\n![Anatomy](../img/anatomy.png)\n\n\u003cbr\u003e\n\n## What is it ?\n[Lexicon-rainbow](#h1) 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.\n\n\u003cbr\u003e\n\n## Which browsers ? \nLexicon-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.\n\n\u003cbr\u003e\n\n## Which version of Javascript ? \nIt is written in ES5. You do __NOT__ need Babel and Browserify.\n\n\u003cbr\u003e\n\n## Which dependencies ? \nThere are 2 versions of lexicon-rainbow, one compatible with d3.v3 **(3.5.17)** and the other with d3.v4 (**latest**).\n\n\u003cbr\u003e\n\n## How do I use it ? \nRefer to [Usage](#usage) and [API Reference](#api)\n\n\u003cbr\u003e\n\n## Usage \nDrop one of the script tags below in your html file.\n\n\u003ctable\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003e\u003c/td\u003e\n\t\t\u003ctd\u003e\u003cb\u003eYour version of d3\u003c/b\u003e\u003c/td\u003e\n\t\t\u003ctd\u003e\u003cb\u003eScript tag to use\u003c/b\u003e\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd rowspan=\"2\"\u003e\u003cb\u003eDevelopment version\u003c/b\u003e\u003c/td\u003e\n\t\t\u003ctd\u003ed3v3\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\t\t\u003ccode\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/dev/lexiconRainbow.d3v3.dev.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\t\u003cbr\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//ibrahimtanyalcin.com/lexiconRainbow.d3v3.dev.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\u003c/code\u003e\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003ed3v4\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\t\t\u003ccode\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/e2a8a5a0/dev/lexiconRainbow.d3v4.dev.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\t\u003cbr\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//ibrahimtanyalcin.com/lexiconRainbow.d3v4.dev.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\u003c/code\u003e\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd rowspan=\"2\"\u003e\u003cb\u003ePretty version\u003c/b\u003e\u003c/td\u003e\n\t\t\u003ctd\u003ed3v3\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\t\t\u003ccode\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/pretty/lexiconRainbow.d3v3.pretty.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\t\u003cbr\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//ibrahimtanyalcin.com/lexiconRainbow.d3v3.pretty.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\u003c/code\u003e\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003ed3v4\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\t\t\u003ccode\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/pretty/lexiconRainbow.d3v4.pretty.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\t\u003cbr\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//ibrahimtanyalcin.com/lexiconRainbow.d3v4.pretty.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\u003c/code\u003e\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd rowspan=\"2\"\u003e\u003cb\u003eMinified version\u003c/b\u003e\u003c/td\u003e\n\t\t\u003ctd\u003ed3v3\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\t\t\u003ccode\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/min/lexiconRainbow.d3v3.min.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\t\u003cbr\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//ibrahimtanyalcin.com/lexiconRainbow.d3v3.min.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\u003c/code\u003e\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\t\u003ctr\u003e\n\t\t\u003ctd\u003ed3v4\u003c/td\u003e\n\t\t\u003ctd\u003e\n\t\t\t\u003ccode\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/170be4b9/min/lexiconRainbow.d3v4.min.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\t\u003cbr\u003e\n\t\t\t\t\u003csub\u003e\u0026lt;script src=\"//ibrahimtanyalcin.com/lexiconRainbow.d3v4.min.js\"\u0026gt;\u0026lt;/script\u0026gt;\u003c/sub\u003e\n\t\t\t\u003c/code\u003e\n\t\t\u003c/td\u003e\n\t\u003c/tr\u003e\n\u003c/table\u003e\n\n\u003cbr\u003e\n\n:warning: WARNING: The rawgit cache expires every 24 hours. In case there is a new version pushed to master branch, you might need to wait until\nthe cache expires. Alternatively you can use ibrahimtanyalcin.com which will be active in a week (waiting for SSL). The cache expiration time on \nibrahimtanyalcin.com will be 10 minutes.\n\n## Installation\n```shell\n$ npm install lexicon-rainbow\n```\n\n:warning: WARNING: The install assumes that you will be using d3 version 4 by default. If not, you have to remove the default d3, install d3 version ^3.5.17\nand use one of the d3 version 3 compatible scripts within dev/ pretty/ or min/ folders.\n\n\u003cbr\u003e\n\n## Testing\nOnce you install the module you can call from the **root** of your project:\n\n```shell\n$ node node_modules/lexicon-rainbow/tests/nodejsTest.js\n```\n\nor you can move to the directory of the lexicon rainbow and call:\n\n```shell\n$ npm run test\n```\nOR\n```shell\n$ npm test\n```\n\n\nThe test file ```requires``` module and prints out all enumerable properties of the exported object.\nThis library is not for use on server side (because you cannot manipulate the DOM). \nThe test file is just there to control if the object can be exported.\nTo use this library with other libraries on the server side to be later used for client consumption you shoulduse a tool like Browserify.\n\n\u003cbr\u003e\n\n## API\nFor a detailed list of available methods, refer to [API.md](./API.md).\n\nThe general pattern for invoking lexicon-rainbow is as follows:\n\n```js\n(new LexiconRainbow) //initiate a new instance\n\n.container(\"#containerDiv\") //pass a node or id\n\n.forceStyle() //take advantage of embedded style\n\n.w(600) //set width of the viewbox\n\n.h(200) //set height of the viewbox\n\n.sW(\"1000px\") //set css style width of the viewport\n\n.sH(\"auto\") //set css style height of the viewport\n\n.position(\"relative\") //set css style position\n\n.sTop(\"0px\") //set css style top property of the viewport\n\n.sLeft(\"0px\") //set css style left property of the viewport\n\n.sMargin(\"100px auto 0px auto\") //set css style margin property of the viewport\n\n.lexID(\"lexiconRainbow\") //set an id for the generated SVG\n\n.input(sample) //provide the data\n\n.append(true) //initialize internal variables\n\n.render(); //render scene\n```\n\n\u003eNote:\n\u003e_Viewport means the space taken up by the ```ownerSVGElement``` in document coordinates. Think of it as the values returned by ```SVGElement.getBoundingClientRect()```.\n\u003e(Space excluding the SVG's border) The Viewbox on the other hand is the user defined coordinate system in units of **userSpaceOnUse**_\n\n\u003cbr\u003e\n\n## UMD\nThe 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.\n\n\u003cbr\u003e\n\n## Youtube\nStatic figures only gives an idea. You can go to my [youtube channel](https://www.youtube.com/channel/UCmtQOhFPZ7FH_jVwtv4-GFw) and start from [this](about:blank) video to have a better overview. \n\n\u003cbr\u003e\n\n## Known Issues\n* When there are too many links coming out from one item, you might have flicker issues,\nas the event.target/elementFromPoint does not point to the right element. For the time being\nconsider turning off [`enableOnpick`](./API.md#enableonpick-link).\n* In lexicon-rainbow d3v3 version, if your data object has the \"axis\" field set, the **tick path**\nwon't get colored due to [stroke style](../dev/lexiconRainbow.d3v3.dev.js#L139) not set. \nThis will be fixed in the next patch. \n\n\u003cbr\u003e\n\n## Acknowledgement\n* People\n  * [Tuncer Can](https://www.linkedin.com/in/tuncercan/) for server side maintanance and file hosting\n  * [Mike Bostock](https://d3js.org/) for D3.\n* Projects\n  * The Mutaframe ([\u003cimg src=\"../img/mutaframeLogo.png\" width=\"50\" height=\"50\" vspace=\"10\" hspace=\"10\" align=\"middle\"/\u003e][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)\n  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.\n  I will document and release these tools as I sieze the opportunity.\n* Organizations\n  * [\u003cimg src=\"../img/ibsquare.png\" width=\"50\" height=\"50\" vspace=\"10\" hspace=\"10\" align=\"middle\"/\u003e](http://ibsquare.be/) for a fruitfull project that lead to development of [Mutaframe][MUTAFRAME] and many other micro libraries.\n  * [\u003cimg src=\"../img/europa-flag.gif\" width=\"50\" height=\"50\" vspace=\"10\" hspace=\"10\" align=\"middle\"/\u003e](https://europa.eu/european-union/index_en) for coordinating funds for the [Mutaframe][MUTAFRAME] project which eventually lead to development\n  of many small libraries including this one.\n  * [\u003cimg src=\"../img/innoviris.png\" width=\"100\" height=\"20\" vspace=\"10\" hspace=\"10\" align=\"middle\"/\u003e](http://www.innoviris.be/en?set_language=en) for funding the [Mutaframe][MUTAFRAME] project.\n\n## Support\nI 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\nsupport for this project you can contribute to my [PATREON](https://www.patreon.com/ibrahimTanyalcin) page.\n\n\u003cbr\u003e\n\n\n[MINIMAL]: http://bl.ocks.org/ibrahimtanyalcin/6e2e775cb954ecf89e6b379b5fa4c510\n[AMINOACIDS]: http://bl.ocks.org/ibrahimtanyalcin/3ec054bc6dc485c46631c5ef1d28dbe9\n[RANDOMDATA]: http://bl.ocks.org/ibrahimtanyalcin/35d404d513420d84570eb0a418c87856\n[SERVER]: http://bl.ocks.org/ibrahimtanyalcin/2e478e178470c385656a90d3a4629220\n[VOTES]: http://bl.ocks.org/ibrahimtanyalcin/f0bf54f88c6859c985ee98bc5e56ae6f\n[MUTAFRAME]: http://deogen2.mutaframe.com/\n[PROGRAMMATIC]: http://bl.ocks.org/ibrahimtanyalcin/f2067bef081d84b85e3fb077f3272a90\n[PROTEIN]:http://bl.ocks.org/ibrahimtanyalcin/37c3e06f97cda2881acbfcbb4d77e3ab\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fibrahimtanyalcin%2Flexicon-rainbow","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fibrahimtanyalcin%2Flexicon-rainbow","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fibrahimtanyalcin%2Flexicon-rainbow/lists"}