CS Timer Visualization

Just some graphs I made from the times I've recorded on csTimer.net.

<!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] + ')');

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) + ')');

g.append('g')
            .attr('transform', 'translate(0,' + height + ')')
            .call(d3.axisBottom(xHist))
    }
    </script>
</body>

https://d3js.org/d3.v4.min.js