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.
Related
Good day! For some reason I want to get the current range of data not the whole data of the plot. Is that possible?
I tried using this PlotID.data but I'm getting the whole data not the current data that shows in the screen.
Requirement:
I have to read dxf files entities which can be 2D building dimensions or road etc. Then i have to place it over the map and return the coordinates just like labs.mapbox.com export the coordinates as geojson like the data below export by labs.mapbox.
Approch: For now i'm using python 'exdxf' package to read dxf file which return me entities information e.g in case of line it would be start/end points. Then i was thinking to draw those entities over a canvas (not sure) then place it over mapbox and get the coordinates where canvas is place export geojson of it is the final goal.
Required help in: Suggest me the right way to achieve this solution, i am open to choose any framework / language.
Thanks for your time
If you've got a dxf file and want to export it as a geosjon file, using ezdxf python package is good but you have to do a lot of processing the dxf entities and stuff and it takes time to achieve what you want.
I suggest using ogr2ogr since this is a time saving approach. it is a library for working with geospatial data and you can convert data to different formats such as Geojson, shapefile and others.
you can easily convert your dxf file to a geojson file with :
ogr2ogr -f Geojson GEOJSON_FILE_NAME YOUR_DXF_FILE_NAME
I suggest reading the documentation
first to get to know about this library and all the options it gives you for processing the data.
I have a map with an older topojson format that once worked with Vega-Lite. Now we only see a purple square in this editor gist.
I've rebuilt the map with the same code but updated topojson in the vega editor and saved as a gist here.
With the new vega release, it seems like I need my topojson files to be formatted differently, with the arcs first, like the mapshaper.org export output. Why is this? It's broken several existing web maps, and took me a few hours to figure out. Seems like I can fix it with a workflow change, but I am curious.
Topojson data follows the left-hand rule for projected data (clockwise orientation for outer rings and counter- clockwise for interior rings), where the data in your topojson file is structured according the right-hand rule (counter-clockwise for outer rings and clockwise for interior rings). The order of your polygons seems negligible, but it defines which part is ‘inside’ and ‘outside’ the polgygons.
You can do two things:
Do not use a geographic projection, but the cartesian-like identity projection.
Force your source data into the right order.
Example for 1:
"projection": {"type": "identity", "reflectY": true},
see Vega Editor
Example for 2:
Use MapShaper or Python to force your data in the right order. Here an example using Python
import topojson as tp
import geopandas as gpd
gdf = gpd.read_file('https://raw.githubusercontent.com/nycehs/NeighborhoodReports/master/visualizations/json/UHF42.topo_old.json')
tp.Topology(gdf).to_json('UHF42.topo_new.json')
see Vega Editor
I wrote a bit about it before for Altair and Python Topojson
https://mattijn.github.io/topojson/example/settings-tuning.html#winding_order
https://altair-viz.github.io/user_guide/data.html#winding-order
And Mike Bostock for D3
https://bl.ocks.org/mbostock/a7bdfeb041e850799a8d3dce4d8c50c8
So I need to create the map of my country from the coordinates I have so that I can plot some xyz data on it.
I was able to plot the map with the help of Mike Bostock tut http://bost.ocks.org/mike/map/
But when I went through the .json file, the coordinates mentioned are totally different from the coordinates I have. Like Patna(India) has [5812,6567] as coordinates in the json file while actual coordinates are [25,85].
Could anybody guide me how can I use the coordinates with me to plot the map and then display some data on it??
EDIT:
With the help from #user1614080, I was able to understand how coordinates are converted into screen coordinates.
The issue I have is: I want the map of India in a certain way. For that purpose, I would like to use the list of latitude & longitude I have. But I dont know how to convert these lat-longs into topojson/geojson format.
For the time being I did a simple line plot with the lat-long I had. Some of the values from the coordinates.csv I used for the line plot are:
Longitude,Latitude
88.75,21.58
88.33,21.50
88.17,22.08
88.00,21.75
87.58,21.58
87.08,21.42
But I would like to use topojson/geojson for the same. how can I convert the data from "coordinates.csv" into json?
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.