index.jade

mixin stylesheet(href)
  link(type='text/css', rel='stylesheet', href=href)

mixin javascript(src)
  script(type='text/javascript', src=src)

doctype html
html
  head
    meta(charset='utf-8')
    title Canada-Wide Science Fair Results & Statistics (2005 - 2017)
    +stylesheet('bower_components/pure/pure-min.css')
    +stylesheet('bower_components/SourceSansPro/SourceSansPro.css')
    +stylesheet('css/style.css')
    +stylesheet('bower_components/open-iconic/font/css/open-iconic.min.css')
    +javascript('bower_components/d3/d3.min.js')
    +javascript('bower_components/jquery/dist/jquery.min.js')
    +javascript('bower_components/epoch/epoch.0.4.3.min.js')
  body
    script(type='text/javascript').
      function intformat(value) {
        var str = '';
        var val = value.toString();
        var len = val.length;
        for (var i = 0; i < len; i++) {
          var j = len - i - 1;
          var r = j % 3;
          if (i > 0 && r == 2) {
            str += ' ';
          }
          str += val[i];
        }
        return str;
      }
    //- Top bar
    #bar-top.pure-menu.pure-menu-open.pure-menu-horizontal
      h1.pure-menu-heading
        a(href='./') Canada Wide Science Fair Results & Statistics
          = ' '
          span (2005-2017)
    //- Fair history
    section#fair-history
      .pure-g-r
        .pure-u-1
          table.pure-table.pure-table-horizontal
            thead
              tr
                th(colspan=2) Science Fair Hosts
                th Best in Fair Winners
                th Total Prizes Awarded
            tbody
          script(type='text/javascript').
            d3.json('data/hosts.json',
              function(err, rows) {
                if (!!err) return;
                var row = d3.select('#fair-history table tbody')
                  .selectAll('tr')
                  .data(rows)
                  .enter()
                  .append('tr')
                  .each(function(d) {
                    if (d.winner && !(d.winner.name instanceof Array)) {
                      d.winner.name = [d.winner.name];
                    }
                  });
                row.append('td').text(function(d) {
                  return d.year;
                });
                var host = row.append('td');
                host.append('a')
                  .text(function(d) {
                    return d.host.name;
                  })
                  .attr('href', function(d) {
                    return d.host.url;
                  })
                  .attr('target', '_blank');
                host.append('span')
                  .text(function(d) {
                    return ' (' + d.host.location + ')';
                  });
                row.append('td').each(function(d) {
                  var node = d3.select(this);
                  if (!d.winner) {
                    node.append('span').text('TBD');
                    return;
                  }
                  d.winner.name.forEach(function(name, i) {
                    if (i > 0) {
                      node.append('span').text(', ');
                    }
                    var base_url = 'https://secure.youthscience.ca/virtualcwsf/projectdetails.php?id=';
                    node.append('a')
                      .text(name)
                      .attr('title', d.winner.project.name)
                      .attr('href', base_url + d.winner.project.id)
                      .attr('target', '_blank');
                  });
                  node.append('span')
                    .text(' (' + d.winner.province + ')');
                });
                row.append('td').text(function(d) {
                  if (typeof(d.total_prizes) === 'undefined') {
                    return 'TBD';
                  }
                  return '$' + intformat(d.total_prizes);
                });
              });
    //- Ranks
    section#ranks
      .pure-g-r
        #largest-medal-counts.pure-u-1-3
          h3
            abbr(title='Fibonacci weighted (Platinum: 5, Gold: 3, Silver: 2, Bronze: 1)') Largest Medal Counts
          table.pure-table.pure-table-horizontal
            tbody
          script(type='text/javascript').
            d3.json('data/personal-medals.json',
              function(err, rows) {
                if (!!err) return;
                var selection = d3.select('#largest-medal-counts table tbody')
                  .selectAll('tr').data(rows);
                var rank = 0;
                var funcRank = function(s) {
                  s.text(function(d) {
                    rank++;
                    return rank + '. ';
                  });
                };
                var funcName = function(s) {
                  s.select('a')
                    .text(function(d) {
                      return d.name;
                    })
                    .attr('href', function(d) {
                      var base = 'https://secure.youthscience.ca/virtualcwsf/browse.php?';
                      return base + 'name=' + d.name;
                    })
                    .attr('target', '_blank');
                };
                var funcMedals = function(s) {
                  s.each(function(d) {
                    var node = d3.select(this);
                    if (d.count > 0) {
                      node.attr('title', function() {
                        return d.type.substring(0, 1).toLocaleUpperCase()
                            + d.type.substring(1);
                      });
                      node.text(d.count + ' ');
                      node.append('span').attr('class', 'medal ' + d.type);
                    } else {
                      node.text('');
                      node.select('*').remove();
                    }
                  });
                };
                var row = selection.enter()
                  .append('tr');

                row.append('td').call(funcRank);

                var name = row.append('td');
                name.append('a');
                name.call(funcName);

                var medals = row.selectAll('td.medal')
                  .data(function(d) {
                    return d.medals;
                  });
                medals.enter()
                  .append('td')
                  .attr('class', 'medal');
                medals.call(funcMedals);
              }
            );
        #provincial-averages.pure-u-1-3
          h3 Provincial Averages
            select
              option(value=2017, selected) 2017
              option(value=2016) 2016
              option(value=2015) 2015
              option(value=2014) 2014
              option(value=2013) 2013
              option(value=2012) 2012
          table.pure-table.pure-table-horizontal
            tbody
          script(type='text/javascript').
            d3.json('data/provincial-averages.json',
              function(err, rows) {
                if (!!err) return;
                // Sort and calculate rank
                for (var key in rows) {
                  var current = rows[key];
                  current.sort(function(a, b) {
                    var cmp = d3.descending(a.average, b.average);
                    if (cmp != 0) {
                      return cmp;
                    }
                    return d3.descending(a.province.name, b.province.name);
                  });
                  for (var i = 0; i < current.length; i++) {
                    var rank;
                    if (i == 0) {
                      rank = 1;
                    } else {
                      rank = current[i - 1].rank;
                      if (current[i].average != current[i - 1].average) {
                        rank++;
                      }
                    }
                    current[i].rank = rank;
                  }
                }
                var select = $('#provincial-averages select');
                var redraw = function(year) {
                  var data = rows[year];
                  var selection = d3.select('#provincial-averages table tbody')
                    .selectAll('tr')
                    .data(data);

                  var funcRank = function(s) {
                    s.text(function(d) {
                      return d.rank + '. ';
                    });
                  };
                  var funcProvince = function(s) {
                    s.select('a').text(function(d) {
                      return d.province.name;
                    })
                    .attr('href', function(d) {
                      var base = 'https://secure.youthscience.ca/virtualcwsf/browse.php?year=';
                      return base + year + '&province=' + d.province.id;
                    })
                  };
                  var funcAverage = function(s) {
                    s.text(function(d) {
                      return '$' + intformat(d.average);
                    });
                  };

                  selection.select('td:nth-child(1)').call(funcRank);
                  selection.select('td:nth-child(2)').call(funcProvince);
                  selection.select('td:nth-child(3)').call(funcAverage);

                  var row = selection.enter()
                    .append('tr');
                  row.append('td').call(funcRank);
                  var province = row.append('td');
                  province.append('a');
                  province.call(funcProvince);
                  row.append('td').call(funcAverage);
                };
                redraw(select.val());
                select.change(function() {
                  redraw($(this).val());
                });
              }
            );
        #provincial-medals.pure-u-1-3
          h3
            abbr(title='Platinum-first weighted (Platinum > Gold > Silver > Bronze)') Provincial Medals
            select
              option(value=2017, selected) 2017
              option(value=2016) 2016
              option(value=2015) 2015
              option(value=2014) 2014
              option(value=2013) 2013
              option(value=2012) 2012
          table.pure-table.pure-table-horizontal
            tbody
          script(type='text/javascript').
            d3.json('data/provincial-medals.json',
              function(err, rows) {
                if (!!err) return;
                // Sort and calculate rank
                for (var key in rows) {
                  var current = rows[key];
                  current.sort(function(a, b) {
                    for (var i = 0; i < a.medals.length; i++) {
                      var p = d3.descending(a.medals[i].count, b.medals[i].count);
                      if (p != 0) {
                        return p;
                      }
                    }
                    return d3.descending(a.province.name, b.province.name);
                  });
                  for (var i = 0; i < current.length; i++) {
                    var rank;
                    if (i == 0) {
                      rank = 1;
                    } else {
                      var m = 0;
                      rank = current[i - 1].rank;
                      for (var j = 0; j < current[i].medals.length; j++) {
                        if (current[i].medals[j].count == current[i - 1].medals[j].count) {
                          m++;
                        }
                      }
                      if (m != current[i].medals.length) {
                        rank++;
                      }
                    }
                    current[i].rank = rank;
                  }
                }
                var select = $('#provincial-medals select');

                var redraw = function(year) {
                  var selection = d3.select('#provincial-medals table tbody')
                    .selectAll('tr')
                    .data(rows[year]);

                  var funcRank = function(s) {
                    s.text(function(d) {
                      return d.rank + '. ';
                    });
                  };
                  var funcProvince = function(s) {
                    s.select('a')
                      .text(function(d) {
                        return d.province.name;
                      })
                      .attr('href', function(d) {
                        var base = 'https://secure.youthscience.ca/virtualcwsf/browse.php?year=';
                        return base + year + '&province=' + d.province.id;
                      })
                      .attr('target', '_blank');
                  };
                  var funcMedals = function(s) {
                    s.each(function(d) {
                      var node = d3.select(this);
                      if (d.count > 0) {
                        node.attr('title', function() {
                          return d.type.substring(0, 1).toLocaleUpperCase()
                              + d.type.substring(1);
                        });
                        node.text(d.count + ' ');
                        node.append('span').attr('class', 'medal ' + d.type);
                      } else {
                        node.text('');
                        node.select('*').remove();
                      }
                    });
                  };

                  selection.select('td:nth-child(1)').call(funcRank);
                  selection.select('td:nth-child(2)').call(funcProvince);

                  selection.selectAll('td.medal').data(function(d) {
                    return d.medals;
                  }).call(funcMedals);

                  var row = selection.enter()
                    .append('tr');
                  row.append('td').call(funcRank);
                  var province = row.append('td');
                  province.append('a');
                  province.call(funcProvince);
                  var medals = row.selectAll('td.medal')
                    .data(function(d) {
                      return d.medals;
                    });
                  medals.enter()
                    .append('td')
                    .attr('class', 'medal');
                  medals.call(funcMedals);
                };
                redraw(select.val());
                select.change(function() {
                  redraw($(this).val());
                });
              }
            );
    //- Age Distribution by Year
    section#age-distribution-by-year
      .pure-g-r
        .pure-u-1
          h3 Age Distribution by Year
          .view.font-override
          script(type='text/javascript').
            d3.json('data/age-distribution-by-year.json',
              function(err, rows) {
                if (!!err) return;
                var row = d3.select('#age-distribution-by-year .view').selectAll('div')
                  .data(rows)
                  .enter()
                  .append('div')
                  .each(function(d) {
                    d.total = d.junior + d.intermediate + d.senior;
                  });
                var cell = row.append('div');
                cell.append('div').style('width', function(d) {
                  return (d.junior / d.total * 100) + '%';
                }).append('span').text(function(d) {
                  return 'Junior (' + d.junior + ')';
                });
                cell.append('div').style('width', function(d) {
                  return (d.intermediate / d.total * 100) + '%';
                }).append('span').text(function(d) {
                  return 'Intermediate (' + d.intermediate + ')';
                });
                cell.append('div').style('width', function(d) {
                  return (d.senior / d.total * 100) + '%';
                }).append('span').text(function(d) {
                  return 'Senior (' + d.senior + ')';
                });
                row.append('div').append('span').text(function(d) {
                  return d.year + ' ';
                }).append('span').text(function(d) {
                  return  '(' + d.total + ')';
                });
              });
    //- Project Categories
    section#project-categories-by-year
      .pure-g-r
        .pure-u-1
          h3 Project Categories by Year
          .view
            table.pure-table.pure-table-horizontal
          script(type='text/javascript').
            d3.json('data/project-categories.json', function(err, data) {
              if (!!err) return;
              var table = d3.select('#project-categories-by-year .view table')
              var yearRange = d3.extent(data[0].values, function(d) {
                return d.x;
              });

              var headingRow = table.append('tr');
              headingRow.append('th');
              d3.range(yearRange[0], yearRange[1] + 1).forEach(function(year) {
                headingRow.append('th').text(year);
              });

              var row = table.selectAll('tr.item')
                .data(data)
                .enter()
                .append('tr')
                .attr('class', 'item');
              row.append('th').text(function(d) {
                return d.label;
              });

              var item = row.selectAll('td.item').data(function(d) {
                return d.values;
              }).enter().append('td').attr('class', 'item');

              item.each(function(d, i, j) {
                var e = d3.select(this);
                var val = d.y;
                e.append('span').text(val);
                if (i > 0) {
                  var previous = row.data()[j].values[i - 1].y;
                  e.append('span')
                    .attr('class', 'oi')
                    .attr('data-glyph', function() {
                      if (previous == val) {
                        return 'minus';
                      }
                      return previous > val ? 'arrow-thick-bottom'
                        : 'arrow-thick-top';
                    });
                }
              });
            });
    //- Gender by Project Category
    section#gender-by-project-category
      .pure-g-r
        .pure-u-1
          h3 Gender by Project Category
            = ' '
            select
              option(value=2017, selected) 2017
              option(value=2016) 2016
              option(value=2015) 2015
              option(value=2014) 2014
              option(value=2013) 2013
              option(value=2012) 2012
              option(value=2011) 2011
          .view.categories
          script(type='text/javascript').
            d3.json('data/gender-by-project-category.json', function(err, data) {
              if (!!err) return;
              var select = $('#gender-by-project-category select');
              var chart = $('#gender-by-project-category .view').epoch({
                type: 'bar-labeled',
                axes: ['bottom'],
                margins: {top: 25, right: 5, left: 5},
                data: data[select.val()]
              });
              select.change(function() {
                var year = $(this).val()
                chart.update(data[year]);
              });
              $(window).resize(function() {
                var view = $('#gender-by-project-category .view');
                var svg = view.children('svg');
                chart.width = view.width();
                svg.width(view.width());
                chart.draw();
              });
            });

    //- Average Winnings by Project Category and Gender
    section#winnings-by-project-category-gender
      .pure-g-r
        .pure-u-1
          h3 Average Winnings by Project Category and Gender
            = ' '
            select
              option(value=2017, selected) 2017
              option(value=2016) 2016
              option(value=2015) 2015
              option(value=2014) 2014
              option(value=2013) 2013
              option(value=2012) 2012
          .view.categories
          script(type='text/javascript').
            d3.json('data/winnings-by-project-category-gender.json', function(err, data) {
              if (!!err) return;
              var select = $('#winnings-by-project-category-gender select');
              var chart = $('#winnings-by-project-category-gender .view').epoch({
                type: 'bar-labeled',
                axes: ['bottom'],
                margins: {top: 25, right: 5, left: 5},
                data: data[select.val()],
                label: function(d) {
                  return '$' + intformat(d.y);
                }
              });
              select.change(function() {
                var year = $(this).val()
                chart.update(data[year]);
              });
              $(window).resize(function() {
                var view = $('#winnings-by-project-category-gender .view');
                var svg = view.children('svg');
                chart.width = view.width();
                svg.width(view.width());
                chart.draw();
              });
            });
    //- Award Percentage by Project Category and Gender
    section#award-percentage-by-project-category-gender
      .pure-g-r
        .pure-u-1
          h3
            abbr(title='Percentage of students who won at least one award') Award Percentage
            = ' by Project Category and Gender '
            select
              option(value=2017, selected) 2017
              option(value=2016) 2016
              option(value=2015) 2015
              option(value=2014) 2014
              option(value=2013) 2013
              option(value=2012) 2012
          .view.categories
          script(type='text/javascript').
            d3.json('data/award-percentage-by-project-category-gender.json', function(err, data) {
              if (!!err) return;
              var select = $('#award-percentage-by-project-category-gender select');
              var chart = $('#award-percentage-by-project-category-gender .view').epoch({
                type: 'bar-labeled',
                axes: ['bottom'],
                margins: {top: 25, right: 5, left: 5},
                data: data[select.val()],
                label: function(d) {
                  return d.y + '%';
                }
              });
              select.change(function() {
                var year = $(this).val()
                chart.update(data[year]);
              });
              $(window).resize(function() {
                var view = $('#award-percentage-by-project-category-gender .view');
                var svg = view.children('svg');
                chart.width = view.width();
                svg.width(view.width());
                chart.draw();
              });
            });
    //- Footer
    footer
      p
        span Last updated: May 22, 2017
      p
        span
          != 'Data obtained from '
          a(href='https://secure.youthscience.ca/virtualcwsf/', target='_blank') Virtual CWSF
          != ' and '
          a(href='https://www.youthscience.ca/', target='_blank') YSF.ca
      p
        span The above data is not guaranteed to be without error and should be used only as an approximation of the actual results
      p
        a.icon(href='mailto:tim.cooper@layeh.com' title='Questions or comments')
          span.oi(data-glyph='envelope-closed')
        a.icon(href='https://github.com/layeh/cwsf-statistics', title='Project repository')
          span.oi(data-glyph='fork')