Skip to content

Instantly share code, notes, and snippets.

@IbrahimTanyalcin
Last active Sep 12, 2017
Embed
What would you like to do?
lexicon-rainbow example: AminoAcids
license: cc-by-nc-nd-4.0
height: 700
width: 1000
scrolling: yes

This is a comparison between 2 tables. There are 20 amino acids in nature. Each table represents a metric for an amino acid. Think of each table as 1 by 20 tables where each table represents a value for an amino acid. The original data is about 2.5 Mb which you can view from here. The upper part and the lower control has the same amount tables, effectively allowing you to compare any table with any other table comparing the table it self. The catch is, the table on the top is ordinally sorted, where as the table on the bottom has a linear scale. With the help of ribbons rather than lines (easier to trace by human eye), comparing these tables are much easier.

<!DOCTYPE html>
<head>
<meta charset="utf-8" name="viewport" content="width=device-width, initial-scale=1">
<script src="http://d3js.org/d3.v4.min.js"></script>
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/e2a8a5a0/dev/lexiconRainbow.d3v4.dev.js"></script>
<script src="//cdn.rawgit.com/IbrahimTanyalcin/lexicon-rainbow/5a8fc102/examples/AminoAcids/loadData.js"></script>
<style type ="text/css">
html {
background-color:White;
}
html * {
box-sizing:border-box;
}
body{
margin: 0px;
background-color:White;
}
body:after{
content:"";
display:block;
clear:both;
}
.row {
float:left;
width:100%;
font-size:16px;
position:relative;
overflow:hidden;
background-color:transparent;
}
.row:after{
content:"";
display:block;
clear:both;
}
.row:first-child, .row:last-of-type {
min-height:300px;
text-align:center;
font-size:30px;
font-family:advent-pro,Sans Serif,Arial;
}
.row:first-child span {
display:inline-block;
width:90%;
position:absolute;
left:0;
right:0;
bottom:20px;
margin-left:auto;
margin-right:auto;
}
.row:first-child span:first-child {
bottom:100px;
white-space:pre;
}
.row:last-of-type span {
display:inline-block;
width:90%;
position:absolute;
left:0;
right:0;
top:20px;
margin-left:auto;
margin-right:auto;
}
#containerDiv {
width:70%;
margin:auto;
position:relative;
}
#containerDiv>canvas {
width:100%;
height:auto;
visibility:hidden;
}
#containerDiv>svg {
position:absolute !important;
top:0;
left:0;
width:100%;
}
</style>
</head>
<body>
<div class="row">
<span id="moverSpan">&nbsp;</span>
<span id="topSpan"></span>
</div>
<div class="row">
<div id="containerDiv">
<canvas width="600" height="200"></canvas>
</div>
</div>
<div class="row">
<span id="botSpan"></span>
</div>
<script type="text/javascript">
!function(){
////////////////////////////////////////////////////////////////////
/////////////////CREATE INSTANCE OF LEXICON RAINBOW/////////////////
////////////////////////////////////////////////////////////////////
(new LexiconRainbow)
.container("#containerDiv")
.dispersion(0)
.forceStyle()
.w(600).h(200)
.sW("100%").sH("auto")
.position("relative")
.sTop("0px")
.sLeft("0px")
.sMargin("0px auto 0px auto")
.handleEvent(handleEvent)
.lexID("lexiconRainbow")
.input(sample) //sample is loaded by the loadData script
.append()
.render();
////////////////////////////////////////////////////////////////////
/////////////////////////ATTACH THE HANDLER/////////////////////////
////////////////////////////////////////////////////////////////////
var topspan = document.getElementById("topSpan");
var botspan = document.getElementById("botSpan");
var moverspan = document.getElementById("moverSpan");
function handleEvent (data,type,eventType) {
switch (type) {
case "onload":
topSpan.textContent = data.ordinal.Info;
botSpan.textContent = data.linear.Info;
return;
case "onhighlight":
if(eventType==="mouseover") {
var dd = typeof data.item === "object" ? "Value: "+Math.abs(data.item[1]-data.item[0]) : "Value: "+data.item;
var name = typeof data.name !== undefined ? "Name: "+data.name+", " : "";
moverspan.textContent = name+dd;
} else {
moverspan.textContent = " ";
}
return;
case "onrenderLinear":
botSpan.textContent = data.Info;
return;
case "onrenderOrdinal":
topSpan.textContent = data.Info;
return;
}
}
}()
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment