citywide-over-time.html

---
layout: default
title: Citywide Over Time
permalink: /citywide-over-time/
---
<div class="row chart-section">
  <div class="medium-24 column">

  <!-- Loop through Indicators and group by Category -->
  {% assign categories = site.data[site.year].citywide_over_time | group_by: 'Category' %}
  {% assign labels = site.data[site.year].citywide_over_time_labels %}

    <!-- Dropdown to select category-->
    <div class="category-selector small-24 column ptm pbs">
      <label for="categories">Choose a category</label>
      <select id="categories">
        <optgroup label="Categories">
          {% for category in categories %}
            <option value="{{ category.name | slugify }}">{{ category.name }}</option>
          {% endfor %}
        </optgroup>
      </select>
    </div>
    <div class="indicator-wrapper">

    <!-- Category Headings -->
    {% for category in categories %}
      <h1 id="{{ category.name | slugify }}" class="contrast {% if category.name == 'Social determinants of health' %}first-section{% else %}category-section{% endif %}">{{ category.name }}
        <a href="#{{ category.name | slugify }}" class="header-link"><i class="fa fa-link"></i></a>
      </h1>

      <!-- Indicator Heading (chart title) -->
      {% for row in category.items %}
        <h2 id="{{ row.Indicator | slugify }}" class="chart-section">{{ row.Indicator | replace: "<", "&lt;" }}
          <a href="#{{ row.Indicator | slugify }}" class="header-link"><i class="fa fa-link"></i></a>
        </h2>

        <!-- Subtitle (if present) -->
        {% if row.subTitle %}<p>{{ row.subTitle }}</p>{% endif %}
        <div class="row">
          <div class="medium-16 column">
            {% if row.dataType == 'Rate' or row.dataType == 'Count' %}{% include components/line-rate.html row=row labels=labels %}{% else %}
            {% include components/line.html row=row labels=labels %}
            {% endif %}
          </div>

          <!-- Sidebar -->
          <div class="medium-8 column end">
            <aside class="related plm-mu">
            <!-- Description of indicator & comments -->
              {% if row.description %}<span class="source"><strong>Description: </strong></span><br>
                <span class="description">{{ row.description | replace: "<", "&lt;" | markdownify }}</span>{% endif %}
              {% if row.chartComment or row.Note %}<span class="source"><strong>Note: </strong></span><br> {% endif %}
              {% if row.chartComment %}  <p class="source">{{ row.chartComment }}</p>{% endif %}
              {% if row.Note %} <p class="source">{{ row.Note }}</p>{% endif %}
                <!-- Data source(s) -->
              {% if row.dataSource %}<span class="source"><strong>Source: </strong></span><br>
                <span class="source">{{ row.dataSource | markdownify | remove: '<p>' | remove: '</p>'}} | {{ row.dataSourceYear }}</span>{% endif %}
            </aside>
          </div>
        </div>

      <!-- End of each chart section with BACK TO TOP link -->
      <div class="medium-24 column top">
        <a class="float-right" href="#top"><i class="fa fa-arrow-up"></i> <span class="to-top">back to top</span></a>
      </div>

      {% endfor %}
    {% endfor %}

    </div>
  </div>
</div>
<script>
  document.getElementById('categories').addEventListener('change', function (evt) {
    var value = this.value;
    window.location.hash = value;
  })
</script>