index.html

{% extends '_base.html' %}

{% block css %}
  {{ super() }}
  <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
  <link rel="stylesheet" type="text/css" href="css/convictions.css">
  <script src="js/modernizr.custom.91127.js"></script>
{% endblock css %}

{% block content %}

<div id="cover-page">
  <div class="bg-img"></div>
  <div class="bg-shade">
      <h1>{{ title }}</h1>
  </div>
  <div class="bg-clear"></div>
</div>

{% include "_credit_bar.html" %}

<div class="slides">
{% for section in sections %}
  <section id="{{ section.id }}">
  {% for slide in slides %}
  {% if slide.section_id == section.id %}
  <section id="{{ slide.id }}" class="{% if slide.class %}{{ slide.class }}{% endif %}">
    {% if slide.show_title %}<h2>{{ slide.title }}</h2>{% endif %}
    {% if slide.id == "explore-data" or slide.id == "about-data" %}
    {{ render_file("slides/{0}.html".format(slide.id))|safe }}
    {% else %}
    {{ render_file("slides/{0}.md".format(slide.id))|markdown }}
    {% endif %}
  </section>
  {% endif %}
  {% endfor %}
  </section>
{% endfor %}
</div>

{% endblock content %}

{% block library_scripts %}
{{ super() }}
<script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.6.0/underscore-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/backbone.js/1.1.2/backbone-min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>
{% endblock %}

{% block scripts %}
<script src="js/convictions.js"></script>
<script src="js/convictions-charts.js"></script>
<script>
$(function() {
  // Data and URLs to data
  var DATA_BASE_URL = 'data';
  var COMMUNITY_AREAS_URL = DATA_BASE_URL + '/community_areas.json';
  var COMMUNITY_AREA_TOP_CHARGES = {{ top_charges_by_community_area|community_area_top_charge_json|safe }};
  var BORDERS_URL = DATA_BASE_URL + '/chicago_cook_borders.json';
  var SUBURBS_URL = DATA_BASE_URL + '/suburbs.json';
  var CONVICTIONS_BY_COMMUNITY_AREA_AGE_18_24_URL = DATA_BASE_URL + '/convictions_by_community_area_18_24.json';
  var CONVICTIONS_BY_AGE_URL = DATA_BASE_URL + '/convictions_by_age.json';

  var CONVICTIONS_BY_TYPE = [{"value": {{ statistics.convictions_violent_index.value|safe }}, "label": "Violent Index Crimes"}, {"value": {{ statistics.convictions_property_index.value|safe }}, "label": "Property Index Crimes"}, {"value": {{ statistics.convictions_drug.value|safe }}, "label": "Drug Crimes"}];
  var CONVICTIONS_DRUG_BY_CLASS = {{ drug_by_class|drug_category_json|safe }};

  // Slugs for drug charge classes in above data, in order of
  // increasing severity
  var DRUG_CHARGE_CLASSES = [
    'unkwn_class',
    'no_class',
    'misd_c',
    'misd_b',
    'misd_a',
    'felony_4',
    'felony_3',
    'felony_2',
    'felony_1',
    'felony_x'
  ];

  var DRUG_CLASS_COLORS = [
    '#66c2a5',
    '#fc8d62',
    '#8da0cb',
    '#e78ac3',
    '#a6d854',
    '#ffd92f',
    '#e5c494',
    '#b3b3b3'
  ];

  var DRUG_TYPES = [
    'other_drug',
    'amphetamine',
    'heroin',
    'cannabis',
    'cocaine',
    'pcp',
    'lsd',
    'meth',
    'ecstasy',
    'no_drug',
    'sched_1_2',
    'ketamine',
    'barbituric',
    'steroids',
    'unkwn_drug',
    'morphine'
  ];

  var DRUG_TYPE_COLORS = [
    '#a6cee3',
    '#1f78b4',
    '#b2df8a',
    '#33a02c',
    '#fb9a99',
    '#e31a1c',
    '#fdbf6f',
    '#ff7f00',
    '#cab2d6',
    '#6a3d9a',
    '#ffff99',
    '#b15928',
    '#8dd3c7',
    '#ffffb3',
    '#bebada'
  ];

  var DOMESTIC_MALE = {{ statistics.domestic_male|json|safe }}; 
  var DOMESTIC_FEMALE = {{ statistics.domestic_female|json|safe }};
  var GLOSSARY = {{ glossary|json|safe }};
  var POPOUTS = {{ popouts|json|safe }};

  var renderChart = Convictions.renderChart;

  /**
   * Size the map container to the full height of the window
   */
  function sizeMapContainer(el) {
    var height = $(window).height() - $('#top-nav').height();
    $(el).height(height);
  }

  sizeMapContainer('#your-city-map-container');
  sizeMapContainer('#top-charges-map-container');
  var communityAreas = new Convictions.ConvictionGeoJSONCollection();
  var suburbs = new Convictions.ConvictionGeoJSONCollection();
  var borders = new Convictions.GeoJSONCollection();

  var chicagoMap = new Convictions.ChicagoMapView({
    collection: communityAreas,
    suburbsCollection: suburbs,
    bordersCollection: borders,
    el: '#your-city-map-container'
  });

  var topChargeMap = new Convictions.CategoryMapView({
    collection: communityAreas,
    joinProperties: COMMUNITY_AREA_TOP_CHARGES,
    joinAttr: 'number',
    defaultFillProperty: 'top_charge',
    defaultFillLabel: "Most Common Charge",
    el: '#top-charges-map-container',
    // http://colorbrewer2.org/?type=qualitative&scheme=Set1&n=6
    colors: ['rgb(228,26,28)','rgb(55,126,184)','rgb(77,175,74)','rgb(152,78,163)','rgb(255,127,0)','rgb(255,255,51)'],
    popupTemplate: _.template("<%= name %>" +
      "<ul>" +
      "<li>Most Common Charge: <%= top_charge %>" +
      "<li>Most Common Charge Count: <%= top_charge_count %>" +
      "<li>Most Common Charge Percent: <%= top_charge_pct %>" +
      "</ul>"
    )
  });

  communityAreas.url = COMMUNITY_AREAS_URL;
  suburbs.url = SUBURBS_URL;
  borders.url = BORDERS_URL;
  communityAreas.fetch();
  suburbs.fetch();
  borders.fetch();

  $(window).resize(_.debounce(function() {
    sizeMapContainer('#your-city-map-container');
    chicagoMap.invalidateSize();
    sizeMapContainer('#top-charges-map-container');
    topChargeMap.invalidateSize();
  }, 1000));

  renderChart('#charges-categories-chart', Convictions.createCategoryChart,
    CONVICTIONS_BY_TYPE);

  renderChart('#drug-charges-class-chart', Convictions.createDrugChargeChart,
    CONVICTIONS_DRUG_BY_CLASS, DRUG_CHARGE_CLASSES, DRUG_CLASS_COLORS);

  $.getJSON(CONVICTIONS_BY_AGE_URL, function(data) {
    renderChart('#convictions-by-age-chart', Convictions.createAgeChart,
      data);
    renderChart('#violent-convictions-by-age-chart', Convictions.createAgeChart,
      data, 'violent_convictions');
    renderChart('#drug-convictions-by-age-chart', Convictions.createAgeChart,
      data, 'drug_convictions');
  });


  Convictions.createCAFSexViz('#affecting-women-viz-container .viz-container', [
    {
      value: DOMESTIC_MALE.value,
      image: 'img/' + DOMESTIC_MALE.icon
    },
    {
      value: DOMESTIC_FEMALE.value,
      image: 'img/' + DOMESTIC_FEMALE.icon
    }
  ]);

  // Look for items with a 'data-term' attribute set and enable a
  // definition popover
  $('[data-term]').each(function() {
    var $el = $(this);
    var term = $el.data('term');
    var entry = GLOSSARY[term];

    $el.popover({
      content: entry.value,
      title: entry.label,
      trigger: 'click hover'
    });
  });

  // Look for items with "data-popout-id" attribute set and enable
  // an explanation popover
  $("[data-popout-id]").each(function() {
    var $el = $(this);
    var id = $el.data('popout-id');
    var entry = POPOUTS[id];

    $el.popover({
      content: entry.content,
      title: entry.title,
      trigger: 'click hover'
    });
  });

  // Update the navigation highlighting as we scroll to
  // various sections in the page
  $('body').scrollspy({target: '#top-nav'})
    .on('activate.bs.scrollspy', function (e) {
      // Set the correct hash based on the scroll position
      var $target = $(e.target);
      var $anchor = $target.find('a.slide-circle');

      // we only care about slides, not sections
      if ($anchor.length == 1) {
        var hash = $anchor.attr('href');

        // update the history object instead of the
        // location's hash, so we don't jump around
        // when we scroll backwards
        if(history.replaceState) {
            history.replaceState(null, null, hash);
        }
        else {
            location.hash = hash;
        }
      }
    });
});
</script>
{% endblock %}