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?
Related
I'm sorry this is probably a very basic issue, but I just can't seem to figure it out.
I wanted to map some data using D3.js and the map shape I wanted to use is provided by the UK's Office for National Statistics. I managed to get their geojson data to display, but as soon as I try to do anything with scaling, transforms, topojson, I've been a complete failure.
I've been through many, many, different approaches and I think it's something about the map data that is causing the issue. If I open the shape files in Mapshaper it looks perfect. If I export as geo or topojson and re-import, it looks perfect. If I try to run geo2svg on the geojson export it produces a lot of data, but nothing visible. If I try to import the original shape file into mapstarter.com it produces a flat line. And if I put the topojson into the D3 v4 bounding example I end up with a load of random triangles.
So, can someone show me how do you get ONS mapping data such as http://geoportal.statistics.gov.uk/datasets/1bc1e6a77cdd4b3a9a0458b64af1ade4_3 to display in a d3 example such as https://bl.ocks.org/iamkevinv/0a24e9126cd2fa6b283c6f2d774b69a2?
Thanks
The data that you have linked to is projected. Mapshaper supports projected data, but using d3.geoProjection with projected data will result in no data being displayed in most situations. You need to ensure your data is in lat long pairs for proper display with a d3.geoProjection.
Luckily, in Mapshaper you can reproject your data. Copy all the files of the shapefile into mapshaper, and in the console change the projection to wgs84 (unprojecting your data):
proj wgs84
This data is now easily displayed and manipulated using a d3.geoProjection. Here is an example using the data that you referenced. Also a screenshot:
Lastly: It is possible to display projected data as well, but this is much less common.
Say I have a range – something like a 400x400 rectangle at 60, 60 – which is dynamically generated by a separate program. I'm wondering how it's possible to crop my document to that range in the command line?
Everything I've read has suggested I'd need to add a rectangle to the document, resize the document to that rectangle (resize to selection), and then remove the rectangle.
But I'm having trouble with adding and removing that rectangle. I found the ToolRect verb, but I can't seem to find anything related to actually drawing that rectangle (or removing it).
So, am I doing this wrong or is there just no way to add (and select) the rectangle using only the command line? Using another program is also fine, but I haven't had much luck with that (I couldn't get the python modules installed for the only possibly helpful thing I found..).
In this email discussion from 2012, someone said:
There is no way to pass parameters to verbs (with the current
implementation, they don't take parameters by design).
In case they add this capability later, the required verbs to crop the page would be:
EditSelectAll
SelectionGroup
ToolRect (requires parameters, i.e. where to crop)
EditSelectAll
ObjectSetClipPath
FitCanvasToDrawing
FileVacuum
FileSaveAs (requires a parameter, so that we don't have to overwrite the original)
Since Inkscape can edit any valid SVG, I'd rather look into other available SVG libraries, like this one for Python.
If you are OK with rasterising your image, take a look at this question. Inkscape unfortunately ignores the --export-area option when exporting to svg or pdf.
My – admittedly, unsatisfying – solution was to create a separate program to add a viewbox to the SVG text.
The program I made was implemented into a separate part of my project, so I don't have a good command line version, but if you plan on making one yourself, whatever XML editing library you have for your language of choice should be all you need. I used xmldom for Node.js with relative ease.
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'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.