Challenge Overview
Welcome to Gene Heat Map Interactive Cluster Concept UI Prototype Challenge
Our client wants interactive visualization for Gene Heat Map with some requirements and sample data explained in the details below.
Let us know any doubts you have about specification in the challenge forum.
Final Submission Guidelines
UI Prototype Page Requirements
- For this challenge you need build the “Gene Heat Map” Interactive Visualisation using D3 Javascript Library
- Here’s other D3 examples: https://github.com/mbostock/d3/wiki/Gallery
- “Gene Heat Map” area should use fixed width and height, but placed in the centered of the browser screen
- To build this “Gene Heat Map” aside the D3 javascript library, you can create your own code, or use open source graph libraries, or any other solutions.
- All data needs to be loaded via separated JSON files
- There will be another challenge to re-skin and improve result of this UI Prototype
- Let’s discuss any doubt and questions you have. This is concept UI Prototype! we need to know what things are possible or NOT when build Gene Heat Map functionalities with D3 Javascript Library
Gene Heat Map Interactive Cluster Concept UI Prototype Requirements
About Cluster Heat Maps
https://www.youtube.com/watch?v=f5MhPVeA3Z4
What is Clustering?
https://www.youtube.com/watch?v=vNdyhLI02bs&feature=youtu.be
http://blog.nextgenetics.net/?e=44
http://compbio.pbworks.com/w/page/16252903/Microarray%20Clustering%20Methods%20and%20Gene%20Ontology
Example Visualizations
http://bl.ocks.org/ianyfchang/8119685
http://bl.ocks.org/mbostock/1005873
http://openscreen.cz/software/inchlib/home/
Base of Gene Heat Map in your UI Prototype submission
This is the close example of our expected Gene Heat Map using:
D3
http://bl.ocks.org/ianyfchang/8119685
http://bost.ocks.org/mike/miserables/
InCHlib (really close to what we want, but missing a few features)
http://openscreen.cz/software/inchlib/home/
Required Data need displayed in Map
File: InputFile_HeatmapRandom.txt & InputFile_HeatmapRandom.xlsx
- HUGO Stands for HUGA GENE,
- DONOR is the Sample name,
- CANCER_TYPE is Cancer Type,
- TPM is the value for each Hugo Gene.
- You will have to pivot the data before you can plug them into such a format like:
DONOR CANCER_TYPE / HUGO (TPM)
Example:
PDX1 colorectal / ABI1 (857)
PDX2 colorectal / ABI1 (3005)
Axis Label:
X: Genes (whole set, or defined set)
Y: Samples
Sorting:
Clustering
Cancer type
Cancer sub-type
Legend:
- We need same legend like example from scale -10 to 10
- Follow same coloring
Gene Heat Map Feature Priorities:
1). Zooming in and out.
- Ability to click to zoom in or out of the visualization.
- We need this to utilize a “-” button to zoom out instead of the way it is in the example.
http://bl.ocks.org/mbostock/1005873
http://mbostock.github.io/d3/talk/20111018/treemap.html
2). Filter
- Ability to filter by cancer type and subtype
- See the dropdown in this example: http://bl.ocks.org/ianyfchang/8119685
3). Sorting
- Ability to drag and drop selected cluster to another side of the heatmap.
- Select a cluster of interest
- Drag and drop (similar to resorting columns) to compare with another branch.
4). Grouping
- Ability to click to select branches to highlight them and fade out the rest
- See this example, click on the branches (on the left), they will turn red. http://openscreen.cz/software/inchlib/home/
5). Collapsing
- Ability to collapse or expand parts of the visualization with a “+” and “-” button on the branches.
- See this example: https://www.youtube.com/watch?time_continue=6&v=ApqWD3sGA8M
6). Ability to switch axis
Ability to switch axis with a button or toggle
7). Tooltip
- We need show the sample and the value.
- Clicking on the tooltip would bring up a detail page
http://bl.ocks.org/ianyfchang/8119685
Other Javascript Library Consideration!
http://openscreen.cz/software/inchlib/home/
https://github.com/rstudio/d3heatmap
Client Priorities (The items that are considered highest prototype priorities)
- Did your Gene Heat map captured all spec requirements?
- Ready to use in the actual website?
- Gene Heat Map performance
CODE REQUIREMENTS:
HTML/HTML5
- Provide comments on the page elements to give clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all HTML code so future developers can follow the code.
- All HTML code naming should not have any conflicts or errors.
Element and Attribute names should be in lowercase and use a "-" or camel naming to separate multiple-word classes (i.e.. "main-content", or "mainContent)
- Use semantically correct tags- use H tags for headers, etc. Use strong and em tags instead of bold and italic tags.
- No inline CSS styles- all styles must be placed in an external stylesheet.
- Validate your code- reviewers may accept minor validation errors, but please comment your reason for any validation errors. Use the validators listed in the scorecard.
CSS3
- Use CSS3 Media Queries to load different styles for each page and don't build different page for different device/layout.
- Provide comments on the CSS code. We need CSS comments to give a clear explanation of the code usage. The goal is to help future developers understand the code.
- Please use clean INDENTATION for all CSS so developers can follow the code.
- All CSS naming should not have any conflicts.
- As possible use CSS3 style when create all styling.
- Use CSS to space out objects, not clear/transparent images (GIFs or PNGs) and use proper structural CSS to lay out your page. Only use table tags for tables of data/information and not for page layout.
Javascript
- All JavaScript must not have a copyright by a third party.
- You are encouraged to use your own scripts, or scripts that are free, publicly available and do not have copyright statements or author recognition requirements anywhere in the code.
Images
- Images should be properly compressed while still having good visual quality.
- Please use best practice repetition usage of background based image.
- Please use sprites when using icons for your submission.
- Make sure your submission look sharp for Retina and Standard devices
Browsers Requirements
- Chrome Latest Browser
- Safari Latest Browser
- Firefox Latest Browser