States will adjust in size relative to the width of the container div, which allows SVG elements to be appropriately sized regardless of device size or screen resolution, making it a good way to integrate D3 and Bootstrap.
Click "Open in a new window", change the size of your browser window, and the states will scale with it. *Will not work in the standard bl.ocks.org view
Please let me know if there is a better/native way to do this!
| Slides: http://www.johnjcz.com/presentations/foss4g2013/ | |
| Code: https://github.com/jczaplew/foss4gna_examples | |
| Truck Driver example: http://midamericafreight.org/rfs_maps/drivershortage | |
| EIA example: http://midamericafreight.org/rfs_maps/eia |
| ## Script to scrape all nuclear powerplant data from the EIA database | |
| ## and create a CSV | |
| ## Also requires an EIA API key, which you can register for here http://www.eia.gov/beta/api/register.cfm | |
| ## John J Czaplewski | jczaplew@gmail.com | May, 2013 | |
| import urllib2 | |
| import json |
| Setup: | |
| Node running on :8080 | |
| Apache running on :80 | |
| Using Apache mod_proxy to forward application requests to :8080 | |
| Symptoms | |
| On client: | |
| 1. Proxy Error | |
| The proxy server received an invalid response from an upstream server. |
| <!DOCTYPE html> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <link href="//netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.no-icons.min.css" rel="stylesheet"/> | |
| </head> | |
| <body> | |
| <div style="padding:20px;"> | |
| <p>Standard Bootstrap typeahead</p><input placeholder='Type a country' type='text' size='22' name='countries' data-provide='typeahead'/> |
| var records = { | |
| "records": [ | |
| {"oid":75,"typ":"col","lng":-95.3478,"lat":37.2236,"prc":"LS","nam":"West side of U.S. 59","rid":[12]}, | |
| {"oid":76,"typ":"col","lng":-94.7081,"lat":37.8397,"prc":"LS","nam":"Former RR cut at Formation Type Section (Fort Scott Fm., Bourbon Co., Kansas)","rid":[12]}, | |
| {"oid":77,"typ":"col","lng":-94.7039,"lat":37.8586,"prc":"MS","nam":"Abandoned strip mine (Fort Scott Fm., Bourbon Co., KS)","rid":[12]}, | |
| {"oid":82,"typ":"col","lng":-94.7864,"lat":37.7858,"prc":"MS","nam":"Jubilee quarry (Pawnee Fm., Bourbon Co., KS)","rid":[12]}, | |
| {"oid":83,"typ":"col","lng":-95.2039,"lat":37.2003,"prc":"MS","nam":"Labette Southwest (Pawnee Fm., Labette Co., KS)","rid":[12]}, | |
| {"oid":84,"typ":"col","lng":-95.2767,"lat":37.0986,"prc":"MS","nam":"Ellis school (Pawnee Fm., Labette Co., KS)","rid":[12]}, | |
| {"oid":85,"typ":"col","lng":-94.75,"lat":37.7858,"prc":"MS","nam":"Lake Fort Scott (Pawnee Fm., Bourbon Co., KS)","rid":[12]}, | |
| {"oid":94,"typ":"col","lng":-95.1689,"lat":37.4933,"prc":"MS","nam":"East side o |
| <!DOCTYPE html> | |
| <head> | |
| <style> | |
| body { | |
| text-align:center; | |
| } | |
| #clock { | |
| font-family:arial; | |
| font-size:2em; | |
| font-weight:bold; |
| <!DOCTYPE html> | |
| <meta charset="utf-8"> | |
| <style> | |
| body { | |
| background: #fcfcfa; | |
| height: 500px; | |
| position: relative; | |
| width: 960px; | |
| } | |
| #projection-menu { |
An updated version of https://gist.github.com/jczaplew/6453048 or http://bl.ocks.org/jczaplew/6453048 using the logic from this example http://mbostock.github.io/d3/talk/20111018/azimuthal.html