<commit_before>{% extends "mapApp/base.html" %}
{% load staticfiles %}
{% load geojson_tags %}

{% block title %}
Experimental charting
{% endblock %}


{% block headerCSS %}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
  <link rel="stylesheet" href="{% static 'leaflet/plugins/awesome-markers/dist/leaflet.awesome-markers.css' %}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.css">
  <style>
    /*#barWeek rect {
      stroke: none;
      fill: none;
    }*/
  </style>

{% endblock %}

{% block body %}
  <div id="pieTypes" class="text-center">
    <strong>Total Number of reports</strong>
    <a class='reset' href='javascript:pieTypes.filterAll();dc.redrawAll();' style='display: none;'>reset</a>
    <br>
  </div>

  <div id="barWeek" class="text-center">
    <strong>Reports this week</strong>
    <a class='reset' href='javascript:barWeek.filterAll();dc.redrawAll();' style='display: none;'>reset</a>
    <br>
  </div>

{% endblock %}

{% block footerJS %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
  <script type="text/javascript" src="{% static 'leaflet/plugins/awesome-markers/dist/leaflet.awesome-markers.min.js' %}" charset="UTF-8"></script>
  <script src="{% static 'mapApp/js/icons.js' %}" charset="utf-8"></script>

  <!-- <script src="{% static 'mapApp/js/viz/doughnut.js' %}" charset="utf-8"></script> -->
  <script charset="utf-8">
    data = {{ points|geojsonfeature:"report_date,date,p_type"|safe}}['features'];

    // {% for p in points %
    // console.log("{{ p.incident.incident_type|safe}}");
    // {% endfor %

    // map p_types of points to nice labe
    var labels = {
      "collision": "Collisions",
      "nearmiss": "Nearmisses",
      "hazard": "Hazards",
      "theft": "Thefts",
    }
    // map p_type to appropriate icon color
    var colorScale = d3.scale.ordinal()
      .domain(["collision", "nearmiss", "hazard", "theft"])
      .range([iconColors.collision, iconColors.nearmiss, iconColors.hazard, iconColors.theft]);

    // Define charts
    var pieTypes = dc.pieChart("#pieTypes");
    var barWeek = dc.barChart("#barWeek");


    // Pie chart for number of each type of report
    var ndx           = crossfilter(data),
        typeDimension = ndx.dimension(function(d) {return d['properties']['p_type'];}),
        countTypes    = typeDimension.group().reduceCount();

    var dayOfWeekDimension

    pieTypes
      .width(300)
      .height(300)
      .innerRadius(50)
      .dimension(typeDimension)
      .group(countTypes)
      .ordering(function(d){ return -d.value })
      .label(function(d){return labels[d.data.key];})
      .colors(colorScale.range())
      .colorAccessor(function(d){return colorScale.domain().indexOf(d.data.key);});


    // Bar chart for reports this week
    var weekdayScale = d3.scale.quantize()
        .domain([0,1,2,3,4,5,6])
        .range(moment.weekdays());

    var weekdayDimension = ndx.dimension(function(d) {return moment(d['properties']['date']).weekday()}),
        weekdayCount = weekdayDimension.group().reduce(
          function (p,v) {
            var p_type = v.properties.p_type;
            if(p_type === "collision") p.collision++;
            else if(p_type === "nearmiss") p.nearmiss++;
            else if(p_type === "hazard") p.hazard++;
            else if(p_type === "theft") p.theft++;
            return p;
          },
          function (p,v) {
            var p_type = v.properties.p_type;
            if(p_type === "collision") p.collision--;
            else if(p_type === "nearmiss") p.nearmiss--;
            else if(p_type === "hazard") p.hazard--;
            else if(p_type === "theft") p.theft--;
            return p;
          },
          function () {
            return {
              collision: 0,
              nearmiss: 0,
              hazard: 0,
              theft: 0
            };
          }
        );

    barWeek
      .width(700)
      .height(300)
      .margins({top: 10, right: 50, bottom: 30, left: 40})
      .x(d3.scale.linear().domain([-0.5,6.5]))
      .xAxisLabel("Weekday")
      .y(d3.scale.linear())
      .yAxisLabel("Count")
      .centerBar(true)
      .elasticY(true)
      .dimension(weekdayDimension)
      .group(weekdayCount, "Collisions").valueAccessor(function(d){return d.value.collision; })
      .stack(weekdayCount, "Nearmisses", function(d){ return d.value.nearmiss; })
      .stack(weekdayCount, "Hazards", function(d){ return d.value.hazard; })
      .stack(weekdayCount, "Thefts", function(d){ return d.value.theft; })
      .brushOn(true)
      .colors(colorScale.range())
      .colorAccessor(function(d){return d.layer;});

    barWeek.xAxis().tickValues([0,1,2,3,4,5,6]);
    barWeek.xAxis().tickFormat(function(v){ return weekdayScale(v); });
    barWeek.render();


    // TODO
    // Filter weekdays data to only be for this week
    // More charts..

    dc.renderAll();
    dc.redrawAll();
  </script>

{% endblock %}
<commit_msg>Adjust margins and rename barchart<commit_after>{% extends "mapApp/base.html" %}
{% load staticfiles %}
{% load geojson_tags %}

{% block title %}
Experimental charting
{% endblock %}


{% block headerCSS %}
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.css">
  <link rel="stylesheet" href="{% static 'leaflet/plugins/awesome-markers/dist/leaflet.awesome-markers.css' %}">
  <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.css">
  <style>
    /*#barWeek rect {
      stroke: none;
      fill: none;
    }*/
  </style>

{% endblock %}

{% block body %}
  <div id="pieTypes" class="text-center">
    <strong>Total Number of reports</strong>
    <a class='reset' href='javascript:pieTypes.filterAll();dc.redrawAll();' style='display: none;'>reset</a>
    <br>
  </div>

  <div id="barWeek" class="text-center">
    <strong>Reports Summary by Weekday</strong>
    <a class='reset' href='javascript:barWeek.filterAll();dc.redrawAll();' style='display: none;'>reset</a>
    <br>
  </div>

{% endblock %}

{% block footerJS %}
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.2/d3.min.js" charset="utf-8"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/crossfilter/1.3.11/crossfilter.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/dc/1.7.3/dc.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.8.4/moment.min.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/0.7.3/leaflet.js"></script>
  <script type="text/javascript" src="{% static 'leaflet/plugins/awesome-markers/dist/leaflet.awesome-markers.min.js' %}" charset="UTF-8"></script>
  <script src="{% static 'mapApp/js/icons.js' %}" charset="utf-8"></script>

  <!-- <script src="{% static 'mapApp/js/viz/doughnut.js' %}" charset="utf-8"></script> -->
  <script charset="utf-8">
    data = {{ points|geojsonfeature:"report_date,date,p_type"|safe}}['features'];

    // {% for p in points %
    // console.log("{{ p.incident.incident_type|safe}}");
    // {% endfor %

    // map p_types of points to nice labe
    var labels = {
      "collision": "Collisions",
      "nearmiss": "Nearmisses",
      "hazard": "Hazards",
      "theft": "Thefts",
    }
    // map p_type to appropriate icon color
    var colorScale = d3.scale.ordinal()
      .domain(["collision", "nearmiss", "hazard", "theft"])
      .range([iconColors.collision, iconColors.nearmiss, iconColors.hazard, iconColors.theft]);

    // Define charts
    var pieTypes = dc.pieChart("#pieTypes");
    var barWeek = dc.barChart("#barWeek");


    // Pie chart for number of each type of report
    var ndx           = crossfilter(data),
        typeDimension = ndx.dimension(function(d) {return d['properties']['p_type'];}),
        countTypes    = typeDimension.group().reduceCount();

    var dayOfWeekDimension

    pieTypes
      .width(300)
      .height(300)
      .innerRadius(50)
      .dimension(typeDimension)
      .group(countTypes)
      .ordering(function(d){ return -d.value })
      .label(function(d){return labels[d.data.key];})
      .colors(colorScale.range())
      .colorAccessor(function(d){return colorScale.domain().indexOf(d.data.key);});


    // Bar chart for reports this week
    var weekdayScale = d3.scale.quantize()
        .domain([0,1,2,3,4,5,6])
        .range(moment.weekdays());

    var weekdayDimension = ndx.dimension(function(d) {return moment(d['properties']['date']).weekday()}),
        weekdayCount = weekdayDimension.group().reduce(
          function (p,v) {
            var p_type = v.properties.p_type;
            if(p_type === "collision") p.collision++;
            else if(p_type === "nearmiss") p.nearmiss++;
            else if(p_type === "hazard") p.hazard++;
            else if(p_type === "theft") p.theft++;
            return p;
          },
          function (p,v) {
            var p_type = v.properties.p_type;
            if(p_type === "collision") p.collision--;
            else if(p_type === "nearmiss") p.nearmiss--;
            else if(p_type === "hazard") p.hazard--;
            else if(p_type === "theft") p.theft--;
            return p;
          },
          function () {
            return {
              collision: 0,
              nearmiss: 0,
              hazard: 0,
              theft: 0
            };
          }
        );

    barWeek
      .width(700)
      .height(300)
      .margins({top: 10, right: 10, bottom: 20, left: 35})
      .x(d3.scale.linear().domain([-0.5,6.5]))
      // .xAxisLabel("Weekday")
      .y(d3.scale.linear())
      .yAxisLabel("Count")
      .centerBar(true)
      .elasticY(true)
      .dimension(weekdayDimension)
      .group(weekdayCount, "Collisions").valueAccessor(function(d){return d.value.collision; })
      .stack(weekdayCount, "Nearmisses", function(d){ return d.value.nearmiss; })
      .stack(weekdayCount, "Hazards", function(d){ return d.value.hazard; })
      .stack(weekdayCount, "Thefts", function(d){ return d.value.theft; })
      .brushOn(true)
      .colors(colorScale.range())
      .colorAccessor(function(d){return d.layer;});

    barWeek.xAxis().tickValues([0,1,2,3,4,5,6]);
    barWeek.xAxis().tickFormat(function(v){ return weekdayScale(v); });
    barWeek.render();


    // TODO
    // Filter weekdays data to only be for this week
    // More charts..

    dc.renderAll();
    dc.redrawAll();
  </script>

{% endblock %}

{'fraction_non_alphanumeric': 0.18422260997336762, 'fraction_numerical': 0.014142712829460924, 'mean_word_length': 2.795747647263855, 'pattern_counts': {'":': 8, '<': 79, '<?xml version=': 0, '>': 79, 'https://': 14, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '1071475', 'n_tokens_mistral': 3898, 'n_tokens_neox': 3685, 'n_words': 631}