-
Notifications
You must be signed in to change notification settings - Fork 9
Expand file tree
/
Copy pathindex.html
More file actions
55 lines (55 loc) · 8.15 KB
/
index.html
File metadata and controls
55 lines (55 loc) · 8.15 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
<!doctype html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Maps: Building Maps with D3.js</title>
<style>
/*! wysiwyg.css v0.0.2 | MIT License | github.com/jgthms/wysiwyg.css */.wysiwyg{line-height:1.6}.wysiwyg a{text-decoration:none}.wysiwyg a:hover{border-bottom:1px solid}.wysiwyg abbr{border-bottom:1px dotted;cursor:help}.wysiwyg cite{font-style:italic}.wysiwyg hr{background:#e6e6e6;border:none;display:block;height:1px;margin-bottom:1.4em;margin-top:1.4em}.wysiwyg img{vertical-align:text-bottom}.wysiwyg ins{background-color:lime;text-decoration:none}.wysiwyg mark{background-color:#ff0}.wysiwyg small{font-size:0.8em}.wysiwyg strong{font-weight:700}.wysiwyg sub,.wysiwyg sup{font-size:0.8em}.wysiwyg sub{vertical-align:sub}.wysiwyg sup{vertical-align:super}.wysiwyg p,.wysiwyg dl,.wysiwyg ol,.wysiwyg ul,.wysiwyg blockquote,.wysiwyg pre,.wysiwyg table{margin-bottom:1.4em}.wysiwyg p:last-child,.wysiwyg dl:last-child,.wysiwyg ol:last-child,.wysiwyg ul:last-child,.wysiwyg blockquote:last-child,.wysiwyg pre:last-child,.wysiwyg table:last-child{margin-bottom:0}.wysiwyg h1,.wysiwyg h2,.wysiwyg h3,.wysiwyg h4,.wysiwyg h5,.wysiwyg h6{font-weight:700;line-height:1.2}.wysiwyg h1:first-child,.wysiwyg h2:first-child,.wysiwyg h3:first-child,.wysiwyg h4:first-child,.wysiwyg h5:first-child,.wysiwyg h6:first-child{margin-top:0}.wysiwyg h1{font-size:2.4em;margin-bottom:.58333em;margin-top:.58333em;line-height:1}.wysiwyg h2{font-size:1.6em;margin-bottom:.875em;margin-top:1.75em;line-height:1.1}.wysiwyg h3{font-size:1.3em;margin-bottom:1.07692em;margin-top:1.07692em}.wysiwyg h4{font-size:1.2em;margin-bottom:1.16667em;margin-top:1.16667em}.wysiwyg h5{font-size:1.1em;margin-bottom:1.27273em;margin-top:1.27273em}.wysiwyg h6{font-size:1em;margin-bottom:1.4em;margin-top:1.4em}.wysiwyg dd{margin-left:1.4em}.wysiwyg ol,.wysiwyg ul{list-style-position:outside;margin-left:1.4em}.wysiwyg ol{list-style-type:decimal}.wysiwyg ol ol{list-style-type:lower-alpha}.wysiwyg ol ol ol{list-style-type:lower-roman}.wysiwyg ol ol ol ol{list-style-type:lower-greek}.wysiwyg ol ol ol ol ol{list-style-type:decimal}.wysiwyg ol ol ol ol ol ol{list-style-type:lower-alpha}.wysiwyg ul{list-style-type:disc}.wysiwyg ul ul{list-style-type:circle}.wysiwyg ul ul ul{list-style-type:square}.wysiwyg ul ul ul ul{list-style-type:circle}.wysiwyg ul ul ul ul ul{list-style-type:disc}.wysiwyg ul ul ul ul ul ul{list-style-type:circle}.wysiwyg blockquote{border-left:4px solid #e6e6e6;padding:0.6em 1.2em}.wysiwyg blockquote p{margin-bottom:0}.wysiwyg code,.wysiwyg kbd,.wysiwyg samp,.wysiwyg pre{-moz-osx-font-smoothing:auto;-webkit-font-smoothing:auto;background-color:#f2f2f2;color:#333;font-size:0.8em}.wysiwyg code,.wysiwyg kbd,.wysiwyg samp{border-radius:2px;line-height:2;padding:0.2em 0.5em 0.3em;vertical-align:baseline}.wysiwyg pre{overflow:auto;padding:1em 1.2em}.wysiwyg pre code{background:none;font-size:1em;line-height:1em}.wysiwyg figure{margin-bottom:2.8em;text-align:center}.wysiwyg figure:first-child{margin-top:0}.wysiwyg figure:last-child{margin-bottom:0}.wysiwyg figcaption{font-size:0.8em;margin-top:.875em}.wysiwyg table{width:100%}.wysiwyg table pre{white-space:pre-wrap}.wysiwyg th,.wysiwyg td{font-size:1em;padding:.7em;border:1px solid #e6e6e6;line-height:1.4}.wysiwyg thead tr,.wysiwyg tfoot tr{background-color:#f5f5f5}.wysiwyg thead th,.wysiwyg thead td,.wysiwyg tfoot th,.wysiwyg tfoot td{font-size:.9em;padding:.77778em}.wysiwyg thead th code,.wysiwyg thead td code,.wysiwyg tfoot th code,.wysiwyg tfoot td code{background-color:#fff}.wysiwyg tbody tr{background-color:#fff}
main {margin: 20px auto 0;width: 900px;font-family: "Helvetica Neue", Helvetica, sans-serif;font-size: 120%;}
</style>
</head>
<body>
<main class="wysiwyg">
<h1>D3 Maps - Mapping with D3.js</h1>
<p>Building Maps with D3. A template, boilerplate, or starter kit for building various maps with <a href="https://github.com/d3/d3">D3.js</a>. Links to examples and <a href="https://github.com/mbostock/topojson"></a>TopoJSON</a> data files. If this is your first time working with D3.js, I recommend reading Mike Bostock's <a href="https://bost.ocks.org/mike/map/">Let's Make a Map</a> and looking at a <a href="http://bl.ocks.org/mbostock/4180634">basic</a> <a href="http://bl.ocks.org/jasondavies/4188334">example</a>.</p>
<h2>World Map Template</h2>
<img src="http://i.imgur.com/F31auyO.png?2" alt="D3 World Map Template">
<p>With D3 v4 you can build a World Map with the main <a href="https://techslides.github.io/D3-Maps/examples/world-template.html">D3.js file</a> or with <a href="https://techslides.github.io/D3-Maps/examples/world-template-micro.html">D3 Microlibraries</a>. These 2 examples show how to build a World Map that has a constrained pan and zoom, responsive design, different colors for each country, tooltips, capitals from external CSV file, and much more.</p>
<h3>World Map Data</h3>
<p>The TopoJSON file above was customized by hand to split some countries (ie. seperate France from French Guyana) and include missing undefined countries (Kosovo, Somaliland, Northern Cyprus, Christmas Island, Cocos Islands, and Siachen Glacier). This is a one-off. For building your own world TopoJSON files, check out <a href="https://github.com/mbostock/world-atlas">World Atlas TopoJSON</a> and <a href="https://github.com/mbostock/topojson/">TopoJSON</a></p>
<h2>Maps of Countries</h2>
<p>Individual <a href="">Country Maps with States and Provinces</a>. Instead of listing each country and building individual files for each country, one file is used with a dropdown that pulls each country TopoJSON file.</p>
<h3>Country Map Data</h3>
<p>Individual country TopoJSON files are generated from NaturalEarth's <a href="http://www.naturalearthdata.com/downloads/10m-cultural-vectors/10m-admin-1-states-provinces/">Admin 1 States,Provinces</a> shapefiles. This has been run on Mac OS with ogr2ogr and TopoJSON. The process is outlined below:
<ul>
<li>Make a CSV of all countries included in NE shapefile<br><code>ogr2ogr -f CSV ne_10m_admin_0_countries.csv ne_10m_admin_1_states_provinces.shp -sql "SELECT DISTINCT admin FROM ne_10m_admin_1_states_provinces"</code></li>
<li>Split 1 shapefile into country specific shapefiles based on CSV (rename spaces in fields to underscore)<br><code>cat countries.csv | while read line; do ogr2ogr -f "ESRI Shapefile" -where "admin = '$line'" "world/${line// /_}.shp" ne_10m_admin_1_states_provinces.shp; done</code></li>
<li>Convert Shapefile to TopoJSON and keep specific properties (adm1_code for ID and name, name_alt, and <a href="http://ntl.bts.gov/data/letter_am/fipscode.pdf">fips</a> under properties)<br><code>for file in *; do if [[ ${file: -4} == ".shp" ]]; then topojson -q 1e5 --id-property adm1_code -p name,name_alt,fips -o ${file%.*}.topo.json map=$file; fi; done</code></li>
<li>Move each TopoJSON files into seperate countries folder<br><code>copy *.json country</code></li>
</ul>
</p>
<h2>Todo:</h2>
<ul>
<li>Include country maps with multiple words (United States of America) and update instructions on genetating data files</li>
<li>Clean up code</li>
<li>Provide shapefile example, projected topojson example, and geojson example</li>
</ul>
<h2>Other Map Examples with D3:</h2>
<ul>
<li><a href="http://techslides.com/demos/d3/d3-exploring-countries.html">Exploring countries in D3</a></li>
<li><a href="http://bl.ocks.org/patricksurry/6621971">Rolling pan and zoom with Mercator projection</a></li>
</ul>
<h2>Requested Map Examples with D3.js:</h2>
<ul>
<li>Map of usa</li>
<li>Map of world with all provinces and states</li>
<li>Map of each continent</li>
</ul>
<h2>Other Interesting Maps and Map Resources</h2>
<ul>
<li><a href="http://www.macwright.org/2015/03/23/geojson-second-bite.html">Dig into GeoJSON</a></li>
<li><a href="https://github.com/johan/world.geo.json">Annotated geo-json geometry files for the world</a></li>
</ul>
</main>
</body>
</html>