I work on a d3js project and I saw some tutorial with append("g") and other with append("svg:g") without getting the difference between both.
In the very early days of D3 you were required to use the svg:g syntax because of the way SVG elements are appended to the DOM. Later versions of D3 don't require these "hints" to insert SVG elements, so the proper way to do this now would be with a simple g.
The technical details behind this are rather dull, SVG requires a namespace, so when you insert or manipulate SVG elements you use document.createElementNS('a', "http://www.w3.org/2000/svg) white plain HTML uses document.createElement('a'). Since D3 can manipulate both SVG and HTML d3.append('svg:a') was a way of saying this is an SVG anchor.
I got an answer on d3js API, its a namespace question. In svg:g, svg is the namespace (optional).
My fault, sorry i must better read API
Related
I'd like to visualize a geojson file in the EPSG:4326 coordinate reference system using D3.js version 3. I'm aware it's better to use the newest version, but alas I'm restricted because of old software that doesn't support higher versions.
I wrote this code: https://bl.ocks.org/FrieseWoudloper/141945ce346639013ac1ced8e4c071b7
In the resulting output there is an SVG element with paths, but I don't see it. I think I have the translate and scale arguments wrong, but I don't know how to determine the right values. Could you please give me any directions on how to fix this?
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 have SVG files created elsewhere (using MS Visio) which I would like to use as background for a visualization, where some positioning is driven by the placement of items in the SVG graphic. Ideally, I would be able to manipulate the imported SVG data directly, and then use it to create elements in the calling document using D3.
Is there a simple way to import an existing SVG document into a data structure using D3, similarly to the way that JSON can be imported? I've tried d3.xml, but don't seem to get a useful data structure. Importing the graphic with an IMG tag doesn't populate the DOM with SVG elements as far as I can see.
One small complication: it must also work in IE9! (ImportNode doesn't work)
Thanks for the ideas. I found out what to do in the end. It is possible to import the SVG file using a d3.xml call. The parsing is done, but the complication is how to understand the DOM structure which is produced. IE9 seems to have a problem with placing the imported node, but I don't need that behaviour as I only want to use aspects of the incoming SVG, and will be regenerating SVG using D3
I'm trying to convert a SVG to PNG which has a flowroot element in it. Inkscape does it fine, when I convert using Cairo or imagemagick the flowroot elements appear as an opaque box rather than rendering the text within it.
I'm thinking this is because flowroots are a part of SVG 1.2. Does anyone know of any other gems/libraries that might help?
Why not just export it to PNG from inkscape then?
You'll find that flowRoot isn't supported anywhere except inkscape. It's defined in an old working draft of SVG 1.2 Full, and if you look at the last published SVG 1.2 Full working draft you'll find this:
Notable changes to the feature set that readers can expect to see in
the next draft include:
Replacement of the previous flowing text proposal with a superset of the SVG 1.2 Tiny textArea feature.
That said, the SVG WG is working on SVG2 instead, so you should probably look there if you want to know where things are headed.
Have you tried to install libRSVG?
This post says:
textPath is not implemented in the built-in SVG converter of IM. However if available IM will use the libRSVG library to do SVG conversion, and this does get it right.
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.