I would like to display on a webpage a heatmap (matrix) that I generate in R.
The matrix I have looks like this, but in my case the size is 300x300.
Basically I am looking for an interactive clustering, which would look like this :
http://online.wsj.com/article/SB125993225142676615.html#articleTabs%3Dinteractive
http://mbostock.github.com/protovis/ex/matrix.html
I would like to be able to clic on a branch which would then highlight the selected group/text, and fade out the rest of the matrix.
I have had a look around and cannot find much. I don't even know what language I should use for this ? JSON, Flash, HTML5, javascript, google charts ?
Any comments and advices would be extremely appreciated here.
Thanks.
I think that InCHlib - Interactive Cluster Heatmap library could be the solution.
Available from http://openscreen.cz/software/inchlib.
Google Visualization provides this heatmap option:
http://informatics.systemsbiology.net/visualizations/heatmap/bioheatmap.html
There's also this project that adapted it for more advanced uses and actually includes mouse-overs and tool-tips, as well as line magnification:
http://code.google.com/p/visquick/
You may also want to take a look at jQuery Flot, but be warned that WSJ uses a super expensive company called Tableau for data visualization and you are unlikely to find that level of visualization eye candy in an open source or free to use package.
Unfortunately, I had the same requirement. To create a Clustergram (Heatmap + Dendrogram) for a hierarchical clustering results.
There is no direct solution for this. I used ProtovisGWT (Choosel) to create dendrogram and heatmap seperatley and later combnied them.
If you just want js library you can use just protovis or d3.js to achieve this.
I would recommend using JavaScript for this task. Save your heatmap as SVG in R
svg("mymap.svg")
heatmap(...)
dev.off()
And then embed it into an HTML document as object
<object id="test-svg" width="800" height="600"
type="image/svg+xml" data="test.svg"></object>
Now, you can use JavaScript or ECMAScript to do all kinds of manipulations. I recommend to read one of the various online tutorials on this topic. E.g., you could get started with this one: http://www.petercollingridge.co.uk/data-visualisation/using-javascript-control-svg
Treemap of D3.js solves this beautifully. See here
http://mbostock.github.io/d3/talk/20111018/treemap.html
You could try http://amp.pharm.mssm.edu/clustergrammer/ . It is not written in R, but you can make an interactive clustergram by uploading a matrix file in tab-separated format and you will be returned an interactive (reorderable, searchable, filterable, etc) and shareable web-based visualization
D3heatmap provides interactive heatmaps with dendrograms in R based on the heatmap and heatmap.2 interfaces. It includes single row and column selection but does not currently allow selection of dendrogram branches.
Related
I have about 500 XY points which I would like represent as line using DHTMLXChart. Apparently the only suitable chart (scatter) do not allowing to do it. Any idea how to solve this issue?
There is no native way to do this.
You could use line chart with markers:
Example
Ok on that confirmation you're not bound to a DHTMLX, I would go with Google Charts it's based on opinion, but more importantly on functionality.
The Google Charts API is very easy to work with as it takes raw Javascript data and applies it to the chart and that data may be shoved into multidimensional arrays or as I prefer, JSON Data.
Additionally the Google Charts API has what you are after which is located at https://google-developers.appspot.com/chart/interactive/docs/gallery/linechart or alternatively...
https://developers.google.com/chart/interactive/docs/gallery/scatterchart
P.S. It may be a hefty documentation to read, but learning Google Charts API pays dividends and this would Replace DHTMLX instead of being an additional plugin.
Hope that helps.
I don't know javascript (unfortunately) and I'd like to make a mindmap-like "organization chart" similar to this one:
This map should have an ability to zoom-in and zoom-out similar to google maps, and the ability to arbitrarily connect nodes. So it is more like a free graph, not like an ordinal tree. Mindomo makes this pretty well, but it is commercial and flash-oriented.
Does anybody know of a similar solution?
My research pointed me out that this could be a svg sketch, possibly generated offline, or maybe something using canvas. A click on the node should redirect to some web location.
Google maps is good because it also hides some details, and so should do this graph map in zoomed out projection.
A few important questions:
Do you need this generated in real time based on some underlying dataset?
Aside from zooming, should the user be able to manually open/close nodes?
You can manually generate this simply using some free tools:
MindMeister
xmind
freemind
although non-traditional, can you consider using Prezi?
I would like to create a website that has a large image of a tree from a distance on. When you zoom in it shows more defined image of the branches and then zooming in further the words will display in the braches. You can scroll the image to see all the other words. So its like google maps but for my own image.
I have tried looking for examples etc but can only find ones of maps. I believe I have to make different tiles for the different levels.
Is there any examples or tutorials out there that could help me or is there a specific name for what I should be looking for.
The easiest way to do it is to use a tool called MapTiler.
It's free, and you just follow a really simple wizard that just hides all the complexity from the process.
Anyway, I've posted a tutorial exactly on this topic which you can check here.
I created a Java based version of a Google Map Tiler tool here:
https://github.com/devldevelopment/googlemaptiler
This will help you cut up images as per Map Tiler but is free. An example with Javascript is provided on the github readme.
Thanks
I have an image of a living room, which I'm turning into a menu for a new site I'm working on. The idea is that you can click on certain items in the room, like a chair, desk, couch, etc and get taken to the desired page. I'm wondering if there is a clever way of doing this. Since the items are not simple shapes, I don't want to use a standard image map.
Thanks for you help!
I'm answering because a Google search brought me here...
Because you asked for a tool:
GIMP Has a really good Image map creation function.
Open your image in GIMP and select Filters > Web > ImageMap
From there you can create image maps by drawing on the image. Saving will generate HTML you can then tailor to your needs.
This tool looks to be a solid image mapper: http://www.image-maps.com/
I'd suggest doing this with a canvas and SVG's, it would make this quite a bit easier, and more professional.
As Korvin mentioned, doing this in SVG is probably the easiest option, because you can attach events to objects in SVG rather than having to manually specify a particular area in which to listen for events.
If you go this route, I recommend using the RaphaelJS library which has a nice syntax and the advantage of working in IE pre version 9. Here's a demo which, although it uses onmouseover instead of onclick, it might be close to what you're trying to achieve:
http://raphaeljs.com/australia.html
I really like the Google Charts "gauge" graph. I would like to use it in a formatted HTML email however as email doesn't allow javascript I can't do this.
http://code.google.com/apis/chart/interactive/docs/gallery/gauge.html
Any ruby library or alternative approach available that would allow a "gauge" graph of similar high quality as the above-mentioned google one to be produced and used in a formatted html email?
Google Image Charts has a "gauge" graph.
http://code.google.com/apis/chart/image/docs/chart_wizard.html
It's not quite as slick as the javascript version, but it might do.
http://chart.apis.google.com/chart?chxl=0:|slow|faster|crazy&chxt=y&chs=300x150&cht=gm&chd=t:70&chl=Groovy
There's rchart.
There's gerbilcharts, but you might need to convert from SVG to an image depending on your needs.
There's gruff.