I'm following along Mike Bostock's example for creating a geoJSON projection by downloading and converting shapefiles to geoJSON. I've downloaded the files correctly, and they're online here:
https://bl.ocks.org/KingOfCramers/2c5ceb2e7526a8370d6926958654cf21
This works fine (obviously in the future I'll simplify the shape file to get it to run faster on a browser). Right now, I want to be able to replicate this process quickly for other shapefiles. I've downloaded many from Natural Earth and have converted them successfully into JSON files for use in geoJSON and topoJSON, but I am unsure how to determine which projection to use on them.
Is there a way to quickly examine a .shp file (or after it's been converted JSON) to determine which D3 projection to use, which "translate" values to use, and any other presets for my projection? Or, if I'm going to use geoproject prior to even mapping the file, how I do I find the values to plug in? Here's Mike Bostock's example:
geoproject 'd3.geoConicEqualArea().parallels([34, 40.5]).rotate([120, 0]).fitSize([960, 960], d)' < ca.json > ca-albers.json
How does he know the rotate value? How does he know which parameters to feed into this function?
For an un-finished example, here's my bl.ock of the current earth, but the projection breaks the JSON, because obviously my projection settings are not right:
http://blockbuilder.org/KingOfCramers/16be1bf014683572086511c6a8bd7470
-- or --
https://bl.ocks.org/KingOfCramers/16be1bf014683572086511c6a8bd7470
I can drop this JSON file into mapshaper, which projects it quickly and flawlessly. I want to be able to do this in D3, or at the very least convert the file before mapping it. I'm assuming that information is stored somewhere in the JSON file? Or can be accessed somehow using the JSON projection converter that Mike Bostock recommends, geoproject? Thanks for any help you can provide!
Key Issue
D3 assumes the file to be projected requires projection - that is to say, it assumes the file has not already been projected. This applies if pre-projecting your files from the command lie so that you can display them without a d3 projection. If using projected features, you will not get the results you want - you must unproject your features first.
If using a standard d3 projection such as d3.geoAlbers, data must be unprojected and contain latitude longitude pairs.
Unprojected vs Projected
Unprojected features are those which have latitude and longitude coordinates, they are points located on a three dimensional globe. To display these we need a projection function (most simply: lat = y, long = x, a plate carree projection).
Projected features are those which have Cartesian x,y coordinates. They are the product of some projection function which as a consequence introduces distortion of some or all of: shape, area, distance, or direction.
Signs of Using Projected Data
Upside Down Features
Upside down features are an easy indicator that your features are already projected. Projected geographic data generally features and origin at the bottom left of the features, as one moves north, y values increase. SVG coordinate space is the opposite, as one moves south y values increase.
When displaying your data in mapshaper if you include a shapefiles .prj file, mapshaper will project your data according to this. This will ensure that north is true. When displaying this data with d3, there is no flip on the y axis unless you bake that into the projection function.
Projection File
Secondly, the prj file that comes with every shapefile (or the vast majority) will tell you if features are projected or not. If your prj file lists anything like Albers, Conic, etc, then you have projected data. You need to have your data "projected" using the WGS84 datum or unprojected (also using WGS84). Data using this coordinate space has the EPSG number of 4326, and the prj file should look something like:
GEOGCS["GCS_WGS_1984",DATUM["D_WGS_1984",SPHEROID["WGS_1984",6378137,298.257223563]],PRIMEM["Greenwich",0],UNIT["Degree",0.017453292519943295]]
Coordinate Domain
Lastly, if in mapshaper (or any other GIS utility that handles geojson) you were to export the data as geojson, if you see coordinates in excess of [+/-180,+/-90] you are probably dealing with projected data, which often uses a unit of measure like meters.
If you include a file and a projection function I can provide some more specific signs rather than these generalizations.
Easy Solution
If you don't want to modify the projection the data came in, you can use an identity projection:
d3.geoIdentity().reflectY(true).fitSize([w, h], geojson)
This will not modify the input projection, essentially it is only scaling and flipping the input features to match your intended svg/canvas dimensions.
The downside is you can't take features that are already projected as an Albers Equal Area and convert it straight into a Azimuthal Equidistant projection. Also, this approach may make it difficult to overlay locations with geographic coordinates on top of your pre-projected features - for that you will need to re-create the projection the features originally came in.
The upside is the simplicity, it is fine for choropleths or visualizations where nothing geographic is overlain on the projected features.
More Flexible Solution
Unproject your data first, in mapshaper you can do this, assuming you imported the prj files by using the console window and typing:
proj wgs84
Now you can reproject or preproject for d3. Other tools exist for the command line, while programs like QGIS can help convert data quickly too.
The advantage to this is that you can easily re-apply the projection you used on the command line to any points you want to overlay on top, and of course you can modify the projection easily.
What Project Parameters To Choose
If following the 2nd approach or overlaying geographic coordinates on top of features displayed using the 1st approach, the question of what projection parameters to choose becomes relevant again.
The projection parameters chosen are chosen very specifically and often taken straight from standard projections. The .prj file of a shapefile contains everything you need to re-create the projection used in the shapefile. This answer goes into how to emulate a prj file with a d3 projection.
SpatialReference.org is a great reference for finding parameters to different projections. There is a good chance that the California Albers example was based on a standard projection that you can find on this site, probably this one. Of course though, when Mike Bostock used this projection, he applied it to unprojected data.
I have a list of 1000 locations in a certain city. The location information is available in the form of a csv file in the form:(Name, latitude, longitude). I need to plot the same on a map of the city.
I have started learning d3 for the past two days using this excellent guide.I'm not sure if D3 is the right tool to create the visualization. I started using this because later I would like to create few dynamic visualization using the location -like when a user clicks on a certain location and I would highlight other locations that are within a distance of 'X' Miles, draw a line between two different locations, etc.. Is D3, the right tool to achieve this ? And I would like some recommendation on what(new tools, library etc...) I should ramp up for the same. Thanks SO!
I have been using D3 for a while, but just for doing simple graphics (lineCharts, barCharts).
In order to use the information, I will recommend you to use JSON format to store the CSV data in an object.
I have found this example on the web, by the creator of D3: http://bost.ocks.org/mike/map/
Hope it help you a little, it will be nice if you put some fiddle when the work is done
I would like to display the map of the USA with state outlines in a web page. I also want to have predefined zones or parts of the map and have each part in a certain color. The parts do not change per request which means these parts could be defined by a single time process and what changes per request is just the solid color.
I am looking for an ASP.NET or Javascript Library or tool whcih produces such a map. The map can be a static image or interactive based on HTML5. Flash would be my last resort. The library should have an easy way to define the parts (polygons?). I am envisioning a desktop tool where I can trace over the map by hand to0 define the p0arts and the tool would create the data points to be used later in the drawn map.
D3 has been used to do these kinds of tasks pretty well:
http://d3js.org/
http://bl.ocks.org/mbostock/2206590
Inkscape is a desktop tool which can be used to load a map static image and to draw freehand polygons on the map for the regions. The final output (image + polygons) can be output to a single svg file which can be displayed in a web page.
I also used svg2vml to support IE8-.
I have a written up HTML file using the Google Maps API v3.
All I want to do is color a couple of countries, for example, color in China and Canada to red. What is a simple solution (that doesn't involve Polygons and thousands of coordinates) to color in countries?
After browsing previous StackOverFlow questions, there seemed to be three common solutions. However these 3 solutions do not seem appropriate for my situation.
Charts API
-I don't really understand if Charts API is a good solution for me because I have already have a file using Google Maps API. Unless Charts can be applied over my map, or synchronize with the map, this does not seem to be a valid solution.
Styling (With Styling Wizard)
-This wizard (as far as I know) deals with the style of general characteristics, like road, water, population, etc. Unless someone can show me how to assign a specific country a color, I do not see how this can work.
Polygons
-I saw the example of the Bermuta triangle and other people have suggested to get the coordinates of the perimeter of a country and create a polygon. This may work except I may need a thousands of coordinates in order to fully outline China. Perhaps there is a more simple method in which I can color in a country?
Use either FusionTablesLayer or KmlLayer.
Both take kml formated geographical data and render it on tiles, yielding better performance with complex or large numbers of polygons.
The Natural Earth data set is available in Fusion Tables, and contains most countries.
This might work for you if coordinates generated automatically in different resolutions depending on your requirements. all you need to do is to load an appropriate GeoJSON onto your map. See here for the complete answer which is done just by adding a couple of line of codes.
I have data corresponding to user events with (location, time). I would like to visualize these on an animated map. Maybe with points of light appearing when an event happens (with multiple events in the same place making a brighter dot). Double points for animating the day/night regions on the map at the same time. Is there a javascript library good for visualizing such data?
The map on the right side of this visualization written in processing doesn't quite fit my description, but would also work well.
I found that d3.js worked really well for the project. The geo module made it easy to draw a world map (with data from data/world-countries.json and a mercator projection) in an svg element. First, I pre-processed the data to put the users in "buckets" of gps locations. I added a circle for every location, and changed its radius for how many users were in that bucket.