D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
wboykinm
Full window
Github gist
VT collective impact conference 2016: Open Data primer
<!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=Work+Sans" rel="stylesheet"> <style type='text/css'> body { background:#499DF5; color:#fff; font-family: 'Work Sans', sans-serif; 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:#FFF707; } a { color:#F8E79D; text-decoration:none; background: #5186ED; } div { cursor:pointer; cursor:hand; position:absolute; top:0; left:0; padding: 20px; } img { max-width: 100%; max-height: 100%; } </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><h2 id="-opendata">#opendata</h2> <p>The wide-angle view</p> </div> <div><p>Definition (from <a href="https://okfn.org/opendata/">OKFN</a>):</p> </div> <div><p>Data is "open" when it is:</p> </div> <div><ul> <li>Available and accessible</li> </ul> </div> <div><ul> <li>Reusable and redistributable</li> </ul> </div> <div><ul> <li>Universal and inclusive</li> </ul> </div> <div><p>What's the point of open data?</p> </div> <div><ul> <li>Transparency</li> <li>Releasing social and commercial value</li> <li>Participation and engagement</li> </ul> </div> <div><p>Licensing must point toward those goals (<a href="https://opendefinition.org/licenses/">here are some open licenses for data and content</a>)</p> </div> <div><p>What kinds of data should be open?</p> </div> <div><ul> <li>Culture</li> <li>Finance</li> <li>Science</li> <li>Weather</li> <li>Environment</li> <li>Infrastructure</li> <li>Statistics</li> </ul> </div> <div><p>Open data in action: Transparency</p> </div> <div><p><a href="https://capitolwords.org/?terma=ozone&termb=carbon+dioxide">Sunlight Foundation Capitolwords</a></p> </div> <div><p><img src="https://www.dropbox.com/s/aqwrfm7aobleuxk/Screenshot%202016-11-01%2022.10.58.png?dl=1" alt=""></p> </div> <div><p><a href="https://www.burlingtonvt.gov/Police/Data/CitizenComplaints">BPD Citizen Complaints</a></p> </div> <div><p><img src="https://www.dropbox.com/s/fa5dpumbo0in0wj/Screenshot%202016-12-06%2011.16.13.png?dl=1" alt=""></p> </div> <div><p>Releasing Value</p> </div> <div><p><a href="https://blogs.usda.gov/2015/04/02/new-usda-foodkeeper-app-your-new-tool-for-smart-food-storage/">USDA Foodkeeper</a></p> </div> <div><p><img src="https://www.dropbox.com/s/bbks6id41nn2976/Screenshot%202016-11-01%2022.12.14.png?dl=1" alt=""></p> </div> <div><p><a href="https://openaddresses.io/">Open Addresses</a></p> </div> <div><p><img src="https://www.dropbox.com/s/37ibaxh99x4gu52/Screenshot%202016-11-02%2009.54.10.png?dl=1" alt=""></p> </div> <div><p><img src="https://lh3.googleusercontent.com/UvFYQXC2HxRH8MosoFArk-zC_2S2btZEYovt3TvowPpcQr1R_lQyi-IPJKoTO5O4eRxKsmuDbQ9r3gmrz4fWYfrBV4lVEi7F2m_q_b8JXqKyVdohSisfZ6SwSvlEfecAhJPp5oFfwhZc_4YucvQn34l8PEHiydnkObghCHvFLPC016NB9ty2eAvfcaWGXY2d1nujoUyjMKFBOaqr5Lx4Eod7-TT_w1wRNb_J31OWQ1pSl6EUjGLLtMzDuakrqy1ECa1hgVp8GwE3JrDNqdVB-VN4NM55d7lCoZ03KlixQ8BOgAzzcNSXO-GxkqiHoJw-8gbujFPFcyY6OFV9ta6IX-CtRwkTGXM98VLCRE4WScuSDmIqZ4rvWt5WIwfQaAGQJMFoXTeQBShKiQryav7wNo5rXRDZ3i668hKNu3jOs6zyh2YnxHbTmVF0neCtDNiwGcREkNCXJwwnkcMwyTV9lEqhpknrVLh588EpUx2BQNPwkPzag2ZrtxYJfXlhvsx60fOzCRtoOIDdCgSLfCxvksx4vB7S9uSDr2Fud2OmhSGBcQqxurfHKPV5Ngri6HP00v8orc9l7Xi6VAegI2eDIjGjbEEOfJ-w8BGIlldETQ1l_ZrdxwSzEw=w1864-h1398-no" alt=""></p> </div> <div><p>Engagement</p> </div> <div><p><a href="https://geosprocket.blogspot.com/2014/01/redistricting-question-and-query.html">BTVVotes</a></p> </div> <div><p><img src="https://c1.staticflickr.com/9/8397/8683133407_c04cb0c54b_b.jpg" alt=""></p> </div> <div><p><a href="">Humanitarian OSM Team</a></p> </div> <div><p><img src="https://wiki.openstreetmap.org/w/images/5/56/Btvcrisiscamp.jpg"/></p> </div> <div><p><img src="https://www.dropbox.com/s/j2dfs6wkeeerqn0/Screenshot%202016-12-06%2011.47.26.png?dl=1"/></p> </div> <div><p><a href="https://okfn.org/opendata/">Learn more</a></p> </div>