i'm just newbie in data visualization, but i must try to visualize for some data
i find the combo-multi-axes with highchart.js (http://www.highcharts.com/demo/combo-multi-axes), it's look perfect to me, but i want make it using d3.js, and i try search referrence for how d3.js can build it, but stil not found
How d3.js can build same like http://www.highcharts.com/demo/combo-multi-axes ?
Related
I am a newbie in Elastic Stack and i am trying the following and i am struck.
I want to render a line chart on the bar chart on same graph. I have been browsing for long time now but could not find any link for this.
In Kibana 5.2, is it possible to create a line chart on bar chart on same graph ? Can someone who has done it in the past confirm if it is feasible ?
if yes, can you share any pointers.
If you want to mix bars and lines it's possible via the Timelion plugin (which is included in Kibana since version 5). Put something like this in the Timelion tab:
.es(*).bars(),.es(*).lines()
And you should be able to see something like:
Now it's just a matter of doing the query you want to plot.
For understanding it in detail, on Timelion tab, on top right corner, you will see a tab - Docs. Once you click on Docs, you will get a link - Go to Tutorial.
Try the link and it walks you through the steps.
How do I create a building/school Map which I can zoom and get context information for each classroom using D3.
I have read examples of how to create Zoomable Geo Maps http://bl.ocks.org/mbostock/2206590 , but in the code, it uses the TopoJSON (or GeoJSON) format of the US states.
How do I get the GeoJSON file for a school building?
Thanks,
Raj.
Hard core geojson
There are online geojson editors, such geojson.io. You can find your building, map it, add properties such rooms name, then save it as geojson or as topojson file.
Note that geojson.io doesn't allow an infinite zoom, so your drawing may be quite approximative.
In your D3js code, you will have to autofocus on your json data (shape). A convenient working example is explain in the 2nd half of this answer, the D3js call and Focus sections.
Witty SVG
Designing your building as an SVG / XML file using Inkscape or some other vector editor would be a bit longer to do, but will end up into better end results. You then use d3.xml(http://yourwebsite.org/file.xml, function(data){ ... }). I have, unfortunately, too few expertise in this direction, but it's the way I would go for if quality is requested at that level.
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.
http://www.evolutionoftheweb.com/
Question is:
What type of chart plugin they used in JavaScript like jqplot, float plugin?
If not, then how did they make it? is it just image or canvas?
If you look at the page source you will find that all the logic is in the /js/all.js file. If you search this you can find things like: jquery, d3, and other libraries. It seems that majority of work is done with d3.
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.