Skip to content

Instantly share code, notes, and snippets.

@timelyportfolio
Last active December 15, 2015 07:39
Show Gist options
  • Save timelyportfolio/5225228 to your computer and use it in GitHub Desktop.
Save timelyportfolio/5225228 to your computer and use it in GitHub Desktop.
gist of clickme for bl.ocks.org viewing

#Unbelievable clickme d3 straight from R

I deserve no credit for this. Go to clickme for the guy that deserves all the credit. I just simply put it in Gist form for it to show up on bl.ocks.org

// Generated by CoffeeScript 1.4.0
(function() {
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
window.DashboardView = (function(_super) {
__extends(DashboardView, _super);
function DashboardView() {
return DashboardView.__super__.constructor.apply(this, arguments);
}
DashboardView.prototype.initialize = function() {
var _this = this;
this.render();
this.model.on("change:currentCluster", function() {
return _this.showTitle();
});
return this.model.on("change:currentTag", function() {
return _this.showTitle();
});
};
DashboardView.prototype.events = function() {
return {
"click #dashboard .clusters span": "changeCurrentCluster"
};
};
DashboardView.prototype.changeCurrentCluster = function(e) {
var currentCluster;
e.stopPropagation();
this.model.attributes['currentTag'] = null;
d3.selectAll(".tag_name").classed("current", 0);
currentCluster = d3.select(e.target);
d3.selectAll(".clusters span").classed("current", 0);
if (currentCluster && this.model.get("currentCluster") === currentCluster.attr("name")) {
return this.model.set({
currentCluster: null
});
} else {
currentCluster.classed("current", 1);
return this.model.set({
currentCluster: currentCluster.attr("name")
});
}
};
DashboardView.prototype.showTitle = function() {
var currentCluster, currentTag, title;
title = "" + (this.getCurrentRows().length) + " " + this.model.options.rowType;
if (this.model.options.showGroups) {
title += " from " + (joinSentence(this.model.columnGroups));
}
if (this.model.options.showClusters && (currentCluster = this.model.get("currentCluster"))) {
title += " (Cluster " + currentCluster + ")";
}
if (this.model.options.showTags && (currentTag = this.model.get("currentTag"))) {
title += " (Tagged " + currentTag + ")";
}
d3.select("title").text(title);
return d3.select("#dashboard h1").text(title);
};
DashboardView.prototype.getCurrentRows = function() {
var currentCluster, currentTag;
if (this.model.options.showClusters && (currentCluster = this.model.get("currentCluster"))) {
return d3.selectAll(".row[cluster='" + currentCluster + "']")[0];
} else if (this.model.options.showTags && (currentTag = this.model.get("currentTag"))) {
return d3.selectAll(".tag[name='" + currentTag + "']")[0];
} else {
return this.model.parsedData;
}
};
DashboardView.prototype.render = function() {
var _this = this;
this.showTitle();
if (this.model.options.showClusters) {
return d3.select("#dashboard .clusters").selectAll("span").data(this.model.clusterNames).enter().append("span").attr("name", function(d) {
return d;
}).text(function(d) {
return "Cluster " + d;
}).style("background", function(d) {
return window.clusterColor(d);
});
}
};
return DashboardView;
})(Backbone.View);
}).call(this);
gene_symbol hiv_day_0 hiv_day_1 hiv_day_3 hiv_day_6 hiv_day_8 hiv_day_10 hiv_day_12 cluster flu_day_0 flu_day_1 flu_day_2 flu_day_3 flu_day_4 flu_day_5
LRMJO 0 1.58118384842329 2.77730434388417 3.99580089245913 3.40809991935359 2.93095226174585 3.14567434865149 1 0 -0.0965963013357795 1.58356301940265 2.61344368835778 2.64226994832749 2.35197062550506
BQTGY 0 1.23217928762584 2.52222659744888 3.6807460625503 3.52157153768522 3.17585121950773 3.54572239843221 1 0 -0.403904335508512 2.20277731574288 3.64407386238092 3.54704323657123 3.0165758144141
JGZAV 0 0.369970994587594 2.84968379337605 3.76906271678929 4.13985460293892 3.51697850917423 3.69313167950926 1 0 0.047441527255182 2.2401232423591 3.01715110044884 2.77454968602671 2.25022176920153
LUHYA 0 0.264566906562713 3.0658853280276 4.23544843575631 4.15178403369424 3.28270524383736 3.40026097664048 1 0 0.194130499086105 2.53919160802823 3.60793685176427 3.38645060038737 3.10333959957672
OHPIX 0 -0.171200934539449 3.05431508523864 4.48863208110588 3.90177284052812 3.39639147627698 3.63736708513614 1 0 -0.194405724817995 1.75251579971431 2.75680542392482 2.60909343846905 2.31583610874224
CDTTZ 0 1.4187298337004 2.19360924043724 4.51002514323886 4.40358222629569 3.20248310345109 3.15719416388064 1 0 0.105995693780751 1.9627009978149 2.36932671455816 1.81267525565744 1.40895310422125
GZWCR 0 0.231799900126768 2.618450146632 4.54469777162068 4.34095696208233 3.44590585904148 3.04616006486293 1 0 0.00942986802572698 0.181944333781787 0.539615845657373 0.488913765159215 0.452484014345394
OOYSD 0 0.652773021380467 1.84670437150835 4.64661806085882 4.29121470723232 3.51761342626869 3.04053187267096 1 0 0.0347414196678836 0.0760253044531338 -0.0487461990375298 -0.0247449983475787 0.146174735148646
BEXPN 0 -0.55460541410224 1.74287043858446 4.19519643823722 3.78881216056736 3.03130683347589 3.68631087644886 1 0 0.0881544112845204 1.33072653031001 1.41720937395142 1.65010404127429 0.974039781764725
POIGB 0 -0.324190909559499 2.18227290979858 3.69826792335552 3.89036470701556 3.32339620858004 3.1720679651159 1 0 0.0794982953355529 1.87498932598625 2.51474215429499 2.08083151243699 1.60822731712567
NLVDG 0 0.383843684871179 1.78136389553205 4.01643472010765 3.71284152127153 3.51266915958458 3.55573611986391 1 0 0.223106360911977 0.803830539551082 1.37892418064132 1.31766975430252 1.12380516643615
FOHOU 0 0.254201084497664 1.90140950917796 3.58976195151785 3.65984088044156 3.17068587711602 3.6210741928398 1 0 0.120184353107766 1.01313559280616 1.41486491551753 1.10751366080149 1.26261238774172
MQSRW 0 -0.185976585321404 1.82399529148287 3.64128162045346 3.55481933972978 3.11973490098525 3.40005860640195 1 0 -0.0338051320982077 0.115037561510349 0.173330810415804 0.0671941861006524 0.162237871299708
HGNSQ 0 -0.582448772605966 2.23205800065091 4.14220698322853 4.51746031713256 3.90192399117376 3.85997805945037 1 0 0.044378501977741 1.21319013148807 1.57661752650479 1.31507462006086 0.827803285915843
GOJLE 0 1.04962912362934 3.24955026043646 4.50269760279707 4.21054382950535 3.78234707146629 3.90802199748452 1 0 0.025425617606415 2.58480985455581 4.58375069271238 4.70682554301297 4.46105342362959
VWTBF 0 0.980154506377935 2.84859981793891 4.4805216992757 4.36024505380239 3.95018207436094 4.494130947865 1 0 0.044833193949404 1.84516724809748 2.95741141079262 2.84433297785077 2.64625019719945
AGIWH 0 0.363204499073658 4.06413923544485 4.45201736635348 4.28774499743662 3.98092031950563 4.45751950235114 1 0 -0.056865450763434 2.5827327730576 3.63169249022524 3.23196203396368 2.77352397981667
MOITL 0 0.429321078601649 3.84322514790668 4.55608600900722 4.37166959936277 3.98251574536697 4.09661675861473 1 0 0.220850662854949 3.21119811022123 4.58107108388113 4.14331444902114 3.95626299875668
HGUGR 0 0.225285492247961 3.4238199367714 4.77316797722437 4.71766105858395 4.32367519977132 4.57270785552157 1 0 -0.355918766775947 2.1287753781003 2.66568264053769 2.11642557628551 1.60523498307449
WLJPR 0 0.510159814439028 4.06375959046634 5.24006542088724 5.0270987362944 4.55865027526015 4.32975952572149 1 0 0.120613107018083 2.3533680568951 3.61427322637506 3.53304228405073 3.271938688683
UAGVI 0 1.69835186713973 4.55188406797723 6.27529440510216 5.8076896195058 5.41991186393515 5.73859355222873 1 0 0.149576440781096 3.30334075754046 4.93898302009479 4.83802633700607 4.3054955507768
IZNJS 0 0.805233099642773 1.48636973574496 5.54914524928952 5.97240155904846 4.97961276760565 5.00264686230883 1 0 0.04431697194669 2.4743258220629 3.87640895509243 3.52525079014763 3.20011079236539
FLTZT 0 -0.610327023310081 3.47143576815142 6.28739856947159 5.95054852616488 4.89838958966783 5.69019897418523 1 0 0.0730978983693168 0.563688895034828 0.795124290988663 0.798029085561971 0.790316051911115
NGZZL 0 0.00233351876196719 3.08292649447452 5.55539295889912 5.32267279451111 5.36065994540772 5.32770308230434 1 0 0.0661396027694715 0.560745103025403 0.236561325246461 0.229704228029622 0.25560561283441
FVZSF 0 -0.00635030944732717 -1.02035876831763 -1.17629688093451 -0.93646142041867 -0.92290955116445 -1.54392923554893 1 0 -0.267142050759019 -0.050710476937133 -0.189341327039836 -0.365747577221487 -0.571126350461016
ZJWVS 0 -0.857899721181722 -1.01968297131627 -1.44717058603936 -0.922734873977922 -0.727879878040081 -1.2612255445136 1 0 0.128827249525749 0.217998296985122 0.187447568448705 0.260660036836616 0.274301077158665
XENMA 0 -0.878791068375204 -0.483449078783956 -0.345320111673147 -1.15786734196929 -0.920321499994862 -0.798598280228583 1 0 0.0538168352888026 0.0915670724520319 0.0371276435521126 -0.0008596870499472 0.132648973905342
AZUIJ 0 -0.489016153667803 -0.779587603256549 -0.842694705285453 -0.51578772171817 -0.545136277246957 -0.469621807931821 1 0 -0.135790212205358 -0.369334900242478 -0.269861587420301 -0.172362403844805 -0.0985198827676316
GGFVB 0 -0.103258894803463 -1.28375676262488 -0.170882427983482 -0.667441621257521 -0.53209463875379 -0.641324160942802 1 0 0.00426281751466095 -0.05238139274696 -0.118866943302743 0.029738985576327 -0.424719615652875
GZVST 0 -0.104359847820661 -1.52143732189841 -1.93789242411188 -2.12343102132348 -1.99986714786266 -3.16703102176966 1 0 0.0703005273557303 0.0436601931940913 0.160578342027043 0.0506470338613993 0.0140869492476969
NVUYH 0 -0.65157172051434 -0.779895095650615 -2.29413747286645 -2.29173046340305 -1.6588777094255 -3.31871384387529 1 0 -0.048320974333214 -0.029019758295783 -0.159207231936134 -0.114602026418596 -0.011241099021619
PTZTL 0 -0.98855777200814 -1.17460831865087 -1.41144391431549 -1.41164649114349 -1.30426798877246 -2.18924772762064 1 0 -0.174601245815037 -0.386472986875178 -0.492045023109451 -0.240357377323317 -0.481696076180997
RXJNF 0 -0.63315389786935 -0.189915502562472 0.327491507697528 0.545316500588564 0.477783715951571 0.545065797286845 1 0 0.044426885884758 0.308555202710569 0.459808637885003 0.401920694915238 0.239330507549587
SSGXQ 0 0.272719251617539 0.766435660555098 0.450889073490716 0.246534181549783 0.228612085395344 0.504295699189809 1 0 -0.365242373113263 0.0015097575756927 -0.0767077060882778 -0.11724111332129 -0.205708839684073
UMWVM 0 0.201544799115919 0.686840457540178 1.00759289931127 0.905478822451393 0.697467422094465 0.823613461740498 1 0 0.0970335633279845 -0.0110536587275135 -0.000577792000540298 0.102491081888141 0.026788815944154
JYSCR 0 0.418695027070336 0.761523304735211 1.22589930429128 1.05357161098542 0.677642828753121 0.843995428614528 1 0 -0.174608718771794 -0.0362409642366318 0.0883602684760137 0.0736685793750492 -0.0192685963035433
XRYOU 0 0.123666847785637 0.787173024693973 1.2167133142494 1.11034588867888 0.796527512700381 0.614270547403867 1 0 0.181440694325875 0.75642911680136 0.872473081808436 0.818878577633034 0.664852260836442
GTNQA 0 0.140100977955087 0.997330950350882 1.06074685790995 0.972238020080383 0.987886389035017 0.535518871096855 1 0 -0.103136746295788 0.985203539275279 1.34498298881503 1.05293802640306 0.718900833288995
ILJJZ 0 0.784900865130875 0.688493746155062 0.894436154232835 1.04789023361918 0.640566783321119 0.769630499763208 1 0 0.0192612857929132 0.0914632799562172 -0.0235716762266554 0.127521245820192 -0.0548035181903478
ZQXLM 0 0.686048055780751 0.934701911634354 1.23504237018874 0.984926489842608 0.804454348405307 0.317080641224193 1 0 -0.29578299748334 0.644159545585939 0.649927596127689 0.327424793840654 0.277843545517624
PMRKK 0 0.445308235871936 0.896483852497892 1.06385257036274 1.01432176994632 0.476448813530155 0.519466330842063 1 0 0.0609751014621367 0.965773843804822 1.18633228284466 1.06759095000654 0.978657554248092
PNKFE 0 0.585743989119996 0.581832463022255 1.60347800437728 1.4096638520626 0.599876759819924 0.771146347117093 1 0 -0.263622710971119 -0.180373380336188 -0.19196021640985 -0.194481253273487 -0.288272390585546
ARTGG 0 0.477923694183611 1.16905839047769 1.3058457680325 1.20055555316755 0.490566395958785 0.784971572661277 1 0 0.0879590435143747 -0.0745803573450158 -0.00633171301673 0.135795953763074 0.123385557147587
KXPRB 0 -0.193876422188674 1.03525468190192 1.58950378127057 1.47387285425921 0.738539514175158 0.64088199225425 1 0 -0.0178293885576863 0.204649734648603 0.281995315225865 0.209302344417658 0.0278026327412652
WLQMG 0 0.596291966502891 0.382159016273085 1.81320274009087 1.52951995580052 0.968321076576491 1.15700781435735 1 0 -0.063402775641155 0.148735618584135 0.335193559252379 0.327382342725816 0.060226428050516
LTTHG 0 0.439751279891708 0.734556585757478 1.86127607396215 1.42658995952398 1.31910092738254 1.24344575832 1 0 -0.0291462161145727 0.0540269152437294 0.187851529444371 0.22448759064792 0.195341176751189
OAFHZ 0 0.201581264853664 -0.0692089204073703 1.98468883499797 1.86592352089979 1.34810065163279 1.09371860224944 1 0 -0.351939963707976 0.524007953024341 0.615760706492333 0.141638932978273 0.0825463071554859
YUWTR 0 0.282373551551778 0.225452408401111 1.4974670816908 1.76439550146233 1.04842581907542 0.632878817708571 1 0 -0.0906432618116516 -0.367011641841255 -0.181920310064827 -0.088682082698255 -0.0700575584216116
TABUN 0 0.5239488563696 1.36662919157109 1.13546485035811 1.24158686319432 1.48292576184486 0.85370055914924 1 0 -0.0471411009985 0.536115474963718 0.684150360270873 0.589728545827832 0.61440535351529
ZTLLM 0 0.137243895760003 1.22028696696349 1.56880303774426 1.50582223752545 0.857275509440545 1.15841007292292 1 0 0.0411960564435824 0.355445145794889 0.315600034702807 0.463257937181157 0.405033038138031
QYJIU 0 0.659243436865081 1.00997559924589 1.15440470008025 1.48003603462303 1.29174520812392 1.20685934792967 2 0 -0.066965943973159 0.618220097697234 0.536164395537991 0.280809209999855 0.24296418234374
LTASG 0 0.26177816608799 0.918873529840576 1.37128067007919 1.29237218865224 1.07904398549403 1.44025817938762 2 0 -0.237865733393707 0.410335928404958 0.60558260698707 0.483060700580104 0.374581324134634
DEZOK 0 0.362333154869832 1.0310731562703 1.21407508404159 1.53116862047779 1.05336481313975 1.07469361163929 2 0 -0.068987214535858 -0.287532587779938 0.00223695102761651 0.138202762360492 0.042556206772847
HSAQF 0 0.0915568227545974 1.0915542049995 1.31346201851492 1.53408889728812 1.24628210251797 1.15939263000268 2 0 0.0194245626301574 0.799028690312668 0.988781475599849 0.921727690985694 0.854605288416569
EPDQQ 0 0.302241219899657 0.339374168514742 1.05745538226436 1.15395606751097 1.04091241655258 0.974073552271256 2 0 0.004086518491086 -0.158247423689222 -0.0296748576830671 0.204545107061984 0.0217376415151293
ZSNVF 0 0.127836973525979 0.730521532099333 1.25930053974378 1.12464516932779 0.929157660808085 1.08629494540836 2 0 -0.194036110816851 -0.286237217449255 -0.173536270895946 -0.194158468699675 -0.218903270719754
FXDAH 0 0.0361648756548026 0.570749432065356 1.37488606400617 1.51768897277019 1.09601635496831 1.15951758727956 2 0 -0.0495361900634136 0.339151852134448 0.32062963473372 0.246135346974561 0.08601217626433
FHYIF 0 -0.0709961054202229 1.04600673846255 1.12422315172545 1.21094978561046 0.653627443022995 1.11811018799866 2 0 -0.106997090315575 -0.141362088664446 -0.0093323407647634 -0.0044100114199003 -0.101504421603123
BEJLU 0 0.24172910347936 1.29391706062557 1.0414281555446 0.987174565357434 0.822065496101704 1.19242113208489 2 0 0.188470872845859 0.459544897418204 0.310637127889177 0.176827061687388 0.147648519968346
UGGWA 0 0.057576543953555 0.889115829294986 0.799571606992251 0.96199437058225 0.932386838518287 1.31402475012871 2 0 -0.277452827916751 -0.288946233008118 -0.165475572167536 -0.240760110717053 -0.247187156565435
MTOES 0 1.93351376630907 1.7667901263183 4.09747137875834 4.02125938263192 1.8939135666384 1.84666777925938 2 0 0.033687341055092 0.535308676284557 0.999566432474495 1.09684797210769 0.789113819571453
DTQPF 0 1.15982769621593 1.91765094639949 4.38906238152704 3.11615337304936 1.82258854951667 1.72731241863374 2 0 0.022908251804547 1.82967931358568 3.2631665141837 3.33092356825189 3.1839449251181
PLJEF 0 0.277882462720275 2.13510257050449 3.79161686278214 3.62501331927724 2.10523574055814 2.60627902371532 2 0 0.225765031043242 0.957146605205521 1.14530162947427 0.968837411997301 0.863475529153226
JWWIG 0 0.314123867376867 2.03153700875931 3.41031124077054 3.07660072765114 2.95562824920516 2.93166393828392 2 0 0.0899825157960106 3.1484535695048 2.72651477262286 1.56779096767487 1.00018180189477
NNEQK 0 0.142338386300651 2.24703173500021 2.96209513479449 3.0960926856708 2.55724566382065 3.38578907037631 2 0 -0.20189630051029 1.57976355857632 2.39357649096848 2.19706141548136 1.74064156314678
JQZUZ 0 0.268822406772611 2.65628314234051 3.29649218932417 3.21347048322913 2.50454569994666 2.7280331338649 2 0 -0.0703811165351396 -0.148746693081416 -0.0294382773755732 0.0578102469978852 0.0289607877560345
GSVOR 0 0.0867789013290456 1.84968565588669 2.44805811952294 2.50707757033139 2.6109449427649 2.9185736798901 2 0 -0.077796570945939 0.830427669878504 0.610681146825761 0.184270064973511 0.0791488168976047
MVGCJ 0 0.400848760626165 1.85881801953537 2.91449397724293 2.62693816611046 1.9675802928508 2.5218887822221 2 0 -0.0977003453740425 1.48295467913241 2.60325666066512 2.42693188360383 1.76296797604737
FNUDS 0 0.133027250463063 2.35929384182695 2.73871949637775 2.40850589323342 2.29901883254032 2.58665859991485 2 0 -0.271212566251807 1.95702724892 3.24240069061654 3.11798910636428 2.72666116675404
ITFSP 0 -0.0718841313566243 2.2529822732662 2.41867293034869 2.57858776701616 1.99146149956768 2.6927078158134 2 0 -0.201339296572442 1.11770352321892 1.5595407165615 1.16941744700215 0.622010319646508
UGLAL 0 0.964021291641666 2.21811023424246 3.02644711613242 2.83628522264436 2.38239106947714 2.6139726942911 2 0 -0.0907548605981209 1.49869848200319 2.21591848332544 2.21183276992179 1.97101734965808
YKLWV 0 0.827244697602494 2.03509816237628 3.00767942220335 3.02676442220596 2.71723868106896 2.44557930768769 2 0 -0.0646097651353632 2.17941129061469 2.60045020688329 2.01111273527035 1.40651191565589
HZKBB 0 0.545569734219818 1.85155164969713 2.75374535929087 3.06070517059422 2.51581563719121 2.05937794543643 2 0 0.034971804063905 0.806830678093861 1.17517940129846 1.1139958901755 1.0955921444734
WBDXG 0 0.619651031124074 1.4268239339713 2.35446374321536 2.25384862780364 1.92172032517568 2.28350517753995 2 0 -0.017926843134022 1.37878142068195 1.88352430498962 1.76988272461425 1.43013865557644
QZASI 0 0.307903396783785 1.5563957057999 2.45157781017453 2.27717612643804 1.95729369841308 2.13443240941151 2 0 -0.0295722638634141 1.59313092499818 1.91701754442355 1.41517491814753 1.21556108059617
RXMAJ 0 0.0103356980514595 1.54626074983072 2.49017746396394 2.63858749767962 2.17031225402593 2.26300813856021 2 0 -0.0464696336086668 1.54968840389119 1.65820568751374 1.28700079251013 0.978964702536872
GURSO 0 -0.472829873517823 1.21219797636848 2.45791156824269 2.35138537780488 2.06872943048069 1.96931418647409 2 0 0.248392856302919 0.888285205803141 1.01805972952798 0.788255335980354 0.586236499975042
IQSHL 0 -0.479424521399163 1.69024278129214 2.32316806528984 2.23313887034062 2.12069560247108 2.5089025215895 2 0 -0.232912705587294 1.31129050841265 1.64031584635085 1.3498335904433 0.96149218668734
WEFPV 0 -0.245389432655402 0.792896418170212 2.32095994477123 2.03910416628988 2.08218031789027 2.47097679547393 2 0 -0.0353314944102585 0.70927198417959 0.650013251944895 0.329518686158034 0.0610500091618692
EULZG 0 -0.436348924019115 1.36165008025389 1.94076317888897 2.33708748343174 2.17220084024337 2.87889892867984 2 0 0.0461485552107545 1.01419448890446 0.81877536240306 0.497597218707029 0.200063031910274
OJVPA 0 -0.010264337109875 1.16730683249106 2.25130035806246 2.24441896821937 2.44330373190814 2.88676222820502 2 0 0.101607101023854 0.0728852527704089 0.313984722690237 0.464178286468405 0.288493422009547
CASSC 0 -0.262878583724163 0.454597812158861 3.33313710193877 3.44616910371335 2.72813257645853 1.85119016649501 2 0 0.0434607664285647 0.147200920015333 0.12816171491345 0.143575323121548 0.110652829059249
EEMDW 0 -0.0960734980446956 0.541242155688207 3.7985132913079 4.0788256932328 3.47447020554763 2.55583899332219 2 0 0.106753411500256 0.011138105659815 0.00441162120570701 -0.075951074206621 -0.04071210136821
SAASK 0 0.247782574159167 1.24890439498792 3.06879458329211 2.7295647132169 2.73791024539451 2.73751881351578 2 0 0.103677243090497 2.0549101262586 3.24557451385173 3.20985266721186 2.82101994684428
PLLBT 0 0.141901813196594 1.28803637607359 2.89773025682868 2.7397625671912 2.58569055255438 2.42503084472957 2 0 0.0794865697977944 0.639192971049579 0.639977731573754 0.433153424700909 0.358935351846331
FZPLV 0 -0.455363343102915 1.66204589617 2.77799385726347 2.79377564877492 2.66946335584729 2.41923417155597 2 0 -0.268930751302876 1.61834658006547 1.64331203124755 1.0732202536694 0.831507276991593
PGYMN 0 -0.36008195883899 1.2957345065119 3.0649926000214 2.61961020881339 2.61349087581419 2.69510704424688 2 0 -0.119034747330302 0.76404593654797 0.950940137094048 0.652303695978819 0.456052895659083
JOXHS 0 -0.315356798685607 0.885773198205921 3.23313843534471 2.50634978586814 2.70377115240409 2.45109255496763 2 0 0.257077284080587 0.139402369672754 0.0288588940420272 0.125827148549729 0.281753530459002
YZBTO 0 0.569127648024979 0.797683881561801 2.48655923157514 2.61405520778348 2.46308530812319 2.83451098573745 2 0 0.112231966031704 0.966010420433999 0.972610023850506 0.623048151467889 0.791286744529703
YQXRN 0 -0.363031737835907 0.50630102127559 2.54851909242161 2.89339858341089 2.20976892835878 2.57369861847609 2 0 -0.246956375646323 0.812743895756328 1.31773138264339 1.01465034909962 0.686051816739695
BJUMI 0 0.318308701526805 0.247146051435141 2.25154759871053 2.00405238169386 1.78574358974207 1.80591909880784 3 0 -0.241588799957861 0.888265183990104 1.28215864550245 0.887926040949959 0.475453521404784
YPXVK 0 0.278841582590112 0.8310241976086 2.26000488804251 2.17984951286064 2.00492275709836 1.9042979824195 3 0 -0.462237502413869 0.200477834321989 0.074120889645413 -0.387223823650962 -0.374696004977544
KYHWV 0 0.129621024218495 0.931046033132835 2.0289895852552 2.07728832725226 1.75671884353045 1.63473457257029 3 0 -0.173592886093298 0.556515607063698 0.761116817035959 0.471091718492982 0.249632246352519
RNQQP 0 -0.0912246767285041 1.03686060553476 1.91880543937977 2.06110729799092 1.56817286027457 1.91106630090062 3 0 0.106151729321101 0.0519594833420446 0.0111564068320999 0.145706720708228 -0.0774890144328882
IHQWU 0 0.226330867310094 1.16023966969317 1.6071278488021 1.99200413762432 1.14152536551777 1.53089877310353 3 0 -0.0043711987077808 0.905600027853704 1.09906973778235 0.972649728927918 0.773413099264204
QUPRZ 0 0.748192466203913 0.861740599223195 1.76780230499595 1.8230995777777 1.23833934306289 1.74181112278384 3 0 0.216766529964373 0.144519132810703 0.086769461485229 0.181922010964625 0.151363109146411
CCOGL 0 0.622450800934843 1.35112060163859 2.08487871700241 2.07742807928616 1.4367712922181 1.59527026655799 3 0 -0.103114350628557 1.36591051281661 1.98968879416009 1.81996519785625 1.55021903996547
TPQPL 0 0.273886404618 1.61897515011457 1.92745605108483 1.82673334526354 1.69390624326728 1.24500467361991 3 0 -0.0946770832777869 0.81984081892643 0.978454848309301 0.684208493717725 0.544980913052509
LCBAE 0 0.124137543238415 0.708407905060534 1.62381698990762 1.35491342310814 1.82001149002964 2.07019237440033 3 0 0.038532209000156 0.39015354012159 0.245193522780853 0.0602174968825249 0.0133630583069925
NLHZL 0 -0.14500153031452 1.67788812722153 1.3079835739458 1.51361580842575 1.50898678789803 1.50716367477581 3 0 -0.0776106493225654 0.448822914786839 0.27000205257387 0.127996489425466 0.0897530100561155
BFEFQ 0 -0.142234326532034 1.43061720015794 1.28258780703102 1.55034851341876 1.38605470725141 2.07792661119093 3 0 0.089287139364033 0.347419898433269 0.44326527866236 0.548700762993619 0.274090055657926
DMVQC 0 -0.0203297500512618 1.27134708950643 1.4737245846124 1.53851500257627 1.55509350797623 2.07820064810739 3 0 -0.033367870555288 0.992171967696086 1.45187662764119 1.37632520014508 1.06506544884277
GLFJK 0 -0.0231418599716278 0.978196942919243 1.3487917390231 1.63946791514951 1.42126713523683 1.84823270804552 3 0 0.054196062393577 0.285615463953403 0.436111146441771 0.436258358705788 0.336673920849646
QAXHM 0 -0.873473432272584 2.1289272783827 2.40091361840084 2.57779647186813 1.50064055971725 2.21445140651422 3 0 -0.338914680384494 1.00910736290143 1.35821983856624 1.27553711987944 0.738508543487348
CHGFW 0 0.0764219617181007 1.58064966783687 1.92145702781062 2.48768850156705 1.60031113743415 2.14182978304006 3 0 0.120603137122787 1.98549703610722 2.45765815687484 2.14821050046777 1.81706918102712
WBBWS 0 0.019862949985058 1.53081759461985 2.31377387224138 2.06449546228278 1.57493693493571 1.96877213775109 4 0 -0.228182027990998 1.15205301582989 1.46692721503272 1.33749722668459 0.89397761126203
IUZNT 0 -0.583302371660904 1.21232808131913 1.77802350371651 1.98884938451675 1.82344742962636 1.95208106071584 4 0 -0.223134802290023 0.855515909303291 1.18087484832065 0.849750235568849 0.705970955726996
APERC 0 -0.553508390252805 1.17463845036474 1.99635313307876 2.21056553941015 1.78480432018272 1.99327362875542 4 0 0.020019565248667 1.74434086074419 2.32693909106448 1.99292973144174 1.49047010862137
QANKB 0 1.13266797619564 1.85147855714134 2.52437185585826 2.22784006897012 1.81153564166581 1.83051854615954 4 0 -0.012670776651144 2.20142845389527 3.02377333390231 2.62938519466852 2.42566696069524
XRNYO 0 0.644516173484437 1.99652189982268 2.3907808629852 2.01985547151832 1.96031084652714 1.62137094886526 4 0 -0.0174842486553161 0.543154995591983 0.881572080500568 0.803209767892821 0.287804271501513
OIXMO 0 0.712871953376102 1.90604532369487 2.04320602985005 2.34720804976762 1.73966259496374 1.39027592178966 4 0 -0.023856157980388 1.16500110584665 1.40703064765064 1.12074706605429 0.883888207214719
ZWUOM 0 0.559844027286374 1.76543267808992 2.43635995160145 2.25751200303883 1.46859344815323 1.61541082317496 4 0 0.111021560124298 1.45829124272273 1.79055097370406 1.53849096841936 1.29641426381561
KTVJX 0 0.814580123674516 1.36075621082573 3.57002521881051 3.20650549259968 0.947712750998236 1.36289264585606 4 0 -0.028754095486641 1.11686768882443 1.57044379055046 1.43066138708027 1.00287722770729
CJANM 0 1.06970604256416 0.633712339061662 2.71612226493085 2.54448277977072 2.36683560414751 2.18496910995078 4 0 0.063181505380243 0.139102858247076 0.564948413040345 0.796887980301183 0.42947294344429
TXYID 0 1.08868544855214 0.535210262105856 2.37470523167367 2.24726042427203 1.88535461536094 1.91127118202373 4 0 0.077124280844478 0.121270998229806 -0.035525344158312 -0.093783856032044 0.163425588221488
MZCAP 0 0.381490476496418 0.712296844472299 2.91681054409802 2.23224996075237 1.93000783303109 1.43341732114569 4 0 0.030494607324358 0.334540217369457 0.446842863369158 0.479551927215717 0.414866481164103
JWVRM 0 0.41056684130489 0.789480072555595 3.02196301714818 2.83248798768162 2.29661598791347 1.94742872898868 4 0 0.0551350889338433 0.551025467458022 1.26238145376707 1.29201214465549 1.28659064988477
RZOPL 0 0.594101165795685 1.00032357511432 2.58658693880842 2.72498744622809 2.07031861236 1.79333047084765 4 0 0.00610164799599999 0.485164919760192 0.528956231133206 0.292257296820958 0.319544470755164
PYLYY 0 0.380443439823204 0.934290262424724 2.25130042222436 2.37869993009792 2.05891940084167 0.922475056666729 4 0 -0.125652494922884 1.16869183971224 1.33593703550355 0.857525160855331 0.65605610982073
DQMPK 0 0.530550587437493 1.12986209484499 2.63029339073806 2.07162736300575 1.86699081418471 0.754321744166543 4 0 -0.0279402290951816 0.140471956991473 0.0686318935510784 0.0082280632343499 0.0597855343735822
// Generated by CoffeeScript 1.4.0
(function() {
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
window.HeatmapView = (function(_super) {
__extends(HeatmapView, _super);
function HeatmapView() {
return HeatmapView.__super__.constructor.apply(this, arguments);
}
HeatmapView.prototype.initialize = function() {
var _this = this;
if (!this.model.options.hideHeatmap) {
this.render();
this.model.on("change:currentRowId", function() {
return _this.showCurrentRow();
});
this.model.on("change:clickedRowId", function() {
return _this.showClickedRow();
});
this.model.on("change:currentCluster", function() {
return _this.showCurrentCluster();
});
return this.model.on("change:currentTag", function() {
return _this.showCurrentTag();
});
}
};
HeatmapView.prototype.events = function() {
return {
"mouseover .cell": "changeCurrentRowId",
"mouseout .row": "changeCurrentRowId",
"click .row": "changeClickedRowId",
"click .tag": "changeCurrentTag",
"click .tag_name": "changeCurrentTag"
};
};
HeatmapView.prototype.render = function() {
var columnName, rowName,
_this = this;
this.heatmapColor = d3.scale.linear().domain([-1.5, 0, 1.5]).range(["#278DD6", "#fff", "#d62728"]);
this.rowTextScaleFactor = 15;
this.columnTextScaleFactor = 10;
this.columnNamesMargin = d3.max((function() {
var _i, _len, _ref, _results;
_ref = this.model.columnNames;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
columnName = _ref[_i];
_results.push(columnName.length);
}
return _results;
}).call(this));
this.rowNamesMargin = d3.max((function() {
var _i, _len, _ref, _results;
_ref = this.model.rowNames;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
rowName = _ref[_i];
_results.push(rowName.length);
}
return _results;
}).call(this));
this.margin = {
top: 250,
right: this.calculateRightMargin(),
bottom: 50,
left: 50
};
this.cellSize = 25;
this.width = this.cellSize * this.model.columnNames.length;
this.height = this.cellSize * this.model.rowNames.length;
this.heatmap = d3.select(this.el).attr("width", this.width + this.margin.right + this.margin.left).attr("height", this.height + this.margin.top + this.margin.bottom).attr("class", "heatmap").append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
this.x = d3.scale.ordinal().domain(d3.range(this.model.longitudinalData[0].length)).rangeBands([0, this.width]);
this.y = d3.scale.ordinal().domain(d3.range(this.model.rowNames.length)).rangeBands([0, this.height]);
this.columns = this.heatmap.selectAll(".column").data(this.model.columnNames).enter().append("g").attr("class", "column");
this.columns.append("text").attr("x", 6).attr("y", this.x.rangeBand() / 2).attr("dy", "-.5em").attr("dx", ".5em").attr("text-anchor", "start").attr("transform", function(d, i) {
return "translate(" + (_this.x(i)) + ") rotate(-45)";
}).text(function(d, i) {
return _this.model.columnNames[i];
});
this.addRows();
if (this.model.options.tagFile) {
this.addTags();
}
this.$("rect.cell").tooltip({
title: function() {
return this.__data__.condition.split("_").join(" ") + "<br>" + d3.round(this.__data__.value, 2);
},
placement: "top"
});
return this.$("rect.tag").tooltip({
title: function() {
return this.__data__;
},
placement: "top"
});
};
HeatmapView.prototype.calculateRightMargin = function() {
var maxrowNameLength;
maxrowNameLength = d3.max(this.model.rowNames.map(function(x) {
return x.length;
}));
return maxrowNameLength * 18;
};
HeatmapView.prototype.addRows = function() {
var getRow, rows, that,
_this = this;
that = this;
getRow = function(row) {
var cell,
_this = this;
return cell = d3.select(this).selectAll(".cell").data(row).enter().append("rect").attr("class", "cell").attr("x", function(d, i) {
return that.x(i);
}).attr("width", that.x.rangeBand()).attr("height", that.x.rangeBand()).text(function(d) {
return d;
}).style("fill", function(d) {
return that.heatmapColor(d.value);
});
};
rows = this.heatmap.selectAll(".row").data(this.model.longitudinalData).enter().append("g").attr("class", "row").attr("row-id", function(d, i) {
return _this.model.rowIds[i];
}).attr("cluster", function(d, i) {
return _this.model.clusters[i];
}).attr("transform", function(d, i) {
return "translate(0," + (_this.y(i)) + ")";
}).each(getRow);
if (!this.model.options.hideRowNames) {
return rows.append("text").attr("x", this.width + this.calculateRightMargin()).attr("y", this.x.rangeBand() / 2).attr("dy", ".32em").attr("text-anchor", "end").text(function(d, i) {
return _this.model.rowNames[i];
});
}
};
HeatmapView.prototype.addTags = function() {
var heatmapWidth, maxTagNameLength, tagMargin, tagNames, tagScale, tagSize, tags,
_this = this;
tags = "";
$.ajax({
url: this.model.options.tagFile,
context: document.body,
async: false,
success: function(data) {
return tags = window.parseTags(data);
}
});
tagNames = window.getTagNames(tags);
maxTagNameLength = d3.max(tagNames.map(function(x) {
return x.length;
})) * 12;
tagSize = this.cellSize / 2;
tagMargin = 12;
heatmapWidth = d3.select("#heatmap").node().offsetWidth;
tagScale = d3.scale.ordinal().domain(d3.range(tagNames.length)).rangeBands([0, (tagNames.length - 1) * (tagSize + tagMargin)]);
this.heatmap.selectAll(".row").selectAll(".tag").data(function(d, i) {
return tags[_this.model.rowNames[i]];
}).enter().append("rect").attr("class", "tag").attr("x", heatmapWidth).attr("y", this.x.rangeBand() / 4).attr("transform", function(d, i) {
return "translate(" + tagScale(tagNames.indexOf(d)) + ",0)";
}).attr("width", this.x.rangeBand() / 2).attr("height", this.x.rangeBand() / 2).attr("row-id", function(d) {
return d;
}).text(function(d) {
return d;
}).style("fill", function(d, i) {
return window.tagColor(d);
}).style("stroke", "none");
this.heatmap.selectAll(".tag_name").data(tagNames).enter().append("text").attr("class", "tag_name").attr("dx", heatmapWidth + 10).attr("dy", 0).attr("transform", function(d, i) {
return "translate(" + tagScale(tagNames.indexOf(d)) + (",0) rotate(-45 " + heatmapWidth + " 0)");
}).attr("text-anchor", "start").attr("name", function(d) {
return d;
}).text(function(d) {
return d;
}).attr("fill", "black");
return d3.select("#heatmap").attr("width", parseInt(d3.select("#heatmap").attr("width")) + tagNames.length * 25 + 100);
};
HeatmapView.prototype.changeCurrentRowId = function(e) {
e.stopPropagation();
return this.model.set({
currentRowId: e.type === "mouseover" ? d3.select(e.target.parentNode).attr("row-id") : null
});
};
HeatmapView.prototype.changeClickedRowId = function(e) {
e.stopPropagation();
return this.model.set({
clickedRowId: d3.select(e.target.parentNode).attr("row-id")
});
};
HeatmapView.prototype.changeCurrentTag = function(e) {
var currentTag;
e.stopPropagation();
this.model.attributes['currentCluster'] = null;
d3.selectAll(".clusters span").classed("current", 0);
d3.selectAll(".tag_name").classed("current", 0);
currentTag = d3.select(e.target);
if (currentTag && this.model.get("currentTag") === currentTag.attr("name")) {
return this.model.set({
currentTag: null
});
} else {
d3.selectAll(".tag_name[row-id=" + (currentTag.text()) + "]").classed("current", 1);
return this.model.set({
currentTag: currentTag.text()
});
}
};
HeatmapView.prototype.showCurrentRow = function() {
var currentRowId, currentRowIdId;
d3.selectAll(".row").filter(":not(.clicked)").classed("current", 0);
currentRowIdId = this.model.get("currentRowIdId");
if (currentRowIdId != null) {
currentRowId = this.heatmap.select("[row-id=" + currentRowIdId + "]");
return currentRowId.classed("current", 1);
}
};
HeatmapView.prototype.showClickedRow = function() {
var clickedRow, clickedRowId;
clickedRowId = this.model.get("clickedRowId");
if (clickedRowId != null) {
clickedRow = this.heatmap.select("[row-id=" + clickedRowId + "]");
d3.select("#pcp").style("top", Math.max(150, clickedRow.filter(".row").node().offsetParent.scrollTop) + 50);
this.removeClickedRow();
return clickedRow.classed("current clicked", 1);
}
};
HeatmapView.prototype.removeClickedRow = function() {
return d3.selectAll(".row").classed("current clicked", 0);
};
HeatmapView.prototype.showCurrentCluster = function() {
var currentCluster, rowsToUpdate,
_this = this;
currentCluster = this.model.get("currentCluster");
$(".row").hide();
if (currentCluster) {
rowsToUpdate = this.heatmap.selectAll(".row[cluster='" + currentCluster + "']");
} else {
rowsToUpdate = this.heatmap.selectAll(".row");
}
$(rowsToUpdate[0]).show();
return rowsToUpdate.attr("transform", function(d, i) {
return "translate(0," + (_this.y(i)) + ")";
});
};
HeatmapView.prototype.showCurrentTag = function() {
var currentTag, rowsToUpdate,
_this = this;
currentTag = this.model.get("currentTag");
$(".row").hide();
if (currentTag) {
rowsToUpdate = d3.selectAll($(".tag[row-id='" + currentTag + "']").parent());
} else {
rowsToUpdate = this.heatmap.selectAll(".row");
}
$(rowsToUpdate[0]).show();
return rowsToUpdate.attr("transform", function(d, i) {
return "translate(0," + (_this.y(i)) + ")";
});
};
return HeatmapView;
})(Backbone.View);
}).call(this);
// Generated by CoffeeScript 1.4.0
(function() {
window.clusterColor = d3.scale.category10();
window.tagColor = d3.scale.category20();
window.no_tag = "-";
window.parseTags = function(content) {
var tag_lines, tags;
tag_lines = d3.csv.parseRows(content);
tags = {};
tag_lines.map(function(tag_line) {
var values;
values = tag_line.slice(1);
return tags[tag_line[0]] = values.indexOf(window.no_tag) === -1 ? values : [];
});
return tags;
};
window.getFrequencies = function(array) {
var frequencies;
frequencies = {};
_.chain(array).groupBy(function(p) {
return p;
}).each(function(e, i) {
return frequencies[i] = _.size(e);
});
return frequencies;
};
window.getTagNames = function(tags) {
var tagFrequencies, tagValues;
tagValues = _.chain(tags).values().flatten();
tagFrequencies = window.getFrequencies(tagValues.value());
return tagValues.unique().sortBy(function(x) {
return tagFrequencies[x];
}).value().reverse();
};
window.replace = function(array, replaceItem, replaceWith) {
var item, _i, _len, _results;
_results = [];
for (_i = 0, _len = array.length; _i < _len; _i++) {
item = array[_i];
if (item === replaceItem) {
_results.push(replaceWith);
} else {
_results.push(item);
}
}
return _results;
};
window.isNumber = function(n) {
return !isNaN(parseFloat(n)) && isFinite(n);
};
window.getUrlVars = function() {
var vars;
vars = {};
window.location.href.replace(/[?&]+([^=&]+)=([^&]*)/g, function(m, key, value) {
return vars[key] = value;
});
return vars;
};
window.resetOnClick = function(model) {
return d3.select("body").on("click", function() {
model.set({
clickedRowId: null
});
model.set({
currentTag: null
});
d3.selectAll(".tag_name").classed("current", 0);
model.set({
currentCluster: null
});
return d3.selectAll(".clusters span").classed("current", 0);
});
};
window.joinSentence = function(arr) {
var arr2, last, sentence;
arr2 = arr.slice(0);
last = arr2.pop();
if (arr2.length > 0) {
sentence = arr2.join(", ");
return sentence + " and " + last;
} else {
return last;
}
};
}).call(this);
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>PCP Heatmap</title>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://documentcloud.github.com/underscore/underscore.js"></script>
<script src="http://documentcloud.github.com/backbone/backbone.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-tooltip.js"></script>
<script src="http://twitter.github.com/bootstrap/assets/js/bootstrap-popover.js"></script>
<script src="http://mbostock.github.com/d3/d3.js"></script>
<script src="helper.js"></script>
<script src="longitudinal_model.js"></script>
<script src="dashboard_view.js"></script>
<script src="heatmap_view.js"></script>
<script src="pcp_view.js"></script>
<link href="https://fonts.googleapis.com/css?family=Lobster" rel="stylesheet">
<link href="leanback_style.css" rel="stylesheet">
<link href="longitudinal.css" rel="stylesheet">
</head>
<body>
<div id='dashboard'>
<div class='clusters'></div>
<h1></h1>
</div>
<main>
<svg id='heatmap'></svg>
<svg id='pcp'></svg>
</main>
<script type="text/javascript">
var urlVars = getUrlVars();
$(document).ready(function() {
d3.text("data.csv", function(text) {
var parsedGenes = d3.csv.parse(text);
var userOptions = { urlVars: urlVars, rowNameColumn: "gene_symbol", rowType: "genes", yAxisName: "log-ratio" };
var model = new window.LongitudinalModel(parsedGenes, userOptions);
var dashboardView = new window.DashboardView({ el: "#dashboard", model: model});
var heatmapView = new window.HeatmapView({ el: "#heatmap", model: model});
var pcpView = new window.PcpView({ el: "#pcp", model: model});
d3.select("body").style("padding-top", d3.select("#dashboard").node().offsetHeight);
resetOnClick(model);
});
});
</script>
</body>
</html>
/* clearfix */
.clearfix:before,
.clearfix:after {
content: "";
display: table;
}
.clearfix:after {
clear: both;
}
.clearfix {
zoom: 1;
}
body, .gist-meta {
font: 14px Helvetica Neue;
/*background: #f4f4f4 url(../images/background.png);*/
}
a {
color: steelblue !important;
text-decoration: none;
}
a:hover {
text-decoration: underline;
}
body, .gist {
text-rendering: optimizeLegibility;
margin-top: 1em;
}
.body {
width: 960px;
margin: auto;
}
.logo {
color: steelblue;
}
.readme {
margin-bottom: 3em;
}
.time {
color: #666;
font-size: smaller;
font-style: oblique;
}
h1 {
font-size: 36px;
font-weight: 300;
}
h2 {
font-weight: normal;
color: #666;
}
h2 .description {
color: #000;
font-weight: bold;
}
iframe {
width: 960px;
height: 500px;
border: 1px solid #DEDEDE;
}
.about {
display: block;
font-weight: 300;
line-height: 60px;
}
.about .domain {
color: black;
}
.right {
float: right;
}
body {
margin: 0 auto;
padding: 50px 0 0 0; }
main {
display: block; }
text {
font-family: Helvetica, Arial, sans-serif;
font-size: 16px; }
#landing {
font-size: 24px;
margin: 0 auto;
width: 960px; }
#landing a {
font-weight: bold; }
.pcp {
position: absolute;
cursor: pointer; }
.pcp .title {
font-size: 25px;
font-weight: bold; }
.pcp .expression-line {
stroke-width: 6;
stroke-opacity: 0.5;
stroke-linecap: round;
stroke-join: round;
fill: none; }
.pcp .expression-line.current {
stroke-opacity: 1;
stroke: #d62728; }
.pcp .expression-text {
font-weight: bold; }
.pcp .expression-point {
fill: white;
stroke: black;
stroke-width: 4px; }
.pcp .axis path, .pcp .axis .tick {
stroke: black;
stroke-opacity: 1;
stroke-width: 2; }
.pcp .axis line {
shape-rendering: crispEdges; }
.pcp .axis.zero {
stroke: black;
stroke-width: 2;
stroke-opacity: 1;
stroke-dasharray: 8, 5;
fill: none; }
.pcp .axis text {
font-weight: bold; }
.tag_name {
fill: black; }
.tag_name:hover {
fill: #d62728; }
.tag_name.current {
fill: #d62728; }
.heatmap {
float: left;
cursor: pointer; }
.heatmap .row rect {
stroke: black;
stroke-width: 1px; }
.heatmap .row.current.clicked rect {
stroke: black; }
.heatmap .row.current text {
font-weight: bold; }
.heatmap .column text {
font-weight: normal; }
#dashboard {
position: fixed;
top: 0;
width: 100%;
z-index: 9999;
background-color: black;
padding: 20px; }
#dashboard h1 {
line-height: 40px;
color: white;
margin: 0;
font-family: Lobster, Helvetica, Arial, sans-serif;
font-weight: bold; }
#dashboard .clusters {
float: right;
width: 800px;
padding: 0 40px 0 0;
font-family: Lobster, Georgia, serif;
font-weight: bold; }
#dashboard .clusters span {
cursor: pointer;
-moz-user-select: -moz-none;
-khtml-user-select: none;
-webkit-user-select: none;
-ms-user-select: none;
user-select: none;
color: white;
width: 140px;
float: left;
font-size: 30px;
margin: 0 5px 5px 0;
padding: 5px 0;
text-align: center;
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px; }
#dashboard .clusters span.current {
-webkit-box-shadow: 0px 4px 4px 0px #aaaaaa;
-moz-box-shadow: 0px 4px 4px 0px #aaaaaa;
box-shadow: 0px 4px 4px 0px #aaaaaa; }
#dashboard .clusters span:active {
position: relative;
top: 3px; }
.tooltip {
position: absolute;
z-index: 1020;
display: block;
padding: 5px;
font-size: 20px;
transform: translate(12px, 0);
opacity: 0;
visibility: visible; }
.tooltip.in {
opacity: 0.8;
filter: alpha(opacity=80); }
.tooltip.top {
margin-top: -2px; }
.tooltip.right {
margin-left: 2px; }
.tooltip.bottom {
margin-top: 2px; }
.tooltip.left {
margin-left: -2px; }
.tooltip.top .tooltip-arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top: 5px solid black;
border-right: 5px solid transparent;
border-left: 5px solid transparent; }
.tooltip.left .tooltip-arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid black; }
.tooltip.bottom .tooltip-arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
border-left: 5px solid transparent; }
.tooltip.right .tooltip-arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 5px solid black;
border-bottom: 5px solid transparent; }
.tooltip-inner {
max-width: 200px;
padding: 3px 8px;
color: white;
font-weight: bold;
text-align: center;
text-decoration: none;
background-color: black;
-webkit-border-radius: 4px;
-moz-border-radius: 4px;
border-radius: 4px; }
.tooltip-arrow {
position: absolute;
width: 0;
height: 0; }
.popover {
position: absolute;
top: 0;
left: 0;
z-index: 1010;
display: none;
padding: 5px; }
.popover.top {
margin-top: -5px; }
.popover.right {
margin-left: 5px; }
.popover.bottom {
margin-top: 5px; }
.popover.left {
margin-left: -5px; }
.popover.top .arrow {
bottom: 0;
left: 50%;
margin-left: -5px;
border-top: 5px solid black;
border-right: 5px solid transparent;
border-left: 5px solid transparent; }
.popover.right .arrow {
top: 50%;
left: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-right: 5px solid black;
border-bottom: 5px solid transparent; }
.popover.bottom .arrow {
top: 0;
left: 50%;
margin-left: -5px;
border-right: 5px solid transparent;
border-bottom: 5px solid black;
border-left: 5px solid transparent; }
.popover.left .arrow {
top: 50%;
right: 0;
margin-top: -5px;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid black; }
.popover .arrow {
position: absolute;
width: 0;
height: 0; }
.popover-inner {
width: 280px;
padding: 3px;
overflow: hidden;
background: black;
background: rgba(0, 0, 0, 0.8);
-webkit-border-radius: 6px;
-moz-border-radius: 6px;
border-radius: 6px;
-webkit-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
-moz-box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3);
box-shadow: 0 3px 7px rgba(0, 0, 0, 0.3); }
.popover-title {
padding: 9px 15px;
line-height: 1;
background-color: #f5f5f5;
border-bottom: 1px solid #eeeeee;
-webkit-border-radius: 3px 3px 0 0;
-moz-border-radius: 3px 3px 0 0;
border-radius: 3px 3px 0 0; }
.popover-content {
padding: 14px;
background-color: white;
-webkit-border-radius: 0 0 3px 3px;
-moz-border-radius: 0 0 3px 3px;
border-radius: 0 0 3px 3px;
-webkit-background-clip: padding-box;
-moz-background-clip: padding-box;
background-clip: padding-box; }
.popover-content p, .popover-content ul, .popover-content ol {
margin-bottom: 0; }
// Generated by CoffeeScript 1.4.0
(function() {
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
window.LongitudinalModel = (function(_super) {
var defaults;
__extends(LongitudinalModel, _super);
function LongitudinalModel() {
return LongitudinalModel.__super__.constructor.apply(this, arguments);
}
defaults = {
currentRowId: null,
clickedRowId: null,
currentCluster: null,
currentTag: null
};
LongitudinalModel.prototype.initialize = function(parsedData, userOptions) {
var id;
if (userOptions == null) {
userOptions = {};
}
this.options = {
rowNameColumn: userOptions.rowNameColumn || "id",
yAxisName: userOptions.yAxisName || "log-ratio",
specialColumnNames: userOptions.specialColumnNames || ["cluster"],
rowType: userOptions.rowType,
tagFile: userOptions.urlVars["tags"],
showGroups: userOptions.urlVars["groups"],
hideHeatmap: userOptions.urlVars["no_heatmap"],
hidePCP: userOptions.urlVars["no_pcp"],
hideRowNames: userOptions.urlVars["no_row_names"]
};
this.options.specialColumnNames = _.union(this.options.specialColumnNames, this.options.rowNameColumn);
this.parsedData = parsedData;
this.rowNames = _.pluck(this.parsedData, this.options.rowNameColumn);
this.rowIds = (function() {
var _i, _ref, _results;
_results = [];
for (id = _i = 1, _ref = this.parsedData.length; 1 <= _ref ? _i <= _ref : _i >= _ref; id = 1 <= _ref ? ++_i : --_i) {
_results.push("_row_" + id);
}
return _results;
}).call(this);
this.columnNames = this.getColumnNames();
this.columnGroups = this.getColumnGroups();
this.longitudinalData = this.getLongitudinalData();
this.groupedLongitudinalData = this.getGroupedLongitudinalData();
this.clusters = _.pluck(this.parsedData, "cluster");
this.options.showClusters = _.uniq(this.clusters).length > 1;
return this.clusterNames = this.getClusterNames();
};
LongitudinalModel.prototype.getRowName = function(rowName) {
return this.rowNames[this.rowIds.indexOf(rowName)];
};
LongitudinalModel.prototype.getColumnGroups = function() {
return _.chain(this.columnNames).map(function(columnName) {
return columnName.split("_")[0];
}).uniq().value();
};
LongitudinalModel.prototype.getLongitudinalValueExtent = function() {
var longitudinalValues;
longitudinalValues = _.flatten(this.longitudinalData.map(function(longitudinalDataRow) {
return longitudinalDataRow.map(function(item) {
return item.value;
});
}));
return d3.extent(longitudinalValues);
};
LongitudinalModel.prototype.getColumnNames = function() {
var _this = this;
return _.keys(this.parsedData[0]).filter(function(columnName) {
return !_.include(_this.options.specialColumnNames, columnName);
});
};
LongitudinalModel.prototype.getLongitudinalData = function() {
var _this = this;
return this.parsedData.map(function(row) {
return _this.columnNames.map(function(columnName) {
return {
condition: columnName,
value: +row[columnName]
};
});
});
};
LongitudinalModel.prototype.getGroupedLongitudinalData = function() {
var _this = this;
return this.parsedData.map(function(row) {
var columnGroups, currentGroup, longitudinalValues;
columnGroups = _this.columnGroups.slice(0);
currentGroup = columnGroups.shift();
longitudinalValues = [];
_this.columnNames.map(function(columnName) {
if (!columnName.match(RegExp("^" + currentGroup + "_"))) {
longitudinalValues.push({
condition: "",
value: null
});
currentGroup = columnGroups.shift();
}
return longitudinalValues.push({
condition: columnName,
value: +row[columnName]
});
});
return longitudinalValues;
});
};
LongitudinalModel.prototype.getClusterNames = function() {
var clusterFrequencies;
clusterFrequencies = window.getFrequencies(this.clusters);
return _.chain(clusterFrequencies).keys().sortBy(function(x) {
return clusterFrequencies[x];
}).value().reverse();
};
return LongitudinalModel;
})(Backbone.Model);
}).call(this);
// Generated by CoffeeScript 1.4.0
(function() {
var __hasProp = {}.hasOwnProperty,
__extends = function(child, parent) { for (var key in parent) { if (__hasProp.call(parent, key)) child[key] = parent[key]; } function ctor() { this.constructor = child; } ctor.prototype = parent.prototype; child.prototype = new ctor(); child.__super__ = parent.prototype; return child; };
window.PcpView = (function(_super) {
__extends(PcpView, _super);
function PcpView() {
return PcpView.__super__.constructor.apply(this, arguments);
}
PcpView.prototype.initialize = function() {
var _this = this;
if (!this.model.options.hidePCP) {
this.render();
this.model.on("change:currentRowId", function() {
return _this.showCurrentRow();
});
this.model.on("change:clickedRowId", function() {
return _this.showClickedRow();
});
this.model.on("change:currentCluster", function() {
return _this.showCurrentCluster();
});
return this.model.on("change:currentTag", function() {
return _this.showCurrentTag();
});
}
};
PcpView.prototype.events = function() {
return {
"mouseover .expression-line": "changeCurrentRowId",
"mouseout .expression-line": "changeCurrentRowId",
"click .expression-line": "changeClickedRowId",
"click .expression-point": "showExpressionPointText"
};
};
PcpView.prototype.render = function() {
var columnName,
_this = this;
this.columnNamesMargin = d3.max((function() {
var _i, _len, _ref, _results;
_ref = this.model.columnNames;
_results = [];
for (_i = 0, _len = _ref.length; _i < _len; _i++) {
columnName = _ref[_i];
_results.push(columnName.length);
}
return _results;
}).call(this));
this.margin = {
top: 300,
right: 50,
bottom: this.columnNamesMargin * 30,
left: 150
};
this.width = d3.max([400, this.model.columnNames.length * 40]);
this.height = 300;
this.pcp = d3.select(this.el).attr("width", this.width + this.margin.right + this.margin.left).attr("height", this.height + this.margin.top + this.margin.bottom).attr("class", "pcp").append("g").attr("transform", "translate(" + this.margin.left + "," + this.margin.top + ")");
this.x = d3.scale.ordinal().domain(this.model.columnNames).rangePoints([0, this.width], .2);
this.y = d3.scale.linear().domain(this.model.getLongitudinalValueExtent()).range([this.height, 0], .2);
this.line = d3.svg.line().defined(function(d) {
return _.isFinite(d.value);
}).x(function(d) {
return _this.x(d.condition);
}).y(function(d) {
return _this.y(d.value);
});
this.xAxis = d3.svg.axis().scale(this.x).tickSize(6, 0);
this.renderedXAxis = this.pcp.append("g").attr("class", "x axis").attr("transform", "translate(0," + this.height + ")").call(this.xAxis);
this.renderedXAxis.selectAll("text").attr("dx", "-.5em").attr("dy", ".3em").attr("text-anchor", "end").attr("transform", "rotate(-45)");
this.yAxis = d3.svg.axis().scale(this.y).ticks(4).tickSize(6, 0).orient("left");
this.renderedYAxis = this.pcp.append("g").attr("class", "y axis").attr("transform", "translate(0,0)").call(this.yAxis);
this.renderedYAxis.append("text").attr("text-anchor", "middle").attr("dy", "-.5em").text(this.model.options.yAxisName);
this.addLongitudinalDataLines();
return this.pcp.append("line").attr("y1", this.y(0)).attr("y2", this.y(0)).attr("x2", this.width).attr("class", "axis zero");
};
PcpView.prototype.addLongitudinalDataLines = function() {
var _this = this;
this.pcp.selectAll(".expression-line").data(this.getLongitudinalData()).enter().append("path").attr("class", "expression-line").attr("row-id", function(d, i) {
return _this.model.rowIds[i];
}).attr("stroke", "steelblue").attr("stroke-opacity", .5).attr("d", this.line);
if (this.model.options.showClusters) {
return this.pcp.selectAll(".expression-line").attr("cluster", function(d, i) {
return _this.model.clusters[i];
}).attr("stroke", function(d, i) {
return window.clusterColor(_this.model.clusters[i]);
});
}
};
PcpView.prototype.getLongitudinalData = function() {
if (this.model.options.showGroups) {
return this.model.groupedLongitudinalData;
} else {
return this.model.longitudinalData;
}
};
PcpView.prototype.changeCurrentRowId = function(e) {
e.stopPropagation();
return this.model.set({
currentRowId: e.type === "mouseover" ? d3.select(e.target).attr("row-id") : null
});
};
PcpView.prototype.changeClickedRowId = function(e) {
e.stopPropagation();
return this.model.set({
clickedRowId: d3.select(e.target).attr("row-id")
});
};
PcpView.prototype.showExpressionPointText = function(e) {
var d;
e.stopPropagation();
d = e.target.__data__;
return this.pcp.append("text").attr("class", "expression-text").attr("x", this.x(d.condition)).attr("y", this.y(d.value)).attr("text-anchor", "middle").attr("dy", "-.8em").text(d3.round(d.value, 2));
};
PcpView.prototype.showCurrentRow = function() {
var currentRow, currentRowId;
this.pcp.selectAll(".expression-line").filter(":not(.clicked)").classed("current", 0);
this.pcp.selectAll("text.title").filter(":not(.clicked)").remove();
currentRowId = this.model.get("currentRowId");
if (currentRowId != null) {
currentRow = this.pcp.select("[row-id=" + currentRowId + "]");
currentRow.classed("current", 1);
if (this.pcp.select(".clicked").empty()) {
currentRow.node().parentNode.appendChild(currentRow.node());
}
this.pcp.selectAll("text.title").filter(".clicked").style("display", "none");
return this.pcp.append("text").attr("class", "title").attr("x", this.width / 2).attr("y", -40).attr("text-anchor", "middle").text(this.model.getRowName(currentRowId));
} else {
return this.pcp.selectAll("text.title").filter(".clicked").style("display", "block");
}
};
PcpView.prototype.showClickedRow = function() {
var clickedRow, clickedRowId, data;
clickedRowId = this.model.get("clickedRowId");
if (clickedRowId != null) {
clickedRow = this.pcp.select("[row-id=" + clickedRowId + "]");
clickedRow.node().parentNode.appendChild(clickedRow.node());
this.removeClickedRow();
clickedRow.classed("current clicked", 1);
data = clickedRow.node().__data__;
this.pcp.selectAll(".expression-point").data(data.filter(function(d) {
return _.isFinite(d.value);
})).enter().append("circle").attr("class", "expression-point").attr("cx", this.line.x()).attr("cy", this.line.y()).attr("r", 5);
this.pcp.selectAll(".expression-text").data(data.filter(this.filterTextDatapoints)).enter().append("text").attr("class", "expression-text").attr("x", this.line.x()).attr("y", this.line.y()).attr("text-anchor", "middle").attr("dy", "-.8em").text(function(d, i) {
return d3.round(d.value, 2);
});
return this.pcp.select("text.title").classed("clicked", 1).text(this.model.getRowName(clickedRowId));
} else {
return this.removeClickedRow();
}
};
PcpView.prototype.filterTextDatapoints = function(item, i, arr) {
var significantDifference;
significantDifference = .5;
return (i === 0 && _.isFinite(item.value)) || ((i === arr.length - 1) && _.isFinite(item.value)) || (arr[i - 1].value === null && _.isFinite(item.value)) || (arr[i + 1].value === null && _.isFinite(item.value)) || (_.isFinite(item.value) && item.value > arr[i - 1].value && item.value > arr[i + 1].value && (Math.abs(item.value - arr[i - 1].value) > significantDifference || Math.abs(item.value - arr[i + 1].value) > significantDifference)) || (_.isFinite(item.value) && item.value < arr[i - 1].value && item.value < arr[i + 1].value && (Math.abs(item.value - arr[i - 1].value) > significantDifference || Math.abs(item.value - arr[i + 1].value) > significantDifference));
};
PcpView.prototype.removeClickedRow = function() {
this.pcp.selectAll(".expression-point").remove();
this.pcp.selectAll(".expression-text").remove();
this.pcp.selectAll(".expression-line").classed("current clicked", 0);
return this.pcp.select("text.title").text("");
};
PcpView.prototype.showCurrentCluster = function() {
var currentCluster,
_this = this;
currentCluster = this.model.get("currentCluster");
d3.select("#pcp").style("top", d3.select("body").node().scrollTop);
if (currentCluster) {
this.pcp.selectAll(".expression-line").attr("stroke", "#999");
return this.pcp.selectAll(".expression-line[cluster='" + currentCluster + "']").attr("stroke", function(d, i) {
return window.clusterColor(currentCluster);
}).each(function() {
return this.parentNode.appendChild(this);
});
} else {
this.pcp.selectAll(".expression-line").remove();
return this.addLongitudinalDataLines();
}
};
PcpView.prototype.showCurrentTag = function() {
var currentTag, taggedRowIds;
currentTag = this.model.get("currentTag");
d3.select("#pcp").style("top", 0);
scroll(0, 0);
if (currentTag) {
taggedRowIds = _(d3.selectAll("#heatmap .row")).chain().first().filter(function(d) {
return d.style.display !== "none";
}).map(function(d) {
return d3.select(d).attr("row-id");
}).value();
return this.pcp.selectAll(".expression-line").attr("stroke", "#999").filter(function(d, i) {
return _.include(taggedRowIds, d3.select(this).attr("row-id"));
}).attr("stroke", function(d, i) {
return window.clusterColor(d3.select(this).attr("cluster"));
}).each(function() {
return this.parentNode.appendChild(this);
});
} else {
this.pcp.selectAll(".expression-line").remove();
return this.addLongitudinalDataLines();
}
};
return PcpView;
})(Backbone.View);
}).call(this);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment