D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wboykinm
Full window
Github gist
github for geodata
<!DOCTYPE html> <html> <head> <title>Foo</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='https://fonts.googleapis.com/css?family=Source+Code+Pro:400,600,700' rel='stylesheet' type='text/css'> <style type='text/css'> body { background:#1C1D26; color:#e2e3e3; font-family: 'Source Code Pro', ; margin:0; } @-webkit-keyframes blinker { from { opacity: 1.0; } to { opacity: 0.0; } } em { -webkit-animation-name: blinker; -webkit-animation-iteration-count: infinite; -webkit-animation-timing-function: cubic-bezier(1.0,0,0,1.0); -webkit-animation-duration: 800ms; } strong { font-weight:normal; color:#BF8D7A; } a { color:#45578C; text-decoration:none; } div { cursor:pointer; cursor:hand; position:absolute; top:0; left:0; } </style> <script type='text/javascript'> window.onload = function() { var s = document.getElementsByTagName('div'), cur = 0, ti; if (!s) return; function go(n) { cur = n; var i = 1e3, e = s[n], t; document.body.className = e.dataset.bodyclass || ''; for (var k = 0; k < s.length; k++) s[k].style.display = 'none'; e.style.display = 'inline'; e.style.fontSize = i + 'px'; if (e.firstChild && e.firstChild.nodeName === 'IMG') { document.body.style.backgroundImage = 'url(' + e.firstChild.src + ')'; e.firstChild.style.display = 'none'; if ('classList' in e) e.classList.add('imageText'); } else { document.body.style.backgroundImage = ''; document.body.style.backgroundColor = e.style.backgroundColor; } if (ti !== undefined) window.clearInterval(ti); t = parseInt(e.dataset.timeToNext || 0, 10); if (t > 0) ti = window.setTimeout(fwd, (t * 1000)); while ( e.offsetWidth > window.innerWidth || e.offsetHeight > window.innerHeight) { e.style.fontSize = (i -= 2) + 'px'; if (i < 0) break; } e.style.marginTop = ((window.innerHeight - e.offsetHeight) / 2) + 'px'; if (window.location.hash !== n) window.location.hash = n; document.title = e.textContent || e.innerText; } document.onclick = function() { go(++cur % (s.length)); }; function fwd() { go(Math.min(s.length - 1, ++cur)); } function rev() { go(Math.max(0, --cur)); } document.onkeydown = function(e) { if (e.which === 39 || e.which === 34 || e.which === 40) fwd(); if (e.which === 37 || e.which === 33 || e.which === 38) rev(); }; document.ontouchstart = function(e) { var x0 = e.changedTouches[0].pageX; document.ontouchend = function(e) { var x1 = e.changedTouches[0].pageX; if (x1 - x0 < 0) fwd(); if (x1 - x0 > 0) rev(); }; }; function parse_hash() { return Math.max(Math.min( s.length - 1, parseInt(window.location.hash.substring(1), 10)), 0); } if (window.location.hash) cur = parse_hash() || cur; window.onhashchange = function() { var c = parse_hash(); if (c !== cur) go(c); }; go(cur); }; </script></head><body> <div><h1 id="github-for-geodata">Github for geodata</h1> <p>by Bill Morris for <a href="https://vcgi.vermont.gov/">VCGI</a> Oct 28 2014</p> </div> <div><p>A practical guide to web-based version control and collaboration for the GIS-inclined</p> </div> <div><ul> <li><em>Intro</em></li> <li>Setup</li> <li>First Light</li> <li>Editing Data</li> <li>Hosting an application</li> </ul> </div> <div><p>Why use github? What's wrong with ArcSDE/ PostGIS/ Thatendlessbunchoffoldersonmydesktop?</p> </div> <div><p>Free</p> </div> <div><p>Versioned</p> </div> <div><p>Collaborative</p> </div> <div><ul> <li>Intro</li> <li><em>Setup</em></li> <li>First Light</li> <li>Editing Data</li> <li>Hosting an application</li> </ul> </div> <div><ol> <li><a href="https://github.com/">Sign up for a github account</a></li> </ol> </div> <div><p>That's it!</p> </div> <div><p>(not really; we have some work to do. But is <strong>is</strong> that easy to get started.)</p> </div> <div><ul> <li>Intro</li> <li>Setup</li> <li><em>First Light</em></li> <li>Editing Data</li> <li>Hosting an application</li> </ul> </div> <div><p>Create a repository</p> </div> <div><p>Add a dataset</p> </div> <div><p>geojson and topojson - shapefiles for the web</p> </div> <div><p>View it in the browser</p> </div> <div><ul> <li>Intro</li> <li>Setup</li> <li>First Light</li> <li><em>Editing Data</em></li> <li>Hosting an application</li> </ul> </div> <div><p>A few options:</p> </div> <div><p>Tiny data (<8MB): Use <a href="https://geojson.io">geojson.io</a></p> </div> <div><p>Bigger data (8MB - 100MB): Edit locally and sync using the github app (<a href="https://mac.github.com/">for mac</a> & <a href="https://windows.github.com/">for windows</a>)</p> </div> <div><p>Big data (>100MB): We're not really there yet. </p> </div> <div><ul> <li>Intro</li> <li>Setup</li> <li>First Light</li> <li>Editing Data</li> <li><em>Hosting an application</em></li> </ul> </div> <div><p>github pages - web apps, hosted for free</p> </div> <div><p>updates to data are immediately available in the app </p> </div> <div><p>(this can get a lot more complicated, but it doesn't need to)</p> </div> <div><h1 id="thanks-">Thanks!</h1> </div> <div><p>Get in touch with any questions: bill@faraday.io <a href="https://twitter.com/vtcraghead">@vtcraghead</a></p> </div>