eweitz / ideogram Goto Github PK
View Code? Open in Web Editor NEWChromosome visualization for the web
Home Page: https://eweitz.github.io/ideogram
License: Other
Chromosome visualization for the web
Home Page: https://eweitz.github.io/ideogram
License: Other
It would be nice to have a property that allows the user to set the font-size
and font
(bonus points) of the chromosome and band labels (without manually modifying the source code -> https://github.com/eweitz/ideogram/blob/master/src/js/bands/styles.js). The font is quite small, and would add value for those who have issues reading it.
Add a parameter for "assembly" to the Ideogram constructor.
The intent is to enable users to specify a non-default (i.e., previous or non-reference) assembly for the given organism. For example in human, where GRCh38 would be the default, this would enable users to specify the previous major version of human reference genome, GRCh37.
Allow NCBI name, GenBank accession or RefSeq accession.
Document the format of JSON for annotations, so developers do not need to dive into Chrome DevTools to learn how to output annotations data for display.
Hi again,
So, everything is going swimmingly, and I think I've got this all sorted out so a user can upload and display their 23andMe data.
Question: the reference data. How is it being generated? I'm currently taking an Intro to Genomics class, and we've been covering .sam
, .bam
, .vcf
, .bed
, and .fastq
files. But I'm having a bit of trouble following what's going on in the /data
directory.
/data/annotations/10000_virtual_snvs.json
... that's from the 10,000 Genomes Project, right? Is that basically a JSON version of a .vcf
file?
Add support for perpendicular band labels, e.g. in horizontally-oriented chromosomes.
I'm trying to add mouseover to ideogram, and build it minimized.
After:
npm install ideogram
and
npm install webpack
I tried to run webpack --optimize-minimize
and get this error:
ERROR in ideogram.min.js from UglifyJs
Unexpected token: name (Ploidy) [./src/js/ploidy.js:1,0][ideogram.min.js:6516,6]
So how should this be built minimized?
Cheers,
Jim
Hi, I noticed when I call multiple time on one page, the previous calling will limit the plotting for the next calling.
<div id="example1"></div>
<script>
var config1 = {
container: "#example1",
organism: 'human',
orientation: 'horizontal',
annotations: [
{
"chr": "2",
"start": 34294,
"stop": 125482
},
{
"chr": "17",
"start": 43125400,
"stop": 43125482
}
]
};
var ideogram1 = new Ideogram(config1);
</script>
<div id="example2"></div>
<script>
var config2 = {
container: "#example2",
organism: "human",
chromosome: "7",
orientation: "horizontal",
annotations: [
{
"chr": "7",
"start": 199999,
"stop": 3000000
},
{
"chr": "7",
"start": 6000000,
"stop": 9000000
}
],
"annotationsLayout": "overlay"
};
var ideogram2 = new Ideogram(config2);
</script>
On the second plotting, the chromosome length seemed to be restricted by the previous setting.
Hi I am trying to do a compartive mapping between Rat and Human. However, following the examples only Human chromosomes appear. If I restrict the code to displaying only a single species, I can get either Human or Rat to appear.
Here is the snippet from the script:
`
let config = {
organism: ["human","rattus-norvegicus"],
chromosomes: {"human" :["1", "6"], "rattus-norvegicus":["13","20"]}
};
let ideogram = new Ideogram(config);
`
Thanks!
I am trying to have plots in hg18, and I tried a couple of values for parameter assembly:
hg18, NCBI36, GCF_000001405.12,
none of them worked.
What's the proper way of doing it?
Hi,
Excellent plugin. Thanks for developing and sharing it over the github.
I am wondering if I can annotate based on chromosome coordinate so the arrow is placed exactly at that point on the ideogram.
thanks,
Aparna
Develop support for basic depictions for the chromosome complement of all eukaryotes. Integrate a third-party web API to retrieve chromosome count and length data for arbitrary taxa.
Thank you for this great tool, I'm using histograms to get overviews of data.
I want to have histo-bars on both sides of a chromosome with different colors.
Is it possible to do? If not, can you add this option?
Hi, I am using the latest master, and have noticed an issue with the annotations. It seems that when the user hovers over an annotation on other Ideogram's besides the first one, the annotation shows up behind the ideogram. I created an test case you can try here: https://github.com/matthewchan15/ideo-test-case/tree/issue-annotations-multi
Below is a GIF displaying the issue more clearly. I found that if you add a z-index: 100
to the style of _ideogramToolTip
with the developer tools, this becomes fixed. I have not tried modifying the source code, but I'm assuming you just need to add a z-index
to _ideogramToolTip
. I could make a PR if you like!
I'm looking to load data locally into the Ideogram, for example if I wanted to load one of these files without using dataDir
: https://github.com/eweitz/ideogram/tree/master/data/bands/ncbi
Hi, I am using the latest master, and have noticed an issue with the annotations. It seems that when the user scrolls down, and hovers over an annotation, the annotation becomes displaced upwards. I created an test case you can try here: https://github.com/matthewchan15/ideo-test-case/tree/issue-annotations-multi (Render Issue Single).
Below is a GIF displaying the issue more clearly. I found that if you change the style
of _ideogramToolTip
to position : fixed
with the developer tools, this becomes fixed. I have not tried modifying the source code, but I'm assuming it is as simple as changing the position
of _ideogramToolTip
. I could make a PR if you like!
Hi @eweitz ,
First of all, thanks for the magnificent work you 've done with ideogram.js
. Something like this was really missing.
An issue that I've just spotted (may not a real issue) is that in ideogram.css
stylesheet you assign the line-height property as line-height: 19.6px;
in the whole body element. This may override other styling themes (it happened in my case and created a mess with the whole application which took me some time to find out).
Is it possible that you somehow restructure the styling in upcoming versions so as to avoid this? Or if you do it for demo purposes, maybe remove it from the ideogram css stylesheet?
Thanks again for all the work.
Support labeling for features like genes or small variants. For example, in an ideogram with a basic annotation showing the location of gene BRCA1, add an option to display the label "BRCA1" next to the annotation.
Eric! Awesome work! Thank you so much for publishing this.
Have you given any thought to exporting the Ideogram
object as an es2015 module? I just managed to get it loaded up into a Meteor/React app, and it works wonderfully. Kudos! The one caveat is that I needed to glob all the contents of ideogram.js
into a custom .jsx file with an es2015 export statement. That's going to cause my implementation to drift out of sync with yours.
In most ideograms that are vertically oriented and have multiple rows of chromosomes, the rows are misaligned. Each row gets horizontally shifted, such that its chromosomes are not vertically flush with chromosomes in the row above.
This affects small layouts for all organisms. It also affects organisms with many chromosomes in larger layouts, as in this example with dog (Canis lupus familiaris):
A question from @wangtulao revealed the need to load natively-formatted annotations via remote URL in annotationsPath
. Currently, Ideogram.js assumes any such remote paths are for BED files. Revise that assumption.
In some cases we might want to compare ideograms for multiple samples at once, and currently it does not seem possible. At the moment our use case is for quick comparisons of gross structural variant differences at the outer level rather than needing any zoom capability.
The issue is that the Ideogram doesn't redraw the organism, when the organism
parameter is changed in both React
and vanilla
java script. For example if the organism
is 'human'
and is changed to 'mouse
', it will still show the Ideogram graph of 'human'
still. I've been messing around with the Ideogram a lot trying to get this feature to work within react. It seems that other parameters changes can render a redraw of the graph such as showBandLabels
and orientation
.
I have provided a test case for you to use to better understand the problem, which can be found here: https://github.com/matthewchan15/ideo-test-case
Hi,
Would you take a PR with some documentation to the readme if I submit one? I'm up and running and would be happy to take some notes as I fine tune things, and contribute them back.
Increase the number of genomes that can display cytogenetic bands.
Currently, Ideogram.js has cytogenetic bands for human, mouse, and rat. That data comes from NCBI's Ideogram Service FTP site, ftp://ftp.ncbi.nlm.nih.gov/pub/gdp/. It is converted into a format used by Ideogram.js in convert_band_data.py.
@cshukai informed me in #82 that cytogenetic band data is available from Ensembl Genomes, e.g. ftp://ftp.ensemblgenomes.org/pub/plants/release-25/mysql/zea_mays_core_25_78_6/karyotype.txt.gz. They also noted the availability of centromere coordinates in the GenoMaize's UCSC Genome Browser, e.g. here. Incorporate these sources of karyotype data into Ideogram.js's cytoband data pipeline.
Improve handling of chromosomes in mitochondrion (chrMT) and chloroplast (chrCP). Currently chrMT is never shown, and chrCP is shown but unlabeled.
These molecules pose visual design challenges:
Challenge 2 will be handled later. For this issue, address challenge 1, provide an option to show or hide these special molecules, and always label them if they are shown.
Implement support for circular annotation shapes.
I've been trying to integrate all the props listed in the API here, into react. In order to test the props I've been using the example code found here. I've noticed a discrepancy where many of the props used in the example docs, are not listed in the API docs.
For example in homology, the prop perspective is not listed in the API docs. This is just one case. I find this to be very confusing, are these props no longer being used, or have they simply just been forgotten to be put in the API docs?
var config = {
organism: 'human',
chromosomes: ['X', 'Y'],
chrHeight: 400,
chrMargin: 200,
showBandLabels: true,
perspective: 'comparative',
rotatable: false,
onLoad: onIdeogramLoad
};
Implement support for multiple facets in Ideogram.js's filtering module. Selections across different facets should apply a Boolean AND (intersection), in contrast to selections within a facet, which apply a Boolean OR (union).
How do we cite this work?
wonderful tools.
whether it can display multiple track(heatmap, histogram, overlay etc.) meanwhile.
Greetings,
I want to ask about the possibility of using the exact position for annotation? because when I try to use it as it is without scaling as in [1], some positions are not presented and the whole annotation disappears.
Any idea how I can do that?
Example of positions that not fit with the chrs positions:
In chr9
{
"chr": "9",
"annots": [
[
"",
79318384,
0,
0,
50.0
],
[
"",
139911697,
0,
0,
38.0
],
[
"",
139911697,
0,
0,
62.0
],
[
"",
86474241,
0,
0,
56.0
],
[
"",
27359226,
0,
0,
42.0
],
[
"",
79318384,
0,
0,
50.0
],
[
"",
27359226,
0,
0,
58.0
]
]
},
[1] https://github.com/eweitz/ideogram/blob/master/scripts/python/create_annots.py#L131
The issue is that when using multiple ideograms, the band labels do not render properly. I suspect this is because the band label SVG
are all sharing the same CSS class: class="bandLabel bsbsl-<number>"
. You can see this in action, when the ideograms on the same row, take turns rendering improperly. I created a test case here for you to try: https://github.com/matthewchan15/ideo-test-case/tree/issue-labels-multi
Hello @eweitz and community,
I've been working on wrapping Ideogram, to be used with the Python framework Dash. The application you are seeing is written fully in Python, and supports the entire Ideogram API. I'd love to know what you guys think so far! As well, if you see any bugs please let me know!
Dash Ideogram: https://dash-gallery.plotly.host/dash-ideogram-test
I noticed an issue on rotation where the chromosome labels of the Ideogram over lap -> https://eweitz.github.io/ideogram/ploidy-basic
When rotating multiple Ploidy ideograms, there seems to be a glitch with displaying it. -> https://eweitz.github.io/ideogram/ploidy-rearrangements
I know you are using Ubuntu 14.04 with PhantomJS 1.9.7 and Node 0.12.7, but I'm using Windows 10 with the same PhantomJS version, and Node 2.15.5.
I have already installed the necessary packages, and followed the steps written in server.js, but after running the curl command-line in a different command prompt, I get an error.
command prompt window 1
C:\ideogram-js\examples\server> ..\node_modules\phantomjs\lib\phantom\phantomjs.exe server.js
Web server running on port 9494
ReferenceError: Can't find variable: Ideogram
phantomjs://webpage.evaluate():107
phantomjs://webpage.evaluate():151
phantomjs://webpage.evaluate():151
TypeError: 'null' is not an object (evaluating 'tmp[0]')
server.js:226
:/modules/webpage.js:281
_
command prompt window 2
C:\ideogram-js\examples\server> curl -X POST -d @ideo_config.json -H "Content-Type: application/json" localhost:9494
_
Did I miss any important step(s), or is it possibly incompatible with Windows 10? Hoping for your response soon, thank you!
Is there an option in the code to color arms of the chromosome?
Support dynamically adding annotations through a JavaScript API, to complement the current file-based approach.
The ideogram rotates and renders in a weird way on the rotation animation. This is evident in the sample examples as well, just click on a chromosome-> https://eweitz.github.io/ideogram/mouse
Would it be difficult to adapt the code to propose a display for homologous chromosomes for polyploid genomes ?
For instance, by adding a ploidy parameter in the conf file, having all chromosomes displayed. In the case of allopolyploids, it would be nice to be able to distinguish between genome groups (e.g. A, B).
Relatively small chromosomes get distorted upon rotation. Fix the distortion while preserving the animated transition between rotated states (e.g. between whole-genome and single-chromosome views).
For example, click chr21 in http://eweitz.github.io/ideogram/human.html and notice horizontal stretching. This affects at least the border stroke at telomeres and centromere, and the space between parallel lines in the hatching pattern in variable regions on the p arm. Compare that to the rotated view of chr1. The distortion in chr21 is caused by its much smaller size.
The distortion upon rotation gets acute in some cases:
Hi, I'm trying to show gene mark on chrom with brush function, but I find it shows a wrong region.
I set a anno region 17:43044294-43125482 and get the result in follonig picture:
The mark is selected but the region doesn't overlap 17:43044294-43125482
Here is my html code
<head>
<script src="https://unpkg.com/[email protected]/dist/js/ideogram.min.js"></script>
</head>
<body>
<div>
Selected region on human chromosome 19:
<div><span id="from"></span>-<span id="to"></span>
(extent: <span id="extent"></span> base pairs)
</div>
</div>
<div class="ideograms-here">
<!-- The ideogram goes here. -->
</div>
<script>
function writeSelectedRange() {
var r = ideogram.selectedRegion,
from = r.from.toLocaleString(), // Adds thousands-separator
to = r.to.toLocaleString(),
extent = r.extent.toLocaleString();
document.getElementById("from").innerHTML = from;
document.getElementById("to").innerHTML = to;
document.getElementById("extent").innerHTML = extent
}
var ideogram = new Ideogram({
container: ".ideograms-here",
organism: 'human',
assembly: 'GRCh37',
annotationsLayout: 'histogram',
chromosomes: ['17'],
rotatable: false,
brush: true,
onBrushMove: writeSelectedRange,
onLoad: writeSelectedRange,
orientation: "horizontal",
showBandLabels: true, // only work in horizontal mode
annotations: [{
name: 'BRCA1',
chr: '17',
start: 43044294,
stop: 43125482
}]
});
</script>
</body>
Thanks!
Is it possible to use this library with a custom generated genome?
(I found your project yesterday, and it's quite cool!)
The parsing code in processAnnotData looks like it's stashing the reported chromosome contained in the input rawAnnots, however whatever is making use of the resulting data seems to ignore the chromosome name and just assume the annots entries are present for every chromosome in order.
For example, with the following my-test.json annotation data:
{"keys":["chr","start","length","color"],
"annots":[
{"chr":"20","annots":[["20",30954171,5816,"rgba(255, 0, 0, 0.65)"]]},
{"chr":"foo", "annots": []},
{"chr":"X","annots":[["X",47422351,6720,"rgba(0, 0, 255, 0.65)"]]}
]
}
And with the following configuration:
var config = {
organism: "human",
assembly: "GRCh37",
orientation: "vertical",
chrMargin: 5,
chrHeight: 200,
annotationTracks: undefined,
annotationsPath: "my-test.json",
annotationsLayout: "overlay",
dataDir: "ideogram/data/bands/native/",
};
var ideogram = new Ideogram(config);
The annotation for chromosome 20 is displayed on chromosome 1, and the annotation for chromosome X is displayed on chromosome 3. I would expect that these annotations should be displayed on the correct chromosomes. I'm not sure exactly where the problem lies.
(BTW, is there a way to display multiple ideograms in a single page? E.g. I have a set of chromosome data for several different individuals, and want to display them as separate ideograms on one page. Is it possible to add a small example to the existing examples?)
Hello! Thanks so much for this d3-based visualization software. Our group loves it. I downloaded the karyotype (Ensemble) and centromere (UCSC) information for Maize and process the karyotype file in the same way implemented in convert_band_data.py.
But I continue to get the following error message:
core.js:991 Uncaught Error: Base pair out of range. bp: 11588371304284; length of chr1: 301433382
at Ideogram.value (core.js:991)
at Ideogram.value (core.js:1316)
at n (core.js:2657)
at core.js:2671
Chromosome length is correctly calculated based the file I provided. Since core.js seems to be loaded from somewhere outside of my server, it is a little difficult to print messages to console to find how it comes up with this huge amount of base pair.
Hello, I am grateful to this library!
I would appreciate it if you would add a support for brush on multiple chromosomes since I would like to provide an interface to select the position from multiple chromosomes. My request is below.
chromosome: ['chr8', 'chr6', 'chr7']
.brush: "chr:start-stop"
.And following functions is not a so high priority but convenient for me.
Thank you,
Enhance Ideogram so that it displays centromeres for eukaryotic chromosomes.
Pericentromeric bands are already available for human and mouse. This feature requires retrieving data for centromere gaps in genome assemblies for all eukaryotes that have such data, and rendering those centromeres.
Hi
Your ideogram visualization looks very neat. I am looking into visualizations for genetic genealogy purposes. For that reason it would be very useful to color segments from multiple persons, for instance for similar regions:
https://famresearch.files.wordpress.com/2016/02/familytreedna-3-close-relatives-cf-to-kf.jpg?w=455
If multiple people match each other and share a segment of DNA on the same location (after checking that it is on the same side) they could have a common ancestor.
Best
EJ Blom
Fetching remote band data fails in Ideogram.js 1.1.0 using the default CDN, unpkg.com, because the CDN strips query string parameters. This bug does not manifest locally or in unit tests, but breaks the examples hosted externally on GitHub Pages.
The cause was an updated approach of getting cytogenetic band data in version 1.1.0. That version used query string parameters to associate a taxid (NCBI Taxonomy ID) between a request object and its corresponding response. The association had previously been made by adding a simple property to the d3 request object. That was no longer possible when Ideogram shifted from using the deprecated d3 request module to the standard fetch API, making query strings an appealing (but evidently brittle) solution.
This bug warrants a patch release, v1.1.1.
Hi Eric,
I have initialized an R htmlwidget package for ideogram. [https://github.com/wangtulao/ideogRam], and so far I'm able to reproduce some simple examples.
But the main issue in the current R package is that, the R generated html file or js lib, cannot automatically find/load the "data/" folder, e.g. importing band, then, as a temp fix, I have to manually copy "data/" to the corresponding dataDir location (such as the ones in my example folder). For the same reason, the current R package cannot work in Shiny (since I cannot cp data/ folder to the shiny's runtime environment).
Another issue is due to my lack of JS knowledge, currently the onLoad or call back feature is not available yet. Maybe you can have some quick ideas or suggestions for the above issues.
Thanks!
Freeman
A declarative, efficient, and flexible JavaScript library for building user interfaces.
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
An Open Source Machine Learning Framework for Everyone
The Web framework for perfectionists with deadlines.
A PHP framework for web artisans
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
Some thing interesting about web. New door for the world.
A server is a program made to process requests and deliver data to clients.
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
Some thing interesting about visualization, use data art
Some thing interesting about game, make everyone happy.
We are working to build community through open source technology. NB: members must have two-factor auth.
Open source projects and samples from Microsoft.
Google ❤️ Open Source for everyone.
Alibaba Open Source for everyone
Data-Driven Documents codes.
China tencent open source team.