Снова работает старая скрипка dc.js

'use strict';
//#### Chart objects 
var bitChart = dc.compositeChart("#bitrate-move-chart");//Before dynamic Y-Axis nonzero_min used var bitChart = dc.lineChart('#bitrate-move-chart');
var bitChart2 = dc.compositeChart("#bitrate-move-chart2");//Before dynamic Y-Axis nonzero_min used var bitChart = dc.lineChart('#bitrate-move-chart');
var timeSlider = dc.barChart('#bitrate-timeSlider-chart');
var bitCount = dc.dataCount('.dc-data-count');
var bitrateTable = dc.dataTable('.dc-data-table');

//#### Creating dynamic Y axis with min/max ticks' values depending on min/max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
function nonzero_min(chart) {
    dc.override(chart, 'yAxisMin', function () {
        var min = d3.min(chart.data(), function (layer) {
            return d3.min(layer.values, function (p) {
                return p.y + p.y0;
            });
        });
        return dc.utils.subtract(min, chart.yAxisPadding());
    });
    return chart;
}

//#### 15 Min Interval - copied from https://github.com/mbostock/d3/blob/master/src/time/interval.js
var d3_date = Date;
function d3_time_interval(local, step, number) {
    function round(date) {
        var d0 = local(date), d1 = offset(d0, 1);
        return date - d0 < d1 - date ? d0 : d1;
    }
    function ceil(date) {
        step(date = local(new d3_date(date - 1)), 1);
        return date;
    }
    function offset(date, k) {
        step(date = new d3_date(+date), k);
        return date;
    }
    function range(t0, t1, dt) {
        var time = ceil(t0), times = [];
        if (dt > 1) {
            while (time < t1) {
                if (!(number(time) % dt)) times.push(new Date(+time));
                step(time, 1);
            }
        } else {
            while (time < t1) times.push(new Date(+time)), step(time, 1);
        }
        return times;
    }
    function range_utc(t0, t1, dt) {
        try {
            d3_date = d3_date_utc;
            var utc = new d3_date_utc();
            utc._ = t0;
            return range(utc, t1, dt);
        } finally {
            d3_date = Date;
        }
    }
    local.floor = local;
    local.round = round;
    local.ceil = ceil;
    local.offset = offset;
    local.range = range;
    var utc = local.utc = d3_time_interval_utc(local);
    utc.floor = utc;
    utc.round = d3_time_interval_utc(round);
    utc.ceil = d3_time_interval_utc(ceil);
    utc.offset = d3_time_interval_utc(offset);
    utc.range = range_utc;
    return local;
}
function d3_time_interval_utc(method) {
    return function (date, k) {
    try {
        d3_date = d3_date_utc;
        var utc = new d3_date_utc();
        utc._ = date;
        return method(utc, k)._;
    } finally {
        d3_date = Date;
    }
    };
}
//#### Generalization of d3.time.minute copied from- https://github.com/mbostock/d3/blob/master/src/time/minute.js
function n_minutes_interval(nmins) {
    var denom = 6e4 * nmins;
    return d3_time_interval(function (date) {
    return new d3_date(Math.floor(date / denom) * denom);
    }, function (date, offset) {
    date.setTime(date.getTime() + Math.floor(offset) * denom); // DST breaks setMinutes
    }, function (date) {
    return date.getMinutes();
    });
}

//bitChart
var min15 = n_minutes_interval(15);
//bitChart2
var min15_2 = n_minutes_interval(15);
//timeslider
var min15_3 = n_minutes_interval(15);

//### Load  data 
var data = d3.csv.parse(d3.select("pre#anotherdata").text());
//d3.csv('CHANNEL_CLUSTER_BITRATE_takeThis.csv', function (data) {
// Format CSV data
var dateFormat = d3.time.format('%Y/%m/%d/%H:%M');
var numberFormat = d3.format('.2');
data.forEach(function (d) {
d.bitdate = new Date(d.DATETIME);    //d.DATETIME = dateFormat.parse(d.DATETIME);
d.BITRATE = +d.BITRATE.match(/\d+/); //d.BITRATE = +d.BITRATE; 
});

//### Crossfilter Dimensions 
var crossFilteredData = crossfilter(data);
var all = crossFilteredData.groupAll();
// Dimension by full date
//bitChart
var dateDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//bitChart2
var dateDimension2 = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//timeSlider
var dateDimension3 = crossFilteredData.dimension(function (d) {
return d.bitdate;
});
//dropDown
var filterDimension = crossFilteredData.dimension(function (d) {
return d.bitdate;
});

//### Crossfiltered Groups
//timeSlider group
var minIntervalWeekBitrateGroup3 = dateDimension3.group(min15_3).reduceSum(function (d) {
return 10 //+d.BITRATE
});
//bitChart group-Group bitrate per week, 15 minInterval - maintain running tallies 
var bitrateWeekMinIntervalGroupMove = dateDimension.group(min15).reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
    ++p.count;
    p.BITRATE = +v.BITRATE;
    p.total += +v.BITRATE;
    p.avg = p.count ? Math.round(p.total / p.count) : 0;
    return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
    --p.count;
    p.BITRATE = +v.BITRATE;
    p.total -= +v.BITRATE;
    p.avg = p.count ? Math.round(p.total / p.count) : 0;
    return p;
},
/* initialize p */
function () {
    return {
        count: 0,
        bitrate: 0,
        total: 0,
        avg: 0
    };
}
);
//bitChart2 group
var bitrateWeekMinIntervalGroupMove2 = dateDimension2.group(min15_2).reduce(
/* callback for when data is added to the current filter results */
function (p, v) {
    ++p.count;
    p.BITRATE = +v.BITRATE;
    p.total += +v.BITRATE;
    p.avg = p.count ? Math.round(p.total / p.count) : 0;
    return p;
},
/* callback for when data is removed from the current filter results */
function (p, v) {
    --p.count;
    p.BITRATE = +v.BITRATE;
    p.total -= +v.BITRATE;
    p.avg = p.count ? Math.round(p.total / p.count) : 0;
    return p;
},
/* initialize p */
function () {
    return {
        count: 0,
        bitrate: 0,
        total: 0,
        avg: 0
    };
}
);

//### Domain limits
var minDate = dateDimension.bottom(1)[0].DATETIME;// alert(minDate);
var maxDate = dateDimension.top(1)[0].DATETIME;// alert(maxDate);
//domain limits for brush
var start = moment(new Date(minDate));
var end = moment(new Date(maxDate));
var tmp;
//max line
var maxbit = d3.max(data, function (d) { return +d["BITRATE"]; }); //alert(maxbit);
var graphSpan;
function addHours(amountHours) {
  graphSpan = amountHours;
  timeSlider.replaceFilter(dc.filters.RangedFilter(start, moment(start).add(amountHours, 'hours')));
    dc.redrawAll();
}
//dropdown copied from  <!--http://jsfiddle.net/gordonwoodhull/ewmrmu83/9/-->
d3.select('#hoursDropDown').on('change', function() {
addHours(this.value);
});

//###Graphs//bitChart

bitChart /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */
.xUnits(min15.range)  //.xUnits(d3.time.weeks)//.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)
.x(d3.time.scale().domain([new Date(minDate), new Date(maxDate)]))
.yAxisPadding('5%')     
.elasticY(true)
//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".
.rangeChart(timeSlider)
.width(450)
.height(200)
.transitionDuration(500)
.margins({ top: 30, right: 50, bottom: 100, left: 50, padding: 1 })
.mouseZoomable(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
//Render max bitrate horizontal line copied from bar-extra-line.html
.yAxisLabel("Total Bitrate per 15 minutes")
.renderlet(function (chart) {
    chart.svg().selectAll('.chart-body').attr('clip-path', null)
    chart.selectAll('g.x text')
   .attr('transform', 'translate(-10,10) rotate(315)');
})
.on('renderlet', function (chart) {
    var left_y = 10, right_y = 70; // use real statistics here!
    var extra_data = [{ x: chart.x().range()[0], y: chart.y()(left_y) }, { x: chart.x().range()[1], y: chart.y()(right_y) }];
    var line = d3.svg.line()
        .x(function (d) { return d.x; })// console.log("d.x " + d.x); 
        .y(function (d) { return maxbit; })
        .interpolate('linear');
    var chartBody = chart.select('g.chart-body');
    var path = chartBody.selectAll('path.extra').data([extra_data]);
    path.enter().append('path').attr({
        class: 'extra',
        stroke: 'red',
        id: 'extra-line'
    });
    path.attr('d', line);
    // Label the max line
    var text = chartBody.selectAll('text.extra-label').data([0]);
    text.enter().append('text')
            .attr('text-anchor', 'middle')
            .append('textPath').attr({
            class: 'extra-label',
            'xlink:href': '#extra-line',
            startOffset: '50%'
        })
        .text('Total Bitrate Max Value');      
})
// .ordinalColors('red')
// Title can be called by any stack layer.
.title(function (d) {
    var value = d.value.total ? d.value.total : d.value;
    if (isNaN(value)) {
        value = 0;
    }
   // console.log("dateFormat(d.key) " + dateFormat(d.key));
    return dateFormat(d.key) + ' \n Total Bit:' + numberFormat(value)
})
//Creating dynamic Y axis with min max ticks' values depending on min max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
.compose([
     nonzero_min(dc.lineChart(bitChart)
    .dimension(min15)
    .colors('blue')
    .group(bitrateWeekMinIntervalGroupMove, 'Bitrate Total')
    .valueAccessor(function (d) {
        return d.value.total;
    })
    // .dashStyle([2,2])
    .interpolate('step-after')
    .renderArea(false)
    .brushOn(false)
    .renderDataPoints(false)         
    .clipPadding(10)),
])
bitChart.render();

//bitChart2
bitChart2 /* dc.lineChart('#bitrate-move-chart', 'chartGroup') */
.xUnits(min15_2.range)  //.xUnits(d3.time.weeks)//.round(d3.time.week) //.round(d3.time.minute)//d3.time.month.round)
.x(d3.time.scale().domain([new Date(minDate), new Date(maxDate)]))
.yAxisPadding('5%')
.elasticY(true)
//Specify a "range chart" to link its brush extent with the zoom of the current "focus chart".
.rangeChart(timeSlider)
.width(450)
.height(200)
.transitionDuration(500)
.margins({ top: 30, right: 50, bottom: 100, left: 50, padding: 1 })
.mouseZoomable(true)
.brushOn(false)
.renderHorizontalGridLines(true)
.legend(dc.legend().x(800).y(10).itemHeight(13).gap(5))
//Render max bitrate horizontal line copied from bar-extra-line.html
.yAxisLabel("Total Bitrate per 15 minutes")
.renderlet(function (chart) {
    chart.svg().selectAll('.chart-body').attr('clip-path', null)
    chart.selectAll('g.x text')
   .attr('transform', 'translate(-10,10) rotate(315)');
})
.on('renderlet', function (chart) {
    var left_y = 10, right_y = 70; // use real statistics here!
    var extra_data = [{ x: chart.x().range()[0], y: chart.y()(left_y) }, { x: chart.x().range()[1], y: chart.y()(right_y) }];
    var line = d3.svg.line()
        .x(function (d) { return d.x; })
        .y(function (d) { return maxbit; })
        .interpolate('linear');
    var chartBody = chart.select('g.chart-body');
    var path = chartBody.selectAll('path.extra').data([extra_data]);
    path.enter().append('path').attr({
        class: 'extra',
        stroke: 'red',
        id: 'extra-line'
    });
    path.attr('d', line);
    // Label the max line
    var text = chartBody.selectAll('text.extra-label').data([0]);
    text.enter().append('text')
    .attr('text-anchor', 'middle')
    .append('textPath').attr({
            class: 'extra-label',
            'xlink:href': '#extra-line',
            startOffset: '50%'
        })
        .text('Total Bitrate Max Value');
})
// .ordinalColors('red')
// Title can be called by any stack layer.
.title(function (d) {
    var value = d.value.total ? d.value.total : d.value;
    if (isNaN(value)) {
        value = 0;
    }
    return dateFormat(d.key) + ' \n Total Bit:' + numberFormat(value)
})

//Creating dynamic Y axis with min max ticks' values depending on min max of data - copied from http://jsfiddle.net/gordonwoodhull/7anae5c5/1/
.compose([
     nonzero_min(dc.lineChart(bitChart2)
    .dimension(min15_2)
     .colors('blue')
    .group(bitrateWeekMinIntervalGroupMove2, 'Bitrate Total')
    .valueAccessor(function (d) {
        return d.value.total;
    })
    //.dashStyle([2,2])
.interpolate('step-after')
    .renderArea(false)
    .brushOn(false)
    .renderDataPoints(false)
    .clipPadding(10)),
])
bitChart2.render();

//Range Chart - timeSlider
// Since this bar chart is specified as "range chart" for the line chart, its brush extent will always match the zoom of the line chart.
timeSlider
.dimension(dateDimension3)//.dimension(min15) 
.group(minIntervalWeekBitrateGroup3)
//.x(d3.time.scale().range([0, brushContainer.select("rect").attr("width")]).domain([new Date(dateDimension3.bottom(1)[0].DATETIME), new Date(dateDimension3.top(1)[0].DATETIME)]))
.x(d3.time.scale().domain([new Date(dateDimension3.bottom(1)[0].DATETIME), new Date(dateDimension3.top(1)[0].DATETIME)]))
.round(dc.round.floor) //(d3.time.month.round)
.xUnits(min15_3.range)//.xUnits(d3.time.week) //.xUnits(d3.time.minute) //.xUnits(d3.time.months)
.width(990) /* dc.barChart('#bitrate-timeSlider-chart', 'chartGroup'); */
.height(40)
.margins({ top: 0, right: 50, bottom: 20, left: 40 })
// .centerBar(true)
.gap(1)
.mouseZoomable(true)
.on('filtered',function (chart){
        console.log("filtered");
    })
.on('preRedraw',function (chart)
{
    console.log("filtered");
     //  var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
    })
.on('renderlet', function (chart) {
    console.log("renderlet myjs");
    var brushg = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush");
    var resizeg = brushg.selectAll("g.resize").selectAll("*").data(data[0]);
    var timesliderSVG3 = resizeg.exit().remove();
    
    //////stop brush events
    // var brush = d3.svg.brush()
   // brush.on("brushstart", null).on("brush", null).on("brushend", null).on("touchmove.brush", null).on("touchend.brush", null).on("mousemove.brush", null).on("mouseup.brush", null);
    // brushg.call(brush)
    //  brushg.on("brushstart", d3.event.stopPropagation()).on("brush", d3.event.stopPropagation()).on("brushend", d3.event.stopPropagation()).on("touchmove.brush", null).on("touchend.brush", d3.event.stopPropagation()).on("mousemove.brush", d3.event.stopPropagation()).on("mouseup.brush", d3.event.stopPropagation());
    //disable resize(not working)
    
  //  var brush = d3.svg.brush()
  ////  brush.on("brushstart", null).on("brush", null).on("brushend", null).on("touchmove.brush", null).on("touchend.brush", null).on("mousemove.brush", null).on("mouseup.brush", null);
  //  var brush1 = brush.on("brush", brushed);

  //  function brushed() {
  //              size = extent[1] - extent[0],
  //              domain = x.domain(),
  //              x0 = domain[0] ,
  //              x1 = domain[1] ;
  //      brush.extent(x0, x1);
    

   // var timesliderSVG4 = brushg.on("brushstart", function () { resizeg.exit().remove() }).on("brush", function () { resizeg.exit().remove() }).on("brushend", function () {resizeg.exit().remove() })
    // var timesliderSVG6 = resizeg.style("display", "none");
})
.on('pretransition', function (chart) {
    console.log("filtered myjs");
    //  var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
})

    .on('postRender', function (chart) {
        console.log("postRender myjs");
        //  var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
    })

     .on('preRender', function (chart) {
         console.log("preRender myjs");
         //  var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
     })

     .on('postRedraw', function (chart) {
         console.log("postRedraw myjs");
         
         
timeSlider.extendBrush = function() {
    var extent = timeSlider.brush().extent();
    if(graphSpan) {
      extent[1] = moment(extent[0]).add(graphSpan, 'hours');
      timeSlider.brush().extent(extent);
    }
    return extent;
}
     //////code from http://bl.ocks.org/mbostock/6498000
    //var brush = d3.svg.brush()
    //brush.on("brush", brushmove);
    //brushg.call(brush);
    //brushg.selectAll("rect.background")
    //.on("mousedown.brush", brushcenter)
    //.on("touchstart.brush", brushcenter);
    //brushg.call(brush.event);
    //function brushmove() {
    //    var extent = brush.extent();
    //    return extent[1] - extent[0]; 
    //  var extra_data = [{ x: chart.x().range()[0] }, { x: chart.x().range()[1] }];
    //  //  dot.classed("selected", function (d) { return extent[0] <= d && d <= extent[1]; });
       
    //}
    //function brushcenter() {
    //    var self = d3.select(window),
    //        target = d3.event.target,
    //        extent = brush.extent(),
    //        size = extent[1] - extent[0],
    //        domain = x.domain(),
    //        x0 = domain[0] + size / 2,
    //        x1 = domain[1] - size / 2;

    //    recenter(true);
    //    brushmove();
    //    if (d3.event.changedTouches) {
    //        self.on("touchmove.brush", brushmove).on("touchend.brush", brushend);
    //    } else {
    //        self.on("mousemove.brush", brushmove).on("mouseup.brush", brushend);
    //    }
    //    function brushmove() {
    //        d3.event.stopPropagation();
    //        center = Math.max(x0, Math.min(x1, x.invert(d3.mouse(target)[0])));
    //        recenter(false);
    //    }
    //    function brushend() {
    //        brushmove();
    //        self.on(".brush", null);
    //    }
    //}
    //function recenter(smooth) {
    //    if (centering) return; // timer is active and already tweening
    //    if (!smooth) return void tween(1); // instantaneous jump
    //    centering = true;
    //    function tween(alpha) {
    //        var extent = brush.extent(),
    //            size = extent[1] - extent[0],
    //            center1 = center * alpha + (extent[0] + extent[1]) / 2 * (1 - alpha);

    //        brushg
    //            .call(brush.extent([center1 - size / 2, center1 + size / 2]))
    //            .call(brush.event);
    //        return !(centering = Math.abs(center1 - center) > 1e-3);
    //    }
    //    d3.timer(function () {
    //        return tween(alpha);
    //    });
    //}
         
         
         
         
         
         //  var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
     })

     .on('zoomed', function (chart) {
         console.log("zoomed myjs");
         //  var timesliderSVG3 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").selectAll("*").data(data[0]).exit().remove();
     })


    





    //var timesliderSVG2 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize path").data(data[0]).exit().remove();
    //var chartBrush = timeSlider.select('g.brush');
    //var resizeE = chartBrush.select('resize e');//.data([extra_data]);
    //resizeE.select("rect").remove();
    //resizeE.select("path").remove();
    //  onbrush();

    //function onbrush(chart) {
    //    //console.log(d3.event)
    //    //var chartBrush = timeSlider.select('g.brush');
    //    //var resizeE = chartBrush.select('resize e');//.data([extra_data]);
    //    //resizeE.select("rect").remove();
    //    //resizeE.select("path").remove();
    //    //if (chart.brush().event.type === "brush" && chart.brush().event.mode === "resize") {
    //    //    var currentExtent = brush.extent();
    //    //    console.log("currentExtent: " + currentExtent);
    //    //    var side = (+currentExtent[0] !== +startExtent[0]) ? "left" : "right";

    //    //    console.log(side);
    //    //}
    //}
    // var timesliderSVG4 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("rect.handle").data(data[0]).exit().remove();
    //  var timesliderSVG5 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("rect.background").selectAll("*").data(data[0]).exit().remove();
    //  var svg6 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").data([{ type: "w" }, { type: "e" }]).selectAll("path").exit().remove();
    //  var extra_data = [{ x: chart.x().range()[0] }, { x: chart.x().range()[1] }];
    // console.log("preRender");
    //  var brushExtent = chart.brush().extent();
    //  d3.select("#bitrate-timeSlider-chart").selectAll("g.resize").style("visibility","hidden");
    // var timesliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").remove();
    //  var anotherTimeSliderSVG = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize").data(data[0]).exit().remove();
    //   var timesliderSVG2 = d3.select("#bitrate-timeSlider-chart").selectAll("g.brush").selectAll("g.resize path").data(data[0]).exit().remove();
    // var justRemove = d3.selectAll("g.resize").remove();
    // var brushSVG = d3.select("g.brush").selectAll("g.resize").data([extra_data]).exit().remove();
    // d3.select("g.parent").selectAll("*").remove();
    //  timesliderSVG.svg.selectAll("g.resize e").remove();
    // timesliderSVG.selectAll(".g.resize e").data([]).exit().remove()
    //   timesliderSVG.select("svg").select("g").select("g.brush").select("g.resize e").enter().remove("g.resize e");
    // console.log("extent " + chart.brush().extent());
    //   var brushwidth = chart.brush().extent()[1] - chart.brush().extent()[0];
    //chart.brush().on("brush", console.log('brush'))
    //chart.brush().on("brushstart", console.log('brushedstart'))
    //chart.brush().on("brushend", console.log('brushedend'))
    //    console.log("brushwidth " + brushwidth)


    //   console.log("extent " + chart.brush().extent());
    //  var brushwidth = chart.brush().extent()[1] - chart.brush().extent()[0];
    //console.log("width " + brushwidth)



    //  chart.brush().selectAll("resize").select("rect").remove();

    //    chart.select(g.brush);
    //.handleSize(0);
    // svg.append("g")
    //   .attr("class", "brush")       
    //  .selectAll("rect")
    //  .attr("visibility", hidden)
    //    .attr("height", 0)
    //  .selectAll("path")
    //   .attr("visibility", hidden)
    //    .attr("height", 0);

    //  onbrush();
    //var chartBrush = chart.select('g.brush');
    //var resizeE = chartBrush.select('resize e');//.data([extra_data]);
    //resizeE.select("rect").remove();
    //resizeE.select("path").remove();
    //  alert(resizeE.id);
    //resizeArea.enter().append('resizeArea').attr({
    //    width: '0px',
    //    height: '0px',

    //});
    //resizeArea.attr('width', 0);
    //resizeArea.attr('height', 0);
    //  resizeE.remove();

    //  d3.select("g.brush").call(brush.extent([0, 0]))
    //  d3.selectAll("rect.bar").style("opacity", "0.4");
    //    d3.select(this).selectAll('g.resize').remove();
    //    var slider = context.append("g")
    //.attr("class", "x brush")
    //.call(brush);

    // Remove the resize control
    // chart.svg().selectAll('g.resize').remove();

    // var res = g.selectAll("g.brush g.resize");



//#### Data Count  dateformat.parse(d.time);
bitCount /* dc.dataCount('.dc-data-count', 'chartGroup'); */
.dimension(crossFilteredData)
.group(all)
.html({
    some: '<strong>%filter-count</strong> records selected out of <strong>%total-count</strong> records'  +
        ' | <a href=\'javascript: dc.filterAll(); dc.renderAll();\'>Reset All</a>',
    all: ' All records selected. Please click on the graph to apply filters.'
});

//#### Data Table
bitrateTable /* dc.dataTable('.dc-data-table', 'chartGroup') */
.dimension(dateDimension)    //  .dimension(dateDimension)
// Data table does not use crossfilter group but rather a closure as a grouping function
.group(function (d) {
    var format = d3.format('02d');
    return d.bitdate.getFullYear() + '/' + format((d.bitdate.getMonth() + 1));
})
.sortBy(function (d) { return d.bitdate; })
.size(13)// (_optional_) max number of records to be shown, 'default = 25'
.columns([
    'DATETIME',
    'CHANNEL_ID',
    'BITRATE'
])
// (_optional_) custom renderlet to post-process chart using [D3](http://d3js.org)
.on('renderlet', function (table) {
    table.selectAll('.dc-table-group').classed('info', true);
});

//#### Rendering
//Render all charts on the page
dc.renderAll();
    
//#### Versions
//Determine the current version of dc with 'dc.version'
d3.selectAll('#version').text(dc.version);
// Determine latest stable version in the repo via Github API
d3.json('https://api.github.com/repos/dc-js/dc.js/releases/latest', function (error, latestRelease) {
/*jshint camelcase: false */
d3.selectAll('#latest').text(latestRelease.tag_name); /* jscs:disable */
});

//});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>