search

markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Help with D3.js maps #44

Closed mcangial0821 closed 10 years ago

mcangial0821 commented 10 years ago

I am new to the D3 mapping. I am trying to figure out how to set up a map for New York State and then show data either by county of congressional district.

markmarkoh commented 10 years ago

@mcangial0821 this is possible with custom map data. Since you are new to D3 mapping, I went ahead and created the custom map file for you, here is a working example.

To create this, I downloaded a .SHP file of the US with counties, converted it to GeoJSON and then TopoJSON. You can read more about how that works here

mcangial0821 commented 10 years ago

Mark,

Thanks. Although I have seen a lot of information out there for D3 mapping, is there any documentation you recommend that tells you where to find all these maps?

Michael Cangialosi

From: Mark DiMarco [mailto:notifications@github.com] Sent: Thursday, January 30, 2014 2:52 PM To: markmarkoh/datamaps Cc: Cangialosi, Michael Subject: Re: [datamaps] Help with D3.js maps (#44)

@mcangial0821https://github.com/mcangial0821 this is possible with custom map data. Since you are new to D3 mapping, I went ahead and created the custom map file for you, here is a working examplehttp://bl.ocks.org/markmarkoh/8717334.

To create this, I downloaded a .SHP file of the US with counties, converted it to GeoJSON and then TopoJSON. You can read more about how that works herehttp://bost.ocks.org/mike/map/

— Reply to this email directly or view it on GitHubhttps://github.com/markmarkoh/datamaps/issues/44#issuecomment-33725974.

markmarkoh commented 10 years ago

It's a strange process for the web since maps have been a desktop dominated field for a long time (think GIS). Maps have to be converted from .SHP files, to GeoJSON files and then for this library, to TopoJSON. So it's 3 steps and plenty of places to mess up.

If you want to learn about it, you can read @mbostock's (creator of D3.js) really informative tutorial on how to do all of this (and a bit more). It's called Let's make a map. He gives a few links on where to find the origin SHP files, and how to get your machine setup to make all of the conversions.

For your needs, you can use the file in the gist I linked to, https://gist.github.com/markmarkoh/8717334

Click 'Raw' next to the newyork-with-counties.json file to download it.

mcangial0821 commented 10 years ago

Mark,

Just recently got back to the D3 mapping. I downloaded all the file based on your suggestions, however the java script in datamaps.usa.js is throwing an error on line 468.

[cid:image001.png@01CF27E8.78CA1800]

Here is my version of the code. Any suggestions.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

Untitled Document
``` From: Mark DiMarco [mailto:notifications@github.com] Sent: Friday, January 31, 2014 9:35 AM To: markmarkoh/datamaps Cc: Cangialosi, Michael Subject: Re: [datamaps] Help with D3.js maps (#44) It's a strange process for the web since maps have been a desktop dominated field for a long time (think GIS). Maps have to be converted from .SHP files, to GeoJSON files and then for this library, to TopoJSON. So it's 3 steps and plenty of places to mess up. If you want to learn about it, you can read @mbostockhttps://github.com/mbostock's (creator of D3.js) really informative tutorial on how to do all of this (and a bit more). It's called Let's make a maphttp://bost.ocks.org/mike/map/. He gives a few links on where to find the origin SHP files, and how to get your machine setup to make all of the conversions. For your needs, you can use the file in the gist I linked to, https://gist.github.com/markmarkoh/8717334 Click 'Raw' next to the newyork-with-counties.json file to download it. — Reply to this email directly or view it on GitHubhttps://github.com/markmarkoh/datamaps/issues/44#issuecomment-33798382.
markmarkoh commented 10 years ago

That's the line that means the ajax call did't succeed. Can you check your file paths and file names? The way it looks, datamaps.usa.js should be in the same folder as the newyork-with-counties.json.

Also double check newyork-with-counties.json is not empty, named right, etc.