D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
andrewxhill
Full window
Github gist
cartodb workshop links
<!DOCTYPE html> <html> <head> <title>NACIS Workshop | CartoDB</title> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" /> <meta http-equiv="content-type" content="text/html; charset=UTF-8"/> <link rel="shortcut icon" href="https://cartodb.com/assets/favicon.ico" /> <style> body{ background: #333;} #list2 { position: absolute; left: 50%; margin-left: -240px; width:480px; } #list2 ol { font-style:italic; font-family:Georgia, Times, serif; font-size:24px; color:#3399FF; } #list2 ol li { } #list2 ol li p { padding:8px; font-style:normal; font-family:Arial; font-size:18px; color:#eee; border-left: 1px solid #999; } #list2 ol li p em { display:block;color: #FFF; font-size: 24px; font-weight: bold; font-style:normal;} #list2 ol li p a { color: #3399FF; text-decoration: none;} #list2 ol li p.download a { margin-left: 10px; line-height: 25px;} #list2 pre { font-size: 12px; color: #eee; margin-left: 35px;} /*#list2 ol li p.download a:visited:after { content: " (ok)"; font-size: 70%; }*/ </style> <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.css" /> <!--[if lte IE 8]> <link rel="stylesheet" href="https://libs.cartocdn.com/cartodb.js/v3/themes/css/cartodb.ie.css" /> <![endif]--> </head> <body> <div id="slides"><p> <script async class="speakerdeck-embed" data-id="81f7ece017430131ca2022b35b903a5d" data-ratio="1.33333333333333" src="//speakerdeck.com/assets/embed.js"></script> </p> </div> <div id="list2"> <ol> <li><p><em>Overview</em> Why did we build CartoDB? </p></li> <li><p><em>Application</em> What is it used for? </p></li> <li><p><em>Accounts + downloads</em> You will need Magellan accounts for this tutorial. If you haven't already, start by signing up for our normal FREE accounts at <a href="https://cartodb.com/signup" target="_blank">https://cartodb.com/signup</a><br/> <br/> If you are <i>.edu</i> email me your account name and I can get you a link to upgrade to a free Magellan plan. <br/> <br/> If you are not .edu, you need to go through the process of upgrading your account to a Magellan. The process will take a credit card, when entering your information, use the coupon code, <b>nacis-2013</b> for 4-months free.</p></li> <li><p class="download"><em>Data downloads</em> Download each of these files now: </br> <a href="https://dl.dropboxusercontent.com/u/1307405/CartoDB/workshop/ne_110m_admin_0_countries.zip">https://bit.ly/1bMAmaI</a><br/> <a href="https://dl.dropboxusercontent.com/u/1307405/CartoDB/workshop/tornadoes.zip">https://bit.ly/15ujhxa</a><br/> <a href="https://dl.dropboxusercontent.com/u/1307405/CartoDB/workshop/bestblocks/nyc_bestbikeblocks.zip">https://bit.ly/1fsb1Dq</a><br/> <a href="https://dl.dropboxusercontent.com/u/1307405/CartoDB/workshop/bestblocks/citibike_stations.zip">https://bit.ly/GLgiHs</a><br/> <a href="https://dl.dropboxusercontent.com/u/1307405/CartoDB/workshop/eric/tracking_eric.zip">https://bit.ly/17xaEi0</a><br/> </p></li> <li><p><em>Rapid tour</em> What's in the box? </p></li> <li><p><em>Importing data</em> An introduction to data types and data imports in CartoDB. <br/> Here is the direct link to the GeoJSON file for import: <br/><br/> <a href="https://github.com/nvkelso/natural-earth-vector/blob/master/zips/50m_cultural/ne_50m_urban_areas.zip" target="_blank">https://github.com/nvkelso/natural-earth-vector/blob/master/zips/50m_cultural/ne_50m_urban_areas.zip</a><br/><br/>We will also use the Shapefile in ne_110m_admin_0_countries.zip.</p></li> <li><p><em>Maps to visualizations</em> We will use the Shapefile in tornadoes.zip.</p></li> <li><p><em>Publishing & Sharing</em> Public vs Private. Links, embeds, and API methods. </p></li> <li><p><em>Editing data</em> Adding, deleting, modifying data directly on the map </p></li> <li><p><em>CartoCSS</em> Let's take a closer look at how the wizards and CartoCSS work. We will also use the CartoCSS available here, <br/><br/><a href="https://bit.ly/1886IIP" target="_blank">https://bit.ly/1886IIP</a></p></li> <li><p><em>SQL Filtering</em> Overivew of orders, limits, and where statements </p></li> <li><p><em>NYC's Best Blocks</em> Mixing data, geospatial queries, and visualizations. We will use two of the Shapefiles downloaded, nyc_bestbikeblocks.zip and citibike_stations.zip <br/><br/> SQL statement: <br/> <pre>UPDATE nyc_bestbikeblocks bb SET station_d = ( SELECT ST_Distance(the_geom::geography, bb.the_geom::geography) FROM citibike_stations ORDER BY the_geom <-> bb.the_geom LIMIT 1 )</pre> </p></li> <li><p><em>Eric Fan Club</em> We will use the file called, tracking_eric.zip. <br/><br/> First SQL statement: <br/> <pre>UPDATE tracking_eric SET day_of_year = extract(DOY FROM date_time) </pre> </p><p> Second SQL statement: <br/> <pre>SELECT ST_MakeLine(the_geom_webmercator ORDER BY date_time ASC) AS the_geom_webmercator, day_of_year FROM tracking_eric GROUP BY day_of_year</pre> </p></li> <li><p><em>CartoDB.js</em> See the library: <a href="https://github.com/CartoDB/cartodb.js">CartoDB.js</a> <br/> See the API docs: <a href="https://github.com/CartoDB/cartodb.js/blob/develop/doc/API.md">API Docs</a> <br/> Basic templates: <a href="https://developers.cartodb.com/">Templates</a> <br/> </p></li> </ol> </div> </body> </html>
https://speakerdeck.com/assets/embed.js