index.html

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

  <head>
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta http-equiv="content-type" content="text/html; charset=utf-8">
  <!-- Enable responsiveness on mobile devices-->
  <meta name="viewport" content="width=device-width, initial-scale=0.5, maximum-scale=1.0, user-scalable=yes" />

  <title>
    
      San Francisco Congestion Dashboard &middot; SFCTA Prospector
    
  </title>

  <!-- Icons -->
  <link rel="apple-touch-icon-precomposed" sizes="144x144" href="/assets/sfcta-logo-144.png">
  <link rel="shortcut icon" href="/assets/favicon.ico" type="image/vnd.microsoft.icon" />

  <!-- RSS -->
  <link rel="alternate" type="application/rss+xml" title="RSS" href="/atom.xml">

  <!-- LEAFLET -->
  <link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"></script>
  <!-- LEAFLET PATTERN -->
  <script src="https://teastman.github.io/Leaflet.pattern/leaflet.pattern.js"></script>
  <!-- LEAFLET POLYLINE OFFSET -->
  <script src="https://unpkg.com/leaflet-polylineoffset/leaflet.polylineoffset.js"></script>
  <!-- LEAFLET TEXTPATH-->
  <script src="https://cdn.jsdelivr.net/npm/leaflet-textpath@1.2.0/leaflet.textpath.min.js"></script>

  <!-- VUE -->
  <script src="https://cdn.jsdelivr.net/npm/vue@2.6.14"></script>
  <!-- use the latest vue-select release -->
  <script src="https://unpkg.com/vue-select@latest"></script>
  <link rel="stylesheet" href="https://unpkg.com/vue-select@latest/dist/vue-select.css">
  
  <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vue-slider-component@latest/theme/antd.css">

  <!-- MAPBOX GL -->
  <script src='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
  <link href='https://api.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />

  <!-- SEMANTIC UI -->
  <link rel="stylesheet" type="text/css" href="/assets/semantic/semantic.min.css">
  <script
    src="https://code.jquery.com/jquery-3.1.1.min.js"
    integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
    crossorigin="anonymous"></script>
  <script src="/assets/semantic/semantic.min.js"></script>

  <!-- MORRIS CHARTS -->
  <link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">
  <script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.0/raphael-min.js"></script>
  <script src="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.min.js"></script>
  
  <!-- CHROMA -->
  <script src="https://cdnjs.cloudflare.com/ajax/libs/chroma-js/1.3.6/chroma.min.js"></script>
  
  <!-- D3 -->
  <script src="https://d3js.org/d3.v3.min.js"></script>
  <script src="https://d3js.org/d3-array.v1.min.js"></script>
  <script src="https://d3js.org/d3-scale.v2.min.js"></script>
  <!-- Simple Statistics -->
  <script src='https://unpkg.com/simple-statistics@7.0.2/dist/simple-statistics.min.js'></script>
  
  <!-- IONICONS -->
  <link rel="stylesheet" href="https://code.ionicframework.com/ionicons/1.5.2/css/ionicons.min.css">
  <link rel="stylesheet" href="/assets/ionicons/leaflet.awesome-markers.css">
  <script src="/assets/ionicons/leaflet.awesome-markers.min.js"></script>

  <!-- Site CSS -->
  <link rel="stylesheet" href="/assets/css/poole.css">
  <link rel="stylesheet" href="/assets/css/syntax.css">
  <link rel="stylesheet" href="/assets/css/sfcta.css">

  <!-- GOOGLE ANALYTICS -->
  <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async src="https://www.googletagmanager.com/gtag/js?id=G-X2VNXNBDG1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
  
    gtag('config', 'G-X2VNXNBDG1');
  </script>

  <!-- Google reCAPTCHA -->
  <script src="https://www.google.com/recaptcha/api.js?onload=vueRecaptchaApiLoaded&render=explicit" async defer></script>
  <script src="https://unpkg.com/vue-recaptcha@latest/dist/vue-recaptcha.min.js"></script>

  <!-- Page CSS -->
  
    
      <link rel="stylesheet" href="/assets/css/main.css">
    
      <link rel="stylesheet" href="/assets/css/standalone.css">
    
  

  <!-- Google fonts -->
  <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Open+Sans|PT+Sans:400,400italic,700">
  <link href="https://fonts.googleapis.com/css?family=Alegreya+SC:900i|Merriweather|Oleo+Script+Swash+Caps:700" rel="stylesheet">

</head>


  <body>
    <div class="container">
      <div id="container">

  <div id="slide-panel" v-bind:class="{ shrunken: isPanelHidden}">
    <div id="layer-widgets">
      <button class="ui tiny green icon button"
              v-on:click="clickedShowHide">
              <i class="angle double icon"
              v-bind:class="{ left: isPanelHidden, right: !isPanelHidden}"></i>
      </button>
    </div>
  </div> 

  <div id="panel" v-bind:class="{ shrunken: isPanelHidden}">
      <div id="preheader">
        <hr/>
        <h3 class="apptitle">SAN FRANCISCO CONGESTION DASHBOARD</h3>
        <div id="helpbar">
            <button class="ui mini right labeled icon violet button"
                    v-on:click="clickToggleHelp">
                    <i class="help circle icon"></i>
                    What is this?
            </button>
            &nbsp;
            <button class="ui mini right labeled icon violet button"
                    v-on:click="this.window.open('https://www.sfcta.org/projects/congestion-management-program#sfcongestion','_blank')">
                    <i class="arrow right icon"></i>
                    Learn More
            </button>
            <hr/>
           </div>

          <div id="picker">
            <div id="vizbuttons" class="ui vertical buttons">
              <button v-for="item in vizlist"
                    v-on:click="clickViz(item)"
                    class="ui grey button"
                    v-bind:class="{ active: item==selectedViz, yellow: item==selectedViz }">
                    ${vizinfo[item]['TXT']}
              </button>
            </div>
          </div>
      </div>
      <div id="header">
          <div id="stats-panel">
            <hr style="margin-bottom:-5px;" />
            <div id="chartinfo"><h3 style="font-size: 22px;">${chartTitle}</h3></div>
            <div id="geoinfo"><h5>${chartSubtitle}</h5></div>
            <div id="longchart">
                <div class="ui active dimmer">
                  <div class="ui text loader">Loading</div>
                </div>
            </div>
          </div>
      </div>

      <div class="logo">
        <div class="pickers">
        
            <div v-if="isHRActive & !isTPHidden">
                <h5 style="margin-top:10px">CHOOSE TIME OF DAY:</h5>
                <vue-slider v-bind="hrSlider" 
                    v-model="hrValue"
                    style="width:85%; margin-right:5px; float:left">
                </vue-slider>
                <button class="mini ui inverted button"
                    style="padding: 5px 10px; margin-left: 10px;"
                    v-on:click="clickTODPlay" 
                    v-bind:class="{ active: isPlayTODActive, red: isPlayTODActive}">
                    <div v-if="isPlayTODActive"><b>&#2405;</b></div>
                    <div v-else>&#9658;</div>
                </button>
            </div>
        
            <h5 style="margin-top:20px">CHOOSE MONTH:</h5>
            <vue-slider v-bind="timeSlider" v-model="sliderValue"
                style="width:85%; margin-right:5px; float:left">
            </vue-slider>
            <button class="mini ui inverted button"
                    style="padding: 5px 10px; margin-left: 10px;"
                    v-on:click="clickMonPlay" 
                    v-bind:class="{ active: isPlayMonActive, red: isPlayMonActive}">
                    <div v-if="isPlayMonActive"><b>&#2405;</b></div>
                    <div v-else>&#9658;</div>
            </button>
			<div v-if="!isTPHidden">
				<h5 style="margin-top:3px">CHOOSE TIME PERIOD:</h5>
				<button v-on:click="pickAM"
						v-bind:class="{ active: isAMActive, yellow: isAMActive}"
						 class="mini ui grey button">
						 AM</button>
				<button v-on:click="pickPM"
						v-bind:class="{ active: isPMActive, yellow: isPMActive }"
						 class="mini ui grey button">
						 PM</button>
                <button v-on:click="pickHR"
						v-bind:class="{ active: isHRActive, yellow: isHRActive }"
						 class="mini ui grey button">
						 1-Hour</button>         
			</div>
        </div>
        <br>

        <hr/>

        <div class="logo">
            <a class="agency-link" target="_blank" href="https://www.sfcta.org">
              <img class="img-logo" src="/assets/SFCTA Logo dark-background.svg" width="80%">
            </a>
        </div>
      </div>
    </div>

  <div id="helpbox" v-if="showHelp" class="ui segment">
  <div v-cloak> <!-- hides everything until Vue finished loading -->
        <h2 style="margin-bottom:0px;">San Francisco Congestion Dashboard</h2>
        <hr style="margin-bottom:5px;margin-top:5px"/>
        Explore monthly changes in congestion and vehicle miles traveled (VMT) in San Francisco. Automobile Level-of-Service (LOS) and Vehicle Miles Traveled (VMT) per mile are presented for key segments in the transportation network. In addition, changes in these metrics relative to pre-COVID conditions can be viewed.</br>
        LOS is calculated using automobile speed data from INRIX Roadway Analytics. Speeds are monthly averages calculated using data from Tuesday through Thursday of each week.	VMT estimates are derived using imputed vehicle volumes from observed speeds and Volume Delay Functions (VDF). Total peak period VMT for key segments is expanded to Daily Citywide estimate by applying expansions factors derived from historic Caltrans VMT estimated for San Francisco. The data on this website are updated every month.</br>
        Also see the <a href="https://cmp.sfcta.org">Congestion Management Program Map</a> to explore biennial changes in automobile congestion and transit speeds in San Francisco on the Congestion Management Program road network.
        
        <ul>
        <li><b>Auto Level-of-Service (LOS)</b> grades road segments by vehicle delay with "A" describing free flow,
        and "F" describing bumper-to-bumper conditions.</li>
        <li><b>Speed Change Relative to Pre-COVID</b> shows the percent difference between average speed
        of a segment and the speed under pre-COVID conditions (from the week of 3rd March 2020). Lower and negative values imply that 
        speeds have droppped back to pre-COVID levels.</li>
		<li><b>Vehicle Miles Traveled (VMT)</b> is normalized by the length of the segment and could be interpreted as approximate average daily traffic volume.</li>
		<li><b>VMT Change Relative to Pre-COVID</b> shows the percent difference between daily VMT estimate
        of a segment and the VMT under pre-COVID conditions (from the week of 3rd March 2020). Higher and positive values imply that 
        VMT have risen back to pre-COVID levels.</li>
		</ul>

        <h2 style="margin-top:10px; margin-bottom:0px;">How to use this map</h2>
        <hr style="margin-bottom:5px;margin-top:5px"/>
        <ul>
        <li>Move the month slider to update map with data from chosen month. Click the play button to automatically cycle through months.</li>
        <li>Choose time period to update map for AM (7a-9a) peak, PM (4:30p-6:30p) peak or 1-Hour time periods.</li>
        <li>Choosing the 1-Hour period provides an additional time-of-day option to update the map for a given hour of the day.</li>
        <li>The chart on the side panel shows trends across the months when AM or PM peak periods are selected. It shows the variation across an average day when 1-Hour time period is chosen.</li>
        <li>Click on a roadway segment on the map to see segment-specific trends.</li>
        </ul>

        <div style="margin-top:20px;">
          <button v-on:click="clickToggleHelp" class="small ui right floated violet button">
            &nbsp;OK&nbsp;
          </button>

          <!--button v-on:click="this.window.open('/assets/sfcta_cmp_data_2019.zip')"
                  class="small ui right labeled icon floated yellow button"
                  style="margin-right:5px">
                  <i class="icon download"></i>
                  Download data (.zip)
          </button-->

          <button v-on:click="this.window.open('https://www.sfcta.org/projects/congestion-management-program#sfcongestion','_blank')"
                  class="small ui right floated basic violet button"
                  style="margin-right:5px">
                  Learn more&hellip;
          </button>

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

  <div id="sfmap"></div>

</div>


<script type="application/javascript" src="/bundles/cmprt.js"></script>

    </div>
  </body>

</html>