Mapping the latitude longitude co-ordinates on Map - javascript

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

Related

how can I highlight/select different regions on google map?

I was trying to mark regions on google map for a city (for a small utility webapp, that I am writing). However, when I looked up areas by their name, I noticed something new. There is an outline around the areas. Like this(if you search for: "Koregaon Park, Pune, Maharashtra"):
Is there a way I can extract all these regions for a given city (in this case, Pune, India) ?
Can I add my own regions or edit regions as per my needs ?
In the end, I'd like the user to be able to select multiple regions and I'd like to collect that info, in an array or some other data structure ?
Can someone point me in the right direction on how to do this ?
PS: This is limited to a city for now, and the number of regions that I'm targeting are small in number(say around 10. This number will grow if my experiment proves out to be efficient).
Please dont downvote this. If you need me to provide more info, please do let me know.
You are asking how to display polygons for your cities on a Google Maps API map.
There are at least 3 ways to do that, but for all those you need the coordinates of the polygon.
KmlLayer - need the data as publicly available KML
FusionTablesLayer - if you have the data as KML you can import it into a FusionTable, if it is a .shp file you can use shpescape.com to import it into FusionTables
You can display the polygons as native Google Maps API v3 polygons
There is publicly available KML data in the Natural Earth Data set (which is available in FusionTables) and at http://www.gadm.org/

creating choropleth map of Arizona with counties and an excel file of data about the counties

I am fairly new to data visualization using javascript and its various libraries and plugins. I am trying to create an interactive state map of Arizone with all its counties, I have data pertaining to schools within these counties that I would be exploring or presenting through the map.
Right now I am just going in circles as to which plugin or tool I should be using I have checked out Polymaps, jqvmaps, jvectorMaps. It would be great help if someone who has done something similar could throw in suggestions.
Also if some one can shed some light on using the google maps api, and what would be the learning curve to getting started.
Thanks
I intend to do something similar for all the counties in US and so I have collected some information that might be of use to you. Here's the overall approach.
Collect the data like list of counties each with it's FIPS id, display name and svg map. This information is in public domain. Like the blank SVG map of Arizona shown below.
Store all this data by county id in a database like MySQL or whatever you fancy. Add the data pertaining to schools. Now you can export the subset of data to a csv file for Analysis. I prefer using R. Once you have your map and data ready, proceed to the next step.
You can overlay this data on the map using Raphael as shown in this article
or
Use this open source JQuery plugin and customize it to create your own clickable heatmap.
Let me know how you progress and we can bounce some ideas.
EDIT: Here's another nice article how to make a Choropleth using free tools. This look slike the best approach to make what you are going after. It uses Python so it should be neat and clean.

Library for visualizing users on map over time

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.

Heat map in python

I have three variables that I need to plot for sales transactions, timestamp (of the sale), price, and zip_code. Is there a python or javascript library where I could plot a heat map with these variables? Perhaps something similar to HighCharts, but with geographical plotting.
Heatmap.js is a great clientside library for it.
Example with Google Maps
Example with Open Layers
Matplotlib is a great Python plotting library. It has geographical plotting abilities using the basemap toolkit. However, I don't think it has information on zip code boundaries, so you would have to get ZIP code shapefiles from somewhere. Googling suggests they may be available from the US Census website.
I'm not aware of any Python plotting toolkit that supports ZIP code-based mapping out of the box. What matplotlib with basemap allows you to do is plot ordinary markers (dots, shapes, etc.) onto a map. It would be easy, for instance, to plot a map with colored dots (with colors "heatmapped" corresponding to transaction price, say) across a map of the USA. It seems like the hard part of what you want is getting map data that includes information about ZIP code boundaries. I'm pretty sure you could get matplotlib to work, but it could take some setup work to get that ZIP code information hooked up in the right way.
I would do it like this:
First, download the US Census Bureau shapefile
Second, plot the shapes in matplotlib
Here is a gist on how to download zip code shapefiles and how to use the files to draw a map. It also shows you how to vary the color of individual zipcodes.
You would scale the datapoints you're looking for, then either use the grayscale percentages or RGB tuple to vary the color by zip code.

Highlighting custom locations on map

I would like to do something like what is shown in the screenshot - http://themanyfacesof.com/wp-content/uploads/2010/03/map.png
I want to be able to highlight certain areas on a map using PHP as a server side technology and jQuery(preferable) on client side with some tooltip functionality. Is there anything available or any idea how this could be achieved with the complexity involved?
Completely client-side solution: http://jvectormap.owl-hollow.net/
Look into using Google Maps for this. You can overlay lines and polygons which effectively means you can do anything - for example Loughbrough University does this.
A good way to start is to
Log in to Google
Go to Google Maps, then to my maps and create a new map
Draw polygons and line using the tools provided
Right click and copy the link for Google Earth, visit this link but change the output to KML output=kml. KML is just like XML
You now have a file with the exported polygons and lines that you drew. You can then re-draw these onto a Google Map programmatically
I did this the other day to get some rather complex polygons drawn onto a map without having to trial and error the latitude and longitude coordinates for them.
Hope that helps.

Categories

Resources