<commit_before><!DOCTYPE html>
<html lang="en">
  <head>
    <title>dc.js - Switching Time Intervals</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
  </head>
  <body>

    <div class="container">
      <script type="text/javascript" src="header.js"></script>

      <p>This example demonstrates switching between different intervals of aggregation over time.</p>
      <p>You can specify your own data source with query string parameters:
        <dl>
          <dt>data</dt><dd>URL to load</dd>
          <dt>aggregate</dt><dd>Aggregation method: <code>average</code> or <code>total</code>
          <dt>date</dt><dd>Date column name</dd>
          <dt>val</dt><dd>Value column name</dd>
        </dl>
      </p>
      <select id="interval"></select>
      <span style="font-size: large" id="counter"></span> selected.
      <br>
      <div id="test"></div>

      <script type="text/javascript" src="../js/d3.js"></script>
      <script type="text/javascript" src="../js/crossfilter.js"></script>
      <script type="text/javascript" src="../js/dc.js"></script>
      <script type="text/javascript">

        function find_query(field) {
            var regexp = new RegExp(field+'=([a-zA-Z\._-]+)');
            var find;
            return (find = regexp.exec(location.search)) ? find[1] : null;
        }
        var data = find_query('data') || 'monthly-move.csv',
            date_col = find_query('date') || 'date',
            val_col = find_query('val') || 'volume',
            aggregate = find_query('aggregate') || 'average';

        var chart = dc.barChart("#test"), counter = dc.numberDisplay('#counter');
        d3.csv(data, function(error, posts) {
            if(error)
                throw new Error(error);

            posts.forEach(function(d) {
                d[date_col] = new Date(d[date_col]);
                d[val_col] = +d[val_col];
            });

            var ndx = crossfilter(posts), dateDim, postsGroup;

            var intervals = {
                Days: d3.time.day,
                Weeks: d3.time.week,
                Months: d3.time.month,
                Years: d3.time.year
            };
            d3.select('#interval').selectAll('option')
                .data(Object.keys(intervals))
              .enter().append('option')
                .text(function(d) { return d; });
            function setup() {
                if(dateDim) {
                    dateDim.dispose();
                    group.dispose();
                }
                var interval = intervals[d3.select('#interval')[0][0].value];
                dateDim = ndx.dimension(function(d) {return interval(d[date_col]);});
                chart.xUnits(interval.range);
                group = dateDim
                    .group().reduce(
                        function(p, v) {
                            ++p.count;
                            p.total += v[val_col];
                            return p;
                        },
                        function(p, v) {
                            --p.count;
                            p.total -= v[val_col];
                            return p;
                        },
                        function() {
                            return {
                                count: 0,
                                total: 0
                            };
                        }
                    );
                switch(aggregate) {
                case 'average':
                    chart.valueAccessor(function(kv) {
                        return kv.value.total / kv.value.count;
                    });
                    break;
                case 'total':
                default:
                    chart.valueAccessor(function(kv) {
                        return kv.value.total;
                    });
                }
                chart.dimension(dateDim).group(group)
                    .render();
            }

            chart
                .width(768)
                .height(480)
                .x(d3.time.scale())
                .xUnits(d3.time.weeks)
                .margins({left: 50, top: 0, right: 0, bottom: 20})
                .elasticX(true)
                .elasticY(true)
                .clipPadding(10);
            chart.yAxis().tickFormat(d3.format('.3s'));

            var countAll = ndx.groupAll(),
                groupAll = ndx.groupAll().reduceSum(function(d) { return d[val_col]; });
            counter
                .dimension({})
                .group(groupAll);
            switch(aggregate) {
            case 'average':
                counter.valueAccessor(function(x) {
                    return x / countAll.value();
                });
                break;
            case 'total':
            default:
                counter.valueAccessor(function(x) { return x; });
            }
            d3.select('#interval').on('change', function() {
                setup();
            });
            setup();

            dc.renderAll();

        });

      </script>

    </div>
  </body>
</html><commit_msg>stylin'<commit_after><!DOCTYPE html>
<html lang="en">
  <head>
    <title>dc.js - Switching Time Intervals</title>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="../css/bootstrap.min.css">
    <link rel="stylesheet" type="text/css" href="../css/dc.css"/>
    <style>
      dl {
        margin-left: 2em;
      }
    </style>
  </head>
  <body>

    <div class="container">
      <script type="text/javascript" src="header.js"></script>

      <p>This example demonstrates switching between different intervals of aggregation over time.</p>
      <select id="interval"></select>
      <span style="font-size: large" id="counter"></span><span id="counter-text" style="display: none"> selected.</span>
      <br>
      <div id="test" style="min-height: 500px"></div>
      <div style="clear: both">
        <p>You can supply your own data source with query string parameters:
          <dl>
            <dt>data</dt><dd>URL to load</dd>
            <dt>aggregate</dt><dd>Aggregation method: <code>average</code> or <code>total</code>
              <dt>date</dt><dd>Date column name</dd>
            <dt>val</dt><dd>Value column name</dd>
          </dl>
        </p>
      </div>

      <script type="text/javascript" src="../js/d3.js"></script>
      <script type="text/javascript" src="../js/crossfilter.js"></script>
      <script type="text/javascript" src="../js/dc.js"></script>
      <script type="text/javascript">

        function find_query(field) {
            var regexp = new RegExp(field+'=([a-zA-Z\._-]+)');
            var find;
            return (find = regexp.exec(location.search)) ? find[1] : null;
        }
        var data = find_query('data') || 'monthly-move.csv',
            date_col = find_query('date') || 'date',
            val_col = find_query('val') || 'volume',
            aggregate = find_query('aggregate') || 'average';

        var chart = dc.barChart("#test"), counter = dc.numberDisplay('#counter');
        d3.csv(data, function(error, posts) {
            if(error)
                throw new Error(error);

            posts.forEach(function(d) {
                d[date_col] = new Date(d[date_col]);
                d[val_col] = +d[val_col];
            });

            var ndx = crossfilter(posts), dateDim, postsGroup;

            var intervals = {
                Days: d3.time.day,
                Weeks: d3.time.week,
                Months: d3.time.month,
                Years: d3.time.year
            };
            d3.select('#interval').selectAll('option')
                .data(Object.keys(intervals))
              .enter().append('option')
                .text(function(d) { return d; });
            function setup() {
                if(dateDim) {
                    dateDim.dispose();
                    group.dispose();
                }
                var interval = intervals[d3.select('#interval')[0][0].value];
                dateDim = ndx.dimension(function(d) {return interval(d[date_col]);});
                chart.xUnits(interval.range);
                group = dateDim
                    .group().reduce(
                        function(p, v) {
                            ++p.count;
                            p.total += v[val_col];
                            return p;
                        },
                        function(p, v) {
                            --p.count;
                            p.total -= v[val_col];
                            return p;
                        },
                        function() {
                            return {
                                count: 0,
                                total: 0
                            };
                        }
                    );
                switch(aggregate) {
                case 'average':
                    chart.valueAccessor(function(kv) {
                        return kv.value.total / kv.value.count;
                    });
                    break;
                case 'total':
                default:
                    chart.valueAccessor(function(kv) {
                        return kv.value.total;
                    });
                }
                chart.dimension(dateDim).group(group)
                    .render();
            }

            chart
                .width(768)
                .height(480)
                .x(d3.time.scale())
                .xUnits(d3.time.weeks)
                .margins({left: 50, top: 0, right: 0, bottom: 20})
                .elasticX(true)
                .elasticY(true)
                .clipPadding(10);
            chart.yAxis().tickFormat(d3.format('.3s'));

            var countAll = ndx.groupAll(),
                groupAll = ndx.groupAll().reduceSum(function(d) { return d[val_col]; });
            counter
                .dimension({})
                .group(groupAll);
            switch(aggregate) {
            case 'average':
                counter.valueAccessor(function(x) {
                    return x / countAll.value();
                });
                break;
            case 'total':
            default:
                counter.valueAccessor(function(x) { return x; });
            }
            d3.select('#interval').on('change', function() {
                setup();
            });
            counter.on('postRender', function () {
                d3.select('#counter-text').style('display', 'inline');
            });
            setup();

            dc.renderAll();

        });

      </script>

    </div>
  </body>
</html>
{'fraction_non_alphanumeric': 0.1424318541259652, 'fraction_numerical': 0.0066052656061028935, 'mean_word_length': 1.2349272349272349, 'pattern_counts': {'":': 0, '<': 121, '<?xml version=': 0, '>': 121, 'https://': 0, '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': '3943100', 'n_tokens_mistral': 3005, 'n_tokens_neox': 2798, 'n_words': 523}