-
Notifications
You must be signed in to change notification settings - Fork 14
/
Copy pathindex.html
142 lines (136 loc) · 14.2 KB
/
index.html
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
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!DOCTYPE html><html><head><title>Big</title><meta charset='utf-8'><meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0" />
<link href='big.css' rel='stylesheet' type='text/css' />
<style>
.new-shiny { background: #aaaaaa; }
</style>
<script src='big.js'></script></head><body>
<div><strong>Introduction to Geographic Data Formats!</strong></div>
<div><em>PLEASE</em> interrupt if you have questions!</div>
<div>These slides have been lovingly adapted from <a href="http://maptime.io/geodata">maptime.io/geodata</a>.</div>
<div>Go to <a href="http://courtneycl.github.io/geodata">http://courtneycl.github.io/intro-to-geodata</a> to follow along.</div>
<div>(Use <em>left</em> and <em>right</em> arrows to navigate. Links have a <a href="#4">blue background</a>.)</div>
<div><strong>First things first</strong>: What is <em>geographic data</em>?</div>
<div>Geographic data represents <strong>things that have a location</strong>.</div>
<div>This can include <strong>physical</strong> things like <em>addresses</em>, <em>rivers</em>, and <em>cities</em>.</div>
<div class="center"><img src="./images/flood.png" />flood zones</div>
<div>It can also include <strong>ephemeral</strong> phenomena, like <em>rainfall rates</em>, <em>911 calls</em>, and <em>weather patterns</em>.</div>
<div class="center"><img src="./images/us_precip.gif" />annual precipitation</div>
<div>Geographic data can also capture <strong>nuances</strong> of locations, like the <em>degree of slope</em> at a specific location on the side of a mountain.</div>
<div>How do we <strong>use</strong> geographic data?</div>
<div>Typically, geographic data is used for two things: <em>visualization</em> and <em>analysis</em>.</div>
<div class="center imageText"><img src="./images/analysis.png" />Analysis!</div>
<div class="center imageText"><img src="./images/stamen-terrain.png" />Visualization!</div>
<div>It is often used for <strong>both</strong>!</div>
<div class="center imageText"><img src="./images/wind.png" />So pretty.</div>
<div>Let's first talk about the <strong>types</strong> of geographic data and their <strong>use cases</strong>.</div>
<div>Geographic data typically falls into two camps: <em>raster</em> data and <em>vector</em> data.</div>
<div class="center imageText"><img src="./images/dem.jpg" />Rasters!</div>
<div class="center imageText"><img src="./images/massachusetts.png" />Vectors!</div>
<div><strong>Vector</strong> data is most common on the web, so let's start there.</div>
<div>Vector geo data has <em>three</em> things: <strong>geometry</strong>, a <strong>location</strong>, and <strong>attribute information</strong>.</div>
<div><strong>Geometry</strong> is a representation of the world using a <em>point</em>, <em>line</em>, or <em>polygon</em>.</div>
<div>The <strong>location</strong> will be an x,y coordinate (for a <em>point</em>), or a series of x,y coordinates (for a <em>line</em> or <em>polygon</em>.</div>
<div><strong>Attributes</strong> are pieces of information related to the location.</div>
<div>One <em>super common</em> geographic data format is the <a href="http://en.wikipedia.org/wiki/Shapefile">shapefile</a>.</div>
<div><strong>Shapefile</strong> is actually a misnomer: the data format requires <em>three different files</em> to store its core data (plus some <strong>optional</strong> files).</div>
<div>Let's take a look at a shapefile. Head over to <a href="http://bit.ly/schoolsDC">bit.ly/schoolsDC</a> click <em>Download Dataset</em>, and click Shapefile.</div>
<div class="imageText"><img src="./images/schoolsdc.png" />http://bit.ly/schoolsDC</div>
<div>Clicking the link should have downloaded <em>public_schools.zip</em>. <strong>Extract</strong> that to a folder and <em>take a look</em> at the files in it.</div>
<div>There is one file that is <strong>unrelated</strong> to the shapefile: the cpg file. We can <em>ignore</em> that for now.</div>
<div>There are <strong>four</strong> other files in the folder: a <em>dbf</em>, a <em>prj</em>, a <em>shp</em>, and a <em>shx</em>.</div>
<div>The <strong>three mandatory</strong> files are the <em>dbf</em>, the <em>shp</em>, and the <em>shx</em>.</div>
<div>Open up the <strong>dbf</strong> file in a text editor.</div>
<div class="imageText" style="color:rgb(31, 189, 31)"><img src="./images/dbf.png" />It should look something like this.</div>
<div>The <em>dbf</em> contains the <strong>attribute</strong> information for the dataset, with different values for each feature.</div>
<div>Now open up the <strong>prj</strong> file in a text editor.</div>
<div class="imageText" style="color:rgb(31, 189, 31)"><img src="./images/prj.png" /><br>It should look something like this.</div>
<div>The <em>prj</em> contains the <strong>projection</strong> information for the dataset.</div>
<div>(<em>Projections</em> deserve their own discussion. :-P)</div>
<div>We can skip the <em>shx</em> file. It is an <strong>index</strong> file to allow quick seeking within the file.</div>
<div>Ah, now to the <strong>shp</strong> file!</div>
<div>If you have <em>QGIS</em> or <em>ArcGIS</em> installed on your machine, open up the <strong>public_schools.shp</strong> file.</div>
<div><strong>(If you don't, just look up here!)</strong></div>
<div class="imageText"><img src="./images/shp.png" />This is what the data looks like.</div>
<div>The <strong>shp</strong> file contains the dataset's <em>geometry</em> information. (Points, lines, polygons, etc).</div>
<div>Open the <em>attribute table</em> for cities.</div>
<div class="imageText"><img src="./images/table.png" />The <strong>dbf</strong> file generates this table of information.</div>
<div>Check out the <em>properties</em> of the <strong>cities</strong> file, and take a look at the <em>projection</em> (or <em>coordinate reference system</em>).</div>
<div class="imageText"><img src="./images/crs.png" />The <strong>prj</strong> file generates the coordinate reference system / projection.</div>
<div><em>Shapefiles</em> can be used with most <strong>desktop GIS</strong> and <strong>spatial analysis</strong> tools.</div>
<div><em>Shapefiles</em> are <strong>not</strong> used in web maps.</div>
<div>Another <em>extremely</em> popular geographic data format is <a href="http://geojson.org">GeoJSON</a>.</div>
<div class="imageText"><img src="./images/geojson.png" />GeoJSON is very popular for use in <strong>web maps</strong>.</div>
<div>Let's look at some <em>GeoJSON</em>!</div>
<div>Head back to <a href="http://bit.ly/schoolsDC">http://bit.ly/schoolsDC</a></div>
<div class="imageText"><img src="./images/dl-gj.png"/>Click <em>download dataset</em>, click <em>API</em>, and click <em>Copy</em> next to GeoJSON.</div>
<div>Paste the link into a <em>new tab</em> and open the <em>downloaded file</em> in a text editor.</div>
<div class="imageText" style="color:rgb(31, 189, 31)"><img src="./images/view-gj.png" /> This is GeoJSON!</div>
<div><em>GeoJSON</em> is an extension of a format called <a href="http://json.org">JSON</a>, which stands for <strong>JavaScript Object Notation</strong>.</div>
<div>Because <em>GeoJSON</em> is basically just <strong>JavaScript</strong>, it can easily be used in <em>web maps</em>!</div>
<div class="imageText"><img src="./images/leaflet-gj.png" />For example, Leaflet loves GeoJSON.</div>
<div>GeoJSON has some <strong>required attributes</strong>. GeoJSON features need a <em>type</em>, <em>geometry</em>, and <em>properties</em>.</div>
<div>OMG <a href="http://geojson.io">GeoJSON.io</a>!</div>
<div>To learn more about GeoJSON's specificities, check out Lyzi's<a href="http://github.com/lyzidiamond/learn-geojson">Learn GeoJSON</a>.</div>
<div>Another format: <a href="https://developers.google.com/kml/documentation/kml_tut">KML</a>.</div>
<div><strong>KML</strong> stands for <em>Keyhole Markup Language</em>. It is a file format from <strong>Google</strong> for use in <em>Google Earth</em> and <em>Google Maps</em>.</div>
<div><img src="./images/kml-dl.png" />One more time! <a href="http://bit.ly/schoolsDC">bit.ly/schoolsDC</a> and download <em>KML</em>.</div>
<div>Open the file in a <em>text editor</em>.</div>
<div class="imageText" style="color:rgb(31, 189, 31)"><img src="./images/kml.png">This is KML!</div>
<div>KML stores data in a <strong>tag-based</strong> format. This is similar to <em>GeoJSON</em>, except GeoJSON uses <strong>key-value pairs</strong> instead.</div>
<div>There are many many other types of geographic vector data, but one last we'll discuss is <strong>OpenStreetMap</strong>.</div>
<div class="imageText"><img src="./images/osm.png" />Maptime LOVES OpenStreetMap!</div>
<div>Head to <a href="http://osm.org">http://osm.org</a> and click <em>Export</em> at the top.</div>
<div class="imageText"><img src="./images/osm-export.png" />Zoom in, select a <strong>very small</strong> area, and click <em>Export</em>.</div>
<div>A file called <strong>map.osm</strong> should download. <em>Open</em> it in a text editor.</div>
<div class="imageText" style="color:rgb(31, 189, 31)"><img src="./images/osm-data.png" />It should look ike this.</div>
<div>OSM data is sort of like KML, but has <strong>different information</strong>.</div>
<div>It contains a <em>node id</em>, <em>changeset number</em>, <em>user</em>, and of course <em>latitude</em> and <em>longitude</em>, among other info.</div>
<div>Let's quickly talk about <strong>raster data</strong>.</div>
<div>Like <em>vector</em> data, <em>raster</em> data contains <strong>location</strong>. But it stores its <em>attribute information</em> differently.</div>
<div>Raster data stores its information in its <em>pixels</em>. This information can include <em>height</em>, <em>slope</em>, <em>direction</em>, <em>color</em>, and many others.</div>
<div class"imageText"><img src="./images/raster.png"><br>mapschool.io</div>
<div>The most typical uses for <em>rasters</em> in a <strong>geographic</strong> context are <em>digital elevation models</em> and <em>aerial photography</em>. These can be used to make other things, too.</div>
<div>One example: <em>digital elevation models</em> can be <strong>interpolated</strong> to make <em>hillshades</em>.</div>
<div class="imageText"><img src="./images/dem.jpg" />digital elevation model</div>
<div class="imageText"><img src="./images/hillshade.jpg" />hillshade</div>
<div class="imageText"><img src="./images/rasterfx.png" />more functions</div>
<div><img src="./images/bands-arcmap.jpg" />Raster data can contain more than one layer called <strong>bands</strong>.</div>
<div>We use different <em>combinations of bands</em> to highlight different things for <strong>different use cases</strong>.</div>
<div class="imageText" style="color:rgb(255, 255, 255)"><img src="./images/landsat.png" />Head to <a href="http://bit.ly/landsatbands">bit.ly/landsatbands</a> to experiment with different combinations.</div>
<div><img src="./images/libra.png" />use <a href="http://libra.developmentseed.org">libra</a></div>
<div>As far as <strong>formats</strong>, a very popular one is the <em>GeoTIFF</em>.</div>
<div><img src="./images/geotiff.jpg" />this is a GeoTIFF</div>
<div>A <strong>GeoTIFF</strong> is simply a <em>TIFF</em> (tagged image file format) file that <strong>maintains location information</strong>.</div>
<div>In addition to <strong>rasters</strong> and <strong>vectors</strong>, there's one other <em>very popular</em> geo data type.</div>
<div><img src="./images/csv.png" /><strong>Tables!</strong></div>
<div>Geographic data is <em>very commonly</em> stored in tables of various types.</div>
<div>These include <strong>CSV</strong>, <strong>Excel</strong>, <strong>Google Spreadsheets</strong>, and many others.</div>
<div><strong>Tabular data</strong> can be <em>geocoded</em> to be displayed on a map.</div>
<div>(Geocoding also deserves its own conversation.)</div>
<div>There are <a href="http://en.wikipedia.org/wiki/GIS_file_formats">many more</a> formats than the ones we just talked about.</div>
<div>There's the <strong>file geodatabase</strong>, <a href="https://github.com/mbostock/topojson">TopoJSON</a>, <a href="http://postgis.net">PostGIS</a>, <a href="https://www.gaia-gis.it/fossil/libspatialite/index">SpatiaLite</a>, <a href="http://en.wikipedia.org/wiki/Well-known_text">Well-known Text</a>, <a href="http://en.wikipedia.org/wiki/Web_Feature_Service">Web Feature Service</a>, and even more.</div>
<div>There are <em>many</em> different types of <strong>geographic data</strong>, used by <em>many</em> different types of <strong>software</strong>, <strong>web tools</strong>, and <strong>libraries</strong>, for <em>many</em> different <strong>use cases</strong>.</div>
<div>Fortunately, we have many resources at our disposal to <em>transform</em> data from one type to another.</div>
<div>Much of the work in geo these days requires some <em>data transformation</em>.</div>
<div>There are <strong>many tools</strong> that allow for transformation, including <a href="http://qgis.org">QGIS</a>, <a href="http://gdal.org">GDAL</a>, and <a href="http://ogre.adc4gis.com/">OGR2OGR</a>, among others.</div>
<div><em>What did we learn today?</em></div>
<div>Geographic data exists in a <strong>variety</strong> of formats.</div>
<div><em>Shapefiles</em> are commonly used for <strong>spatial analysis</strong> and <strong>visualization</strong> on your <em>desktop</em>.</div>
<div><em>GeoJSON</em> and <em>KML</em> are commonly used for <strong>web maps</strong>.</div>
<div>You can <em>download</em> vector data from <strong>OpenStreetMap</strong> and <a href="http://opendata.dc.gov">opendata.dc.gov</a>!</div>
<div><em>GeoTIFFs</em> hold raster data and may contain multiple <strong>bands</strong>.</div>
<div>There are <em>lots</em> of places on the internet to find <strong>geographic data</strong>.</div>
<div>Just knowing about <strong>these few</strong> data types can make you a <em>very strong</em> geographic data user.</div>
<div>A <strong>vector detector</strong>? A <em>raster master</em>? Keep learning more!</div>
<div>Thanks.</div>
<div>Courtney Claessens, @sidewalkballet, @maptimeDC</div>
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-47757349-1', 'lyzidiamond.com');
ga('send', 'pageview');
</script>
</body>
</html>