D3 Examples - CS Timer Visualization

xxxxxxxxxx
 
<!DOCTYPE html>
<body>
    <script src="//d3js.org/d3.v4.min.js"></script>
    <script src="numeric.min.js"></script>
    <script src="regLine.js"></script>
    <script>
    var margin = {top:20,right:20,bottom:20,left:20},
        width = 960 - margin.right - margin.left,
        height = 500 - margin.top - margin.bottom;
    var svg = d3.select('body').append('svg')
        .attr('width', width + margin.right + margin.left)
        .attr('height', height + margin.top + margin.bottom)
        .append('g')
        .attr('transform', 'translate(' + [margin.left,margin.top] + ')');
​
    var color = d3.scaleOrdinal(d3.schemeCategory20);
    d3.csv('csTimerExport.csv', function(err,data) {
        if (err) throw(err);
        data.forEach((d,i) => {
            d.Time = +d.Time;
            d.No = +d.No;
            //avg 5
            var arr = data.slice(i-5,i);
            var time = [];
            arr.forEach(a => {
                time.push(a.Time)
            });
            if (time.length > 0) {
                time.splice(time.indexOf(d3.max(time,d=>d)),1)
                time.splice(time.indexOf(d3.min(time,d=>d)),1)
                d.avg5 = +d3.mean(time).toFixed(2);
                d.max = d3.max(time,d=>d);
                d.min = d3.min(time,d=>d);
            }       
            else d.avg5 = null; 
            //avg 12
            var arr12 = data.slice(i-12,i);
            var time12 = [];
            arr12.forEach(a => {
                time12.push(a.Time)
            });
            if (time12.length > 0) {
                time12.splice(time12.indexOf(d3.max(time12,d=>d)),1)
                time12.splice(time12.indexOf(d3.min(time12,d=>d)),1)
                d.avg12 = +d3.mean(time12).toFixed(2);
            }       
            else d.avg12 = null; 
        });
        var x = d3.scaleLinear()
            .range([0,width])
            .domain([0,d3.max(data,d => d.No)]);
        var y = d3.scaleLinear()
            .range([height/2,0])
            .domain(d3.extent(data, d => d.avg5));
        
        var scatter = svg.append('g').attr('class', 'scatter')
​
        scatter.append('g')
            .attr('transform', 'translate(0,' + height/2 + ')')
            .call(d3.axisBottom(x))
            scatter.append('g')
            .call(d3.axisLeft(y))
        var circles = scatter.selectAll('circle')
            .data(data)
            .enter().append('circle')
            .attr('class', d => 'No' + d.No)
            .attr('cx', d => x(d.No))
            .attr('cy', d => { if (d.avg5) return y(d.avg5); })
            .attr('r', 5)
​
        histogramTime(data);
        histogramAvg5(data);
​
        var solution = getRegressionPoints(data,'No','avg5',10);
        
        var line = d3.line()
            .x(d => x(d.x))
            .y(d => y(d.y));
        
        scatter.append('path')
            .datum(solution)
            .attr('d', line)
            .attr('fill', 'none')
            .attr('stroke', 'steelblue')
            .attr('stroke-width', 4)
​
        console.log('solution', solution);
​
    })
​
    function histogramTime(data) {
        var time = svg.append('g')
            .attr('class', 'time')
            .attr('transform', 'translate(0,' + (height/2 + margin.top) + ')');
​
        var xHist = d3.scaleLinear()
            .domain(d3.extent(data,d => d.Time))
            .rangeRound([0,width/2]);
​
        // set the parameters for the histogram
        var bins = d3.histogram()
            .value(function(d) { return d.Time; })
            .domain(xHist.domain())
            .thresholds(xHist.ticks(10))
            (data);
        
        console.log('bins', bins)
        
        var yHist = d3.scaleLinear()
            .domain([0, d3.max(bins, d => d.length)])
            .range([height/2 - margin.top,0]);
​
        var bar = time.selectAll('.bar')
            .data(bins)
            .enter().append('g')
            .attr('class', 'bar')
            .attr('transform', d => 'translate(' + xHist(d.x0) + ',' + yHist(d.length) + ')');
​
        bar.append('rect')
            .attr('x', 1)
            .attr('width', xHist(bins[0].x1) - xHist(bins[0].x0) - 1)
            .attr('height', d => (height/2 - margin.top) - yHist(d.length))
            .attr('fill', d => {
                // d.forEach(v => {
                //     d3.select('circle.No' + v.No).attr('fill', color(d.x0));
                // })
                return color(d.x0);
            })
            .on('mouseover', d => {
                d.forEach(v => {
                    d3.select('circle.No' + v.No).attr('fill', color(d.x0));
                })
            })
            .on('mouseout', d => {
                d3.selectAll('[class^=No]').attr('fill', '')
            });
​
        time.append('g')
            .attr('transform', 'translate(0,' + (height/2 - margin.top) + ')')
            .call(d3.axisBottom(xHist))
        time.append('g')
            .attr('transform', 'translate(0,' + 0 + ')')
            .call(d3.axisLeft(yHist))
    }
​
    function histogramAvg5(data) {
​
        var g = svg.append('g')
            .attr('class', 'avg5')
            .attr('transform', 'translate(' + [width/2 + margin.left,0] + ')');
​
        var xHist = d3.scaleLinear()
            .domain(d3.extent(data,d => d.avg5))
            .rangeRound([0,width/2]);
​
        // set the parameters for the histogram
        var bins = d3.histogram()
            .value(function(d) { return d.avg5; })
            .domain(xHist.domain())
            .thresholds(xHist.ticks(10))
            (data);
        
        var yHist = d3.scaleLinear()
            .domain([0, d3.max(bins, d => d.length)])
            .range([height/2 - margin.top,0]);
​
        var bar = g.selectAll('.bar')
            .data(bins)
            .enter().append('g')
            .attr('class', 'bar')
            .attr('transform', d => 'translate(' + xHist(d.x0) + ',' + (yHist(d.length) + height/2 + margin.top) + ')');
​
        bar.append('rect')
            .attr('x', 1)
            .attr('width', xHist(bins[0].x1) - xHist(bins[0].x0) - 1)
            .attr('height', d => (height/2 - margin.top) - yHist(d.length))
            .attr('fill', d => color(d.x0));
​
        g.append('g')
            .attr('transform', 'translate(0,' + height + ')')
            .call(d3.axisBottom(xHist))
    }
    </script>
</body>
    