index.html

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  <meta http-equiv="Content-Style-Type" content="text/css" />
  <meta name="generator" content="pandoc" />
  <meta name="author" content="James Seppi" />
  <title>Intro to Turf.js</title>
  <style type="text/css">code{white-space: pre;}</style>
  <style type="text/css">
table.sourceCode, tr.sourceCode, td.lineNumbers, td.sourceCode {
  margin: 0; padding: 0; vertical-align: baseline; border: none; }
table.sourceCode { width: 100%; line-height: 100%; background-color: #303030; color: #cccccc; }
td.lineNumbers { text-align: right; padding-right: 4px; padding-left: 4px; }
td.sourceCode { padding-left: 5px; }
pre, code { color: #cccccc; background-color: #303030; }
code > span.kw { color: #f0dfaf; }
code > span.dt { color: #dfdfbf; }
code > span.dv { color: #dcdccc; }
code > span.bn { color: #dca3a3; }
code > span.fl { color: #c0bed1; }
code > span.ch { color: #dca3a3; }
code > span.st { color: #cc9393; }
code > span.co { color: #7f9f7f; }
code > span.ot { color: #efef8f; }
code > span.al { color: #ffcfaf; }
code > span.fu { color: #efef8f; }
code > span.er { color: #c3bf9f; }
  </style>
  <link rel="stylesheet" type="text/css" media="screen, projection, print"
    href="http://www.w3.org/Talks/Tools/Slidy2/styles/slidy.css" />
  <link rel="stylesheet" href="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.css" />
  <script src="//cdn.leafletjs.com/leaflet-0.7.3/leaflet.js"></script>
  <script src="//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js"></script>
  <script src="//code.jquery.com/jquery-1.11.3.min.js"></script>
  <script src="scripts/Leaflet.MakiMarkers.js"></script>
  <link rel="stylesheet" href="styles/style.css" />
  <script src="http://www.w3.org/Talks/Tools/Slidy2/scripts/slidy.js"
    charset="utf-8" type="text/javascript"></script>
</head>
<body>
<div class="slide titlepage">
  <h1 class="title">Intro to Turf.js</h1>
  <p class="author">
James Seppi
  </p>
  <p class="date">TNRIS GeoRodeo - May 22, 2015</p>
</div>
<div id="intro-to-turf.js" class="slide section level1">
<h1>Intro to Turf.js</h1>
<p>Presentation by James Seppi</p>
<p>Software Developer at <a href="http://tnris.org">TNRIS</a>, part of <a href="http://www.twdb.texas.gov">TWDB</a></p>
<p>Twitter: <a href="http://twitter.com/hydrologee">hydrologee</a></p>
<p>Viewable at <a href="http://jseppi.github.io/intro-to-turf/">jseppi.github.io/intro-to-turf/</a></p>
<p>Source code at <a href="https://github.com/jseppi/intro-to-turf/">github.com/jseppi/intro-to-turf/</a></p>
</div>
<div id="what-is-turf.js" class="slide section level1">
<h1>What is Turf.js?</h1>
<p>JavaScript library for geospatial analysis</p>
<div class="incremental">
<p>Runs in the browser, or in <a href="http://nodejs.org">Node.js</a></p>
</div>
<div class="incremental">
<p>Open Source, MIT-licensed</p>
<p>Collection of small modules</p>
</div>
<div class="incremental">
<p><a href="http://turfjs.org">turfjs.org</a></p>
<p><a href="https://github.com/turfjs">github.com/turfjs</a></p>
<div class="figure">
<img src="img/turflogo.png" />

</div>
</div>
</div>
<div id="some-history" class="slide section level1">
<h1>Some History</h1>
<p>(from Tom MacWright - <a href="http://www.macwright.org/presentations/turf-geodc">macwright.org/presentations/turf-geodc</a>)</p>
<div class="incremental">
<p>2000: <a href="http://tsusiatsoftware.net/jts/main.html">Java Topology Suite (JTS)</a></p>
</div>
<div class="incremental">
<p>2003: <a href="http://trac.osgeo.org/geos/">GEOS</a>, JTS port to C++</p>
</div>
<div class="incremental">
<p>2008: <a href="http://toblerity.org/shapely/manual.html">Shapely</a>, interface of GEOS to Python</p>
</div>
<div class="incremental">
<p>2011: <a href="https://github.com/bjornharrtell/jsts">JavaScript Topology Suite (JSTS)</a>, JTS port to JS</p>
</div>
<div class="incremental">
<p>2014: <a href="http://turfjs.org">Turf</a></p>
</div>
</div>
<div id="about-turf.js" class="slide section level1">
<h1>About Turf.js</h1>
<p>Not a port, new implementations</p>
<div class="incremental">
<p>Project started and managed by <a href="https://github.com/morganherlocker">Morgan Herlocker</a> (now at <a href="http://mapbox.com">Mapbox</a>)</p>
<div class="figure">
<img src="img/morganherlocker.jpg" />

</div>
</div>
<div class="incremental">
<p>1280+ stars, 15 owners</p>
<div class="figure">
<img src="img/owners.png" />

</div>
</div>
</div>
<div id="modules" class="slide section level1">
<h1>Modules</h1>
<p>Aggregation, Measurement, Transformation, Interpolation, Classification, Joins, Types, and Helpers</p>
<div class="incremental">
<p>turf-area</p>
</div>
<div class="incremental">
<p>turf-buffer</p>
</div>
<div class="incremental">
<p>turf-distance</p>
</div>
<div class="incremental">
<p>turf-intersect, turf-union, turf-merge</p>
</div>
<div class="incremental">
<p>turf-aggregate, turf-along, turf-average, turf-bbox-polygon, turf-bearing, turf-bezier, turf-center, turf-centroid, turf-combine, turf-concave, turf-convex, turf-count, turf-destination, turf-deviation, turf-envelope, turf-erase, turf-explode, turf-extent, turf-featurecollection, turf-filter, turf-flip, turf-hex-grid, turf-inside, turf-isolines, turf-jenks, turf-kinks, turf-line-distance, turf-line-slice, turf-linestring, turf-max, turf-median, turf-midpoint, turf-min, turf-nearest, turf-planepoint, turf-point, turf-point-grid, turf-point-on-line, turf-point-on-surface, turf-polygon, turf-quantile, turf-random, turf-reclass, turf-remove, turf-sample, turf-simplify, turf-size, turf-square, turf-square-grid, turf-sum, turf-tag, turf-tin, turf-triangle-grid, turf-variance, turf-within</p>
</div>
</div>
<div id="why-does-this-matter" class="slide section level1">
<h1>Why does this matter?</h1>
<p>New implementations, recent algorithms - pretty fast!</p>
<div class="incremental">
<p>&quot;Isomorphic&quot; - browser and back-end</p>
</div>
<div class="incremental">
<p>Modular - take only what you need (good for browsers via <a href="http://browserify.org/">browserify</a>)</p>
</div>
<div class="incremental">
<p>Speaks <a href="http://geojson.org">GeoJSON</a></p>
</div>
<div class="incremental">
<p>Wraps other modules so that they speak GeoJSON, too</p>
</div>
</div>
<div id="geojson" class="slide section level1">
<h1>GeoJSON</h1>
<div class="incremental">
<p>Not GeoJohnson</p>
<div class="figure">
<img src="img/geojohnson.png" />

</div>
</div>
</div>
<div id="geojson-1" class="slide section level1">
<h1>GeoJSON</h1>
<p>Lingua franca for geospatial data on the web</p>
<div class="incremental">
<p>Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, GeometryCollection</p>
</div>
<div class="incremental">
<p>Feature, FeatureCollection (store properties with geometries)</p>
</div>
</div>
<div id="geojson-2" class="slide section level1">
<h1>GeoJSON</h1>
<pre class="sourceCode json"><code class="sourceCode json"><span class="fu">{</span>
  <span class="dt">&quot;type&quot;</span><span class="fu">:</span> <span class="st">&quot;Feature&quot;</span><span class="fu">,</span>
  <span class="dt">&quot;geometry&quot;</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">&quot;type&quot;</span><span class="fu">:</span> <span class="st">&quot;Point&quot;</span><span class="fu">,</span>
    <span class="dt">&quot;coordinates&quot;</span><span class="fu">:</span> <span class="ot">[</span><span class="fl">125.6</span><span class="ot">,</span> <span class="fl">10.1</span><span class="ot">]</span>
  <span class="fu">},</span>
  <span class="dt">&quot;properties&quot;</span><span class="fu">:</span> <span class="fu">{</span>
    <span class="dt">&quot;name&quot;</span><span class="fu">:</span> <span class="st">&quot;Dinagat Islands&quot;</span>
  <span class="fu">}</span>
<span class="fu">}</span></code></pre>
<p><a href="http://geojson.org">geojson.org</a></p>
<p><a href="http://geojson.io">geojson.io</a></p>
<p>GitHub renders it: <a href="https://github.com/tnris/tx.geojson">github.com/tnris/tx.geojson</a></p>
</div>
<div id="using-turf" class="slide section level1">
<h1>Using Turf</h1>
<p>In Node:</p>
<pre class="sourceCode javascript"><code class="sourceCode javascript">npm install turf
<span class="co">//or npm install turf-buffer</span>
<span class="kw">var</span> turf = <span class="fu">require</span>(<span class="st">&#39;turf&#39;</span>);
<span class="co">//or var buffer = require(&#39;turf-buffer&#39;);</span></code></pre>
<div class="incremental">
<p>On your web page</p>
<pre class="sourceCode html"><code class="sourceCode html"><span class="kw">&lt;script</span><span class="ot"> src=</span><span class="st">&quot;//api.tiles.mapbox.com/mapbox.js/plugins/turf/v2.0.0/turf.min.js&quot;</span><span class="kw">&gt;</span>
<span class="kw">&lt;/script&gt;</span>
<span class="kw">&lt;script&gt;</span>
  <span class="kw">var</span> bufferedPoint = <span class="ot">turf</span>.<span class="fu">buffer</span>(myPoint, <span class="dv">5</span>, <span class="st">&#39;miles&#39;</span>);
&lt;<span class="ot">/script&gt;</span></code></pre>
</div>
</div>
<div id="examples" class="slide section level1">
<h1>Examples!</h1>
<p>Word of Warning: Web map rendering performance</p>
<p>For larger datasets do analysis on back-end</p>
<div class="incremental">
<p>Nonetheless, it is fun to see in a web map</p>
</div>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> austin = <span class="ot">turf</span>.<span class="fu">point</span>([-<span class="fl">97.743061</span>, <span class="fl">30.267153</span>]); <span class="co">//GeoJSON point</span>
<span class="kw">var</span> buffered = <span class="ot">turf</span>.<span class="fu">buffer</span>(austin, <span class="dv">15</span>, <span class="st">&#39;miles&#39;</span>);
result = <span class="ot">turf</span>.<span class="fu">featurecollection</span>([austin, buffered])</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> austin = <span class="ot">turf</span>.<span class="fu">point</span>([-<span class="fl">97.743061</span>, <span class="fl">30.267153</span>]); <span class="co">//GeoJSON point</span>
<span class="kw">var</span> atxBuffer = <span class="ot">turf</span>.<span class="fu">buffer</span>(austin, <span class="dv">15</span>, <span class="st">&#39;miles&#39;</span>);
<span class="kw">var</span> roundrock = <span class="ot">turf</span>.<span class="fu">point</span>([-<span class="fl">97.678896</span>, <span class="fl">30.508255</span>]);
<span class="kw">var</span> rrBuffer = <span class="ot">turf</span>.<span class="fu">buffer</span>(roundrock, <span class="dv">15</span>, <span class="st">&#39;miles&#39;</span>);
result = <span class="ot">turf</span>.<span class="fu">union</span>(<span class="ot">atxBuffer</span>.<span class="fu">features</span>[<span class="dv">0</span>], <span class="ot">rrBuffer</span>.<span class="fu">features</span>[<span class="dv">0</span>]);</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> austin = <span class="ot">turf</span>.<span class="fu">point</span>([-<span class="fl">97.743061</span>, <span class="fl">30.267153</span>]); <span class="co">//GeoJSON point</span>
<span class="kw">var</span> atxBuffer = <span class="ot">turf</span>.<span class="fu">buffer</span>(austin, <span class="dv">15</span>, <span class="st">&#39;miles&#39;</span>);
<span class="kw">var</span> roundrock = <span class="ot">turf</span>.<span class="fu">point</span>([-<span class="fl">97.678896</span>, <span class="fl">30.508255</span>]);
<span class="kw">var</span> rrBuffer = <span class="ot">turf</span>.<span class="fu">buffer</span>(roundrock, <span class="dv">15</span>, <span class="st">&#39;miles&#39;</span>);
result = <span class="ot">turf</span>.<span class="fu">intersect</span>(<span class="ot">atxBuffer</span>.<span class="fu">features</span>[<span class="dv">0</span>], <span class="ot">rrBuffer</span>.<span class="fu">features</span>[<span class="dv">0</span>]);</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//tnris geojson made with rasterio</span>
display = <span class="ot">tnris</span>.<span class="fu">type</span>;
result = tnris;</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript">result = <span class="ot">turf</span>.<span class="fu">explode</span>(tnris);
display = <span class="st">&#39;Num Points: &#39;</span> + <span class="ot">result</span>.<span class="ot">features</span>.<span class="fu">length</span>;</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> merged = <span class="ot">turf</span>.<span class="fu">merge</span>(tnris);
<span class="kw">var</span> polys = <span class="ot">merged</span>.<span class="ot">geometry</span>.<span class="ot">coordinates</span>.<span class="fu">map</span>(<span class="kw">function</span> (c) {
  <span class="kw">return</span> <span class="ot">turf</span>.<span class="fu">simplify</span>(<span class="ot">turf</span>.<span class="fu">polygon</span>(c), <span class="fl">0.1</span>);
});
result = <span class="ot">turf</span>.<span class="fu">featurecollection</span>(polys);</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//use simplified result from previous example</span>
result = <span class="ot">turf</span>.<span class="fu">explode</span>(result);
display = <span class="st">&#39;Num Points: &#39;</span> + <span class="ot">result</span>.<span class="ot">features</span>.<span class="fu">length</span>;</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="co">//use exploded result from previous example</span>
result = <span class="ot">turf</span>.<span class="fu">tin</span>(result);</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> bbox = <span class="ot">turf</span>.<span class="fu">extent</span>(tnris);
<span class="kw">var</span> grid = <span class="ot">turf</span>.<span class="fu">squareGrid</span>(bbox, <span class="dv">50</span>, <span class="st">&#39;miles&#39;</span>);
<span class="kw">var</span> points = <span class="ot">turf</span>.<span class="fu">explode</span>(tnris);
<span class="kw">var</span> counted = <span class="ot">turf</span>.<span class="fu">count</span>(grid, points, <span class="st">&#39;pointCount&#39;</span>);
result = counted;</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> bbox = <span class="ot">turf</span>.<span class="fu">extent</span>(tnris);
<span class="kw">var</span> grid = <span class="ot">turf</span>.<span class="fu">triangleGrid</span>(bbox, <span class="dv">50</span>, <span class="st">&#39;miles&#39;</span>);
<span class="kw">var</span> points = <span class="ot">turf</span>.<span class="fu">explode</span>(tnris);
<span class="kw">var</span> counted = <span class="ot">turf</span>.<span class="fu">count</span>(grid, points, <span class="st">&#39;pointCount&#39;</span>);
result = counted;</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div class="slide section level1">

<pre class="sourceCode javascript"><code class="sourceCode javascript"><span class="kw">var</span> bbox = <span class="ot">turf</span>.<span class="fu">extent</span>(tnris);
<span class="kw">var</span> grid = <span class="ot">turf</span>.<span class="fu">hexGrid</span>(bbox, <span class="dv">50</span>, <span class="st">&#39;miles&#39;</span>);
<span class="kw">var</span> points = <span class="ot">turf</span>.<span class="fu">explode</span>(tnris);
<span class="kw">var</span> counted = <span class="ot">turf</span>.<span class="fu">count</span>(grid, points, <span class="st">&#39;pointCount&#39;</span>);
result = counted;</code></pre>
<button class="button">
Show Demo
</button>
</div>
<div id="documentation" class="slide section level1">
<h1>Documentation!</h1>
<p>Documentation has been at the forefront of development by the core team</p>
<div class="incremental">
<p>(especially: <a href="https://github.com/morganherlocker">morganherlocker</a>, <a href="https://github.com/tmcw">tmcw</a>, <a href="https://github.com/lyzidiamond">lyzidiamond</a>, <a href="https://github.com/tchannel">tchannel</a>)</p>
<div class="figure">
<img src="img/turfdocs.png" />

</div>
</div>
</div>
<div class="slide section level1">

<p>Built directly from the source code</p>
<div class="incremental">
<div class="figure">
<img src="img/turfdocs2.png" alt="Interactive examples!" />
<p class="caption">Interactive examples!</p>
</div>
</div>
</div>
<div id="in-the-wild" class="slide section level1">
<h1>In the Wild</h1>
<div class="figure">
<img src="img/hex_temp_jvrousseau.png" alt="Average Temperature by Jordan Rousseau" />
<p class="caption">Average Temperature by <a href="https://twitter.com/jvrousseau">Jordan Rousseau</a></p>
</div>
</div>
<div class="slide section level1">

<div class="figure">
<img src="img/turfjsparty.png" alt="turfjs.party by tchannel" />
<p class="caption"><a href="http://turfjs.party/">turfjs.party</a> by <a href="https://github.com/frankrowe">tchannel</a></p>
</div>
</div>
<div class="slide section level1">

<div class="figure">
<img src="img/ugis.png" alt="ugis by frankrowe" />
<p class="caption"><a href="http://frankrowe.org/ugis/">ugis</a> by <a href="https://github.com/frankrowe">frankrowe</a></p>
</div>
</div>
<div class="slide section level1">

<div class="figure">
<img src="img/tornadoes.png" alt="Analysis of 60 Years of Tornadoes - mapbox.com/blog/60-years-of-tornadoes-with-turf" />
<p class="caption">Analysis of 60 Years of Tornadoes - <a href="https://www.mapbox.com/blog/60-years-of-tornadoes-with-turf/">mapbox.com/blog/60-years-of-tornadoes-with-turf</a></p>
</div>
<p>57,988 tornadoes analyzed over 3,221 counties (in <a href="http://nodejs.org">Node</a>)</p>
</div>
<div class="slide section level1">

<div class="figure">
<img src="img/iditarod.png" alt="Iditarod Visualization - mapbox.com/blog/playback-the-iditarod-with-turf" />
<p class="caption">Iditarod Visualization - <a href="https://www.mapbox.com/blog/playback-the-iditarod-with-turf/">mapbox.com/blog/playback-the-iditarod-with-turf</a></p>
</div>
</div>
<div id="get-involved" class="slide section level1">
<h1>Get Involved</h1>
<p>Open Source, developed in the open on GitHub: <a href="https://github.com/turfjs">github.com/turfjs</a></p>
<div class="incremental">
<p>Still more work to be done: <strong>docs</strong> to improve, <strong>code</strong> to write, <strong>bugs</strong> to discover, <strong>tests</strong> to write</p>
</div>
<div class="incremental">
<p>Check out the issues: <a href="https://github.com/turfjs/turf/issues">github.com/turfjs/turf/issues</a></p>
</div>
</div>
<div id="like-learning" class="slide section level1">
<h1>Like Learning?</h1>
<p>Austin Open Source GIS User Group</p>
<p><a href="http://www.meetup.com/atx-osg">meetup.com/atx-osg</a></p>
<div class="figure">
<img src="img/maptimeatx.png" alt="meetup.com/MaptimeATX" />
<p class="caption"><a href="http://www.meetup.com/MaptimeATX">meetup.com/MaptimeATX</a></p>
</div>
</div>
<script src="scripts/main.js"></script>
</body>
</html>