mrogove.github.io/SeattleBikes.html at master · mrogove/mrogove.github.io · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
<!DOCTYPE html>
<meta charset="utf-8">
<head>
  <title>Seattle Bikes</title>
      <script src="https://d3js.org/d3.v5.min.js"></script>
      <link rel="stylesheet" type="text/css" href="SeattleBikes.css">
      <link href='https://fonts.googleapis.com/css?family=Oxygen:400,300,700' rel='stylesheet' type='text/css'>
</head>

<body>

<div id="mainContainer">
  <div id="descripTitle">
    FREMONT BRIDGE BIKE TRAFFIC VOLUME
  </div>

  <div id="time-series"></div>

  <script src="drawgraph.js"></script>

  <div id="textContent">
    <p>
      The Fremont Bridge is a drawbridge in
      <a href="https://www.seattle.gov/" target="_blank">Seattle, Washington</a>

      with clearly allocated bike lanes. The City of Seattle built a set of traffic counters in both the north- and southbound lanes. The output data from these sensors uploads to
      <a href="https://data.seattle.gov/" target="_blank">data.seattle.gov.</a>
    </p>
    <p>
      This visualization was built in D3 and derived from mbostock's
      <a href="http://bl.ocks.org/mbostock/4063318" target="_blank">calendar view d3 block,</a>
      in turn inspired by Rick Wicklin and Allison's
      <a href="https://stat-computing.org/dataexpo/2009/posters/" target="_blank">2009 Data Expo submission.</a>
      Dark squares indicate days of heavy bike traffic on the bridge, and light blue squares indicate light traffic. White squares with no outline indicate periods for which there are no data (before October, 2012, or current/future months).
      The calendar view graph used to update monthly to include the previous month's traffic, thanks to data.seattle.gov's API. It has been moved to a static file.
    </p>

    <p align="center">
      All data copyright City of Seattle. Background image courtesy of <a href="http://www.laughandpee.com/" target="_blank">Ryan McGuire and Gratisography</a>.
      Special thanks to
      <a href="http://kzh.space/" target="_blank"> Kevin Hu</a>
      and
      <a href="https://www.linkedin.com/in/nickstepro" target="_blank"> Nick Stepro</a>
      for their help in this exercise.
    </p>

 </div>
</div>
</body>