Is there any link which points to an chart/graph/map example using D3JS with World geoJSON data and highlights some of the location based on certain data with lat/lng?
For example, the world map should be rendered using world-geo.json and then adding/highlighting few countries based on another dataset web-user-statistics.json
Thanks
Thangaraju R
Here is an example that in addition to showing a world map allows to select particular countries which will be highlighted and zoomed into. This example doesn't show a map of the entire globe, but is probably closer to what you're looking for as it shows data for each country (both by colour and on mouse over). It also uses two different JSON files for the different data.
Related
I have an app that displays a world map using amCharts 4, in which each continent is to be colored differently and then there are some bubbles places in certain countries to show some data.
For the map, I have an object that lists all countries by the country code key. Then I have an API that returns the data regarding which countries have some values associated with them that should be displayed on the map.
For the purpose of having differently colored continents ( with country borders ) I created a different series for each continent and colored it accordingly. However due to the data structure, this wouldn't let me place the bubbles, so I have another series, beneath all the colored ones, of a full world map.
For the bubbles to be places, I've followed an example from the demos, and calculate the visual center for each country.
My problem is that this has become very resource-intensive, to the point where sometimes, randomly, the map fails to build properly resulting in all the bubbles being places on the top left corner. I was wondering if there are any ways to improve this performance, namely:
- An easier way to calculate the visual center, or get the coordinates for such.
- Some way to color each continent without having to rely on a separate series
If you don't need country borders, I recommend the following steps:
1) Create a map with countries and calculateVisualCenter = true set on country series.
2) When map is build, loop through all polygons and save visualLongitude/visualLatitude of each into some object, output the result in console.
3) Use the coordinates in your actual map for bubble positions.
Here is a quick demo where the coordinates are saved and logged to console:
https://codepen.io/team/amcharts/pen/bGdQXzE
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
When searching for a Province in Google Maps, it outlines the map and adds a icon on the Province.
How would you get that from google without having to draw it point by point ? Im sure it's available if its showing on their maps.
Here is an example:
Western Cape, South Africa
I do not think it is directly available through the API beyond what you can achieve with the styling wizard
To implement it yourself you'd need to find a shapefile for the areas of interest, store it in a spatially enabled database, (like PostgreSQL/PostGIS), and then load the relevant polygons, which you can style freely. Alternatively you can create a custom tile layer, like this, (check the "density" box), or you may be able to load it using fusion tables, (not an entirely simple process).
See this similar question (doing the same thing for countries)
The answer can be applied to a province rather than a country.
Here is the closest I could come to that styling.
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.
I have map with 30-50 polygons on it. There are like 4000 points in every polygon but they are hidden at beginning. I want to disply the point only when zoom is <=6 but not all of the point but only ones related to the currently displayed polygon(s). So I need to get the polygons in view (displayed in this moment on the screen).
Do you know how to get the polys in view ?
ps.Im working with javascript
Wont be quick if you have complex or lots of polygons but works (assumes v7 api):
https://gist.github.com/1704172