muniNow aims to be a nicer NextMuni by giving users the ability to see when the soonest Muni bus is arriving at a glance.
Powered by D3, built at Catalyst/Hack Reactor as a personal project. And many thanks to Mike and Adnan.
al lin, aug. 2013
xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1"> <title>muniNow bl.ocks demo</title> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc1/css/bootstrap.min.css" media="screen"> <script src="https://code.jquery.com/jquery-2.0.3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc1/js/bootstrap.min.js"></script> <style type='text/css'> #svg-muninow { border: 1px solid rgba(153,153,153, 0.5); width: 100%; min-height: 500px; } .center-time { font-family: helvetica, sans-serif; font-weight: bold; fill: rgba(112,158,192, 1); stroke: rgb(102,102,102, 0.75); stroke-width: 2px; } .arc-path, .dest-path { stroke: rgba(153, 153, 153, 0.10); stroke-width: 2px; cursor: pointer; } .highlighted { fill: #fc7d47; } .highlighted2 { fill: #deae8a; } .transition { fill: #deae8a; } </style> </head> <body> <div class="container"> <h1>muniNow</h1> <div class="row"> <form id="RouteForm" class="form-horizontal"> <p> <select id="RouteSelector" class="form-control input-sm"> <option value="-1">Please select your Muni line..</option> </select> </p> <p> <select id="DirectionSelector" class="form-control input-sm"></select> </p> <p> <label for="StopSelector">From:</label><select id="StopSelector" class="form-control input-sm"></select> </p> <p> <label for="DestSelector">To:</label><select id="DestSelector" class="form-control input-sm"></select> </p> <button type="button" class="btn btn-info btn-mini" id="AddRouteButton">Add Route</button> </form> </div> <div id="AdditionalInfo" class="row"><div id="UrlDiv"></div></div> <div id="ChartArea" style="max-height: 600"></div> </div> <script src="muninow-api.js"></script> <script src="muninow-forms.js"></script> <script src="muninow-d3.js"></script> <script src="muninow-init.js"></script> </body></html> Modified http://code.jquery.com/jquery-2.0.3.min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js to a secure url
Modified http://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc1/js/bootstrap.min.js to a secure url
https://code.jquery.com/jquery-2.0.3.min.js
https://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.5.1/underscore-min.js
https://cdnjs.cloudflare.com/ajax/libs/handlebars.js/1.0.0/handlebars.min.js
https://cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js
https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.0.0-rc1/js/bootstrap.min.js