htmlstory.html

{% macro add_chart(chart) %}
      <div class='text-wrapper'>
        <h3 class='chart-label'>{{ chart.headline }}</h3>
        {% if chart.sublabel %}
          <p class='chart-sublabel'>{{ chart.sublabel }}</p>
        {% endif %}
        {% if chart.blurb %}
          {{ chart.blurb|markdown }}
        {% endif %}
      </div>
      <div data-chart='{{ chart.category }}' class='chart chart--{{ chart.type }}'></div>
{% endmacro %}
{% block content %}
<div class='graphic-wrapper'>
  <div class='text-wrapper'>
    {{ intro|markdown }}
  </div>
  {# MAP #}
  <div id='map' class='map'>
    <h2 class='map__header'>Percentage of bridges that are deficient</h2>
    <p class='map__sub-header'>By county</p>
  </div>
  <table class='map-table'>
    <thead>
      <tr>
        <th>County</th>
        <th class='align-right'>Total bridges</th>
        <th class='align-right'>Deficient bridges</th>
        <th class='align-right'>Percentage deficient</th>
      </tr>
    </thead>
    <tbody>
      {% for county in counties|sort(true, attribute='deficient_per') if county.chicago_area == 1 %}
        {% if county.county == "Illinois average" %}
          <tr class='map-table__illinois'>
        {% else %}
          <tr>
        {% endif %}
          <td>{{ county.county }}</td>
          <td class='align-right'>{{ county.bridges|int|int_commas }}</td>
          <td class='align-right'>{{ county.deficient|int|int_commas }}</td>
          <td class='align-right'>{{ county.deficient_per|format_percentage }}</td>
        </tr>
      {% endfor %}
    </tbody>
  </table>

  {# HISTOGRAMS #}
  <div class='text-wrapper'>
    <h2 class='histogram-header'>{{ histograms_header }}</h2>
    {{ histograms_chatter|markdown }}
  </div>
  <div class='histograms'>
    {% for chart in charts if chart.type == "histogram" %}
      {{ add_chart(chart) }}
    {% endfor %}
  </div>

  {# dot lines #}
    <div class='histograms'>
    {% for chart in charts if chart.type == "scatterline" %}
      {{ add_chart(chart) }}
    {% endfor %}
    </div>

    <div class='credits'>
      {{ sources|markdown }}
      {{ credits|markdown }}
    </div>
</div>
{% endblock content %}

{% block library_scripts %}
{# Uncomment this if you are using libraries such as jQuery #}
<script src="//{{ ROOT_URL }}/js/vendor.min.js"></script>
{% endblock %}

{% block scripts %}
{# Uncomment this if you are using custom JavaScript #}
<script src="//{{ ROOT_URL }}/js/app.min.js"></script>
<script>
(function(document) {

  window.ROOT_URL = "graphics.chicagotribune.com/bridge-ratings-in-illinois-2017";

  var CSS = [
    "//{{ ROOT_URL }}/css/styles.css"
  ];

  CSS.forEach(function(url) {
    var link = document.createElement('link');
    link.setAttribute('rel', 'stylesheet');
    link.setAttribute('href', url);
    document.head.appendChild(link);
  });
})(document);
</script>
{% endblock scripts %}