muniNow Quick Demo

muniNow Demo

muniNow aims to be a nicer NextMuni by giving users the ability to see when the soonest Muni bus is arriving at a glance.

Live demo on Bl.ocks.org

al lin, aug. 2013

<!DOCTYPE html>
<html lang="en">

<title>muniNow bl.ocks demo</title>

.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>

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