I am trying to create a country-wise revenue split up report, I am planning to visualize it with d3.
The drill down would be like region and then countries. I thought it would be cool to visualize it with a map. Are there any examples or 'how to' blogs out there?
You probably want to look at TopoJSON which is from Mike Bostock (same guy as D3).
There are a number of examples but I recommend you start first looking at Let's make a map which includes using it with D3. Whilst it is not US states it will get you started on the concepts you will need to use it.
Once you have got the basics you can then look at some of the more advanced examples listed in the gallery.
Related
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.
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'm building a Google Visualization DataTable. You can see it here:
http://jsfiddle.net/MmyKU/4/
I've built out my United States color coding, but I need to add plots of about 8 US Cities on top of the color coding. I can't find any documentation or other examples online that specifies if/how this is possible. I've taken a few stabs at it with no results.
I'm just trying to:
1) Verify if it's possible?
2) Find a working example or have some help adding a second table to a single drawVisualization instance!
Thanks!
https://developers.google.com/chart/interactive/docs/gallery/geochart#Configuration_Options
add to your options
displayMode: 'markers',
Regions and Markers wont work at the same time.
SO if you want to color the background of the states, using markers mode, you can do it with CSS.
I'm documenting some examples for a Wordpress plugin i developed here:
http://cmoreira.net/interactive-world-maps-demo/advanced-customization/
Check the last example. It's not easy, since you have to find which child path number you want to color, and then you can do it. Example:
#visualization path:nth-child(5) {
fill:#cccccc;
}
Here's a forked example, of your code with the CSS above:
http://jsfiddle.net/cmoreira/Jqkjg/
Hope it helps!
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.