<commit_before>(function (root) {

    var draw_chart, draw_sparkline;

    /** Get the maximum value from a list of lists
     *
     * @param data the multidimensional array to find the max for
     * @param fn the function to apply to each array element (e.g. d3.max)
     * @param accessor the optional accessor function for max of the inner loop
     */
    function getMinMaxValues(data, fn, accessor) {
        return fn(data.map(function (array) {

            if (accessor === undefined) {
                return fn(array, function (d) {
                    return d.value;
                });
            }
            return fn(array, accessor);
        }));
    }

    /** Draws a chart at the node with the given selector
     *
     *  @param data the list of data to be plotted
     *  @param elem the container element to add the svg element to
     */
    draw_chart = function draw_chart(data, elem) {

        d3.select("#" + elem + " svg").remove();

        var i = 0,
            max_elements = data === undefined ? 0 : data.length,
            colours = ["#0078e7", "#198A34", "#ff158a", "#cfda20", "#202020"],

            margin = {
                top: 80,
                right: 60,
                bottom: 60,
                left: 60
            },

            domElem = d3.select("#" + elem),
            chart = d3.select("#" + elem).append("svg:svg");

        // run checks to see if the DOM element was found
        if (domElem.empty()) {
            return;
        }

        var elemWidth = domElem.style("width").replace("px", ""),
            elemHeight = domElem.style("height").replace("px", ""),
            width = elemWidth - margin.left - margin.right,
            height = elemHeight - margin.top - margin.bottom,

            x_extents = max_elements === 0 ? [new Date("04/09/2011 00:00"), new Date("07/14/2011 23:59")] : [getMinMaxValues(data, d3.min, function (d) {
                return d.get('loggedAt');
            }), getMinMaxValues(data, d3.max, function (d) {
                return d.get('loggedAt');
            })],
            y_extents = max_elements === 0 ? [0, 1] : [0, getMinMaxValues(data, d3.max)],
            x = d3.time.scale.utc()
                .domain(x_extents)
                .range([0, width]),
            y = d3.scale.linear()
                .domain(y_extents)
                .range([height, 0]),
            xAxis = d3.svg.axis().scale(x).orient('bottom'),
            yAxis = d3.svg.axis().scale(y).orient('left'),

            line = d3.svg.line()
                .x(function (d) {
                    return x(d.get('loggedAt'));
                })
                .y(function (d) {
                    return y(d.get('value'));
                });

        // set up the chart area
        if (max_elements > 0) {
            chart.data([data]);
        }

        chart.attr("preserveAspectRatio", "xMidYMid")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("viewBox", "-" + margin.left + ", -" + margin.top + ", " + elemWidth + ", " + elemHeight)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // draw the x-axis
        chart.append("g")
            .attr("class", "x_axis")
            .attr("transform", "translate(0, " + height + ")")
            .call(xAxis);

        // draw the y-axis
        chart.append("g")
            .attr("class", "y_axis")
            .call(yAxis);

        // draw the lines
        for (i = 0; i < max_elements; i += 1) {
            chart.append("svg:path")
                .data([data[i]])
                .attr("class", "line")
                .attr("fill", "none")
                .attr("stroke", colours[i])
                .attr("stroke-width", 2)
                .attr("d", line);
        }

        // draw the legend at the top of the screen
        for (i = 0; i < max_elements; i += 1) {
            // draw the coloured block
            chart.append("svg:rect")
                .attr("x", 25 + 130 * i)
                .attr("y", -46)
                .attr("stroke", colours[i])
                .attr("fill", colours[i])
                .attr("height", 3)
                .attr("width", 22);

            // draw the text
            chart.append("svg:text")
                .attr("x", 50 + 130 * i)
                .attr("y", -40)
                .text("Series " + (i + 1));
        }

        /*console.log("===================================");
        console.log("CHART DATA");
        console.log("-----------------------------------");
        console.log("X extents: " + x_extents);
        console.log("Y extents: " + y_extents);
        console.log("Data: ");
        console.log(data);
        console.log("===================================");*/
    };

    /**
     * Draws a sparkline chart in a small element - no axis or labels
     *
     * @param data The data to use for plotting the sparkline
     * @param elem The element to draw the sparkline into
     */
    draw_sparkline = function (data, elem) {
        var margin = {
                top: 3,
                right: 5,
                bottom: 3,
                left: 5
            },
            totalWidth = 120,
            totalHeight = 20,

            width = totalWidth - margin.left - margin.right,
            height = totalHeight - margin.top - margin.bottom,

            x = d3.time.scale.utc()
                .domain(d3.extent(data, function (d) {
                    return d.get('loggedAt');
                }))<commit_msg>Build a tooltip - re #6, however need chart circles to continue<commit_after>(function (root) {

    var draw_chart, draw_sparkline;

    /** Get the maximum value from a list of lists
     *
     * @param data the multidimensional array to find the max for
     * @param fn the function to apply to each array element (e.g. d3.max)
     * @param accessor the optional accessor function for max of the inner loop
     */
    function getMinMaxValues(data, fn, accessor) {
        return fn(data.map(function (array) {

            if (accessor === undefined) {
                return fn(array, function (d) {
                    return d.value;
                });
            }
            return fn(array, accessor);
        }));
    }

    /** Draws a chart at the node with the given selector
     *
     *  @param data the list of data to be plotted
     *  @param elem the container element to add the svg element to
     */
    draw_chart = function draw_chart(data, elem) {

        d3.select("#" + elem + " svg").remove();

        var i = 0,
            max_elements = data === undefined ? 0 : data.length,
            colours = ["#0078e7", "#198A34", "#ff158a", "#cfda20", "#202020"],

            margin = {
                top: 80,
                right: 60,
                bottom: 60,
                left: 60
            },

            domElem = d3.select("#" + elem),
            chart = d3.select("#" + elem).append("svg:svg");

        // run checks to see if the DOM element was found
        if (domElem.empty()) {
            return;
        }

        var elemWidth = domElem.style("width").replace("px", ""),
            elemHeight = domElem.style("height").replace("px", ""),
            width = elemWidth - margin.left - margin.right,
            height = elemHeight - margin.top - margin.bottom,

            x_extents = max_elements === 0 ? [new Date("04/09/2011 00:00"), new Date("07/14/2011 23:59")] : [getMinMaxValues(data, d3.min, function (d) {
                return d.get('loggedAt');
            }), getMinMaxValues(data, d3.max, function (d) {
                return d.get('loggedAt');
            })],
            y_extents = max_elements === 0 ? [0, 1] : [0, getMinMaxValues(data, d3.max)],
            x = d3.time.scale.utc()
                .domain(x_extents)
                .range([0, width]),
            y = d3.scale.linear()
                .domain(y_extents)
                .range([height, 0]),
            xAxis = d3.svg.axis().scale(x).orient('bottom'),
            yAxis = d3.svg.axis().scale(y).orient('left'),
            xGather = function (d) { return x(d.get('loggedAt')); },
            yGather = function (d) { return y(d.get('value')); },

            line = d3.svg.line()
                .x(xGather)
                .y(yGather),
            tooltip;

        // set up the chart area
        if (max_elements > 0) {
            chart.data([data]);
        }

        chart.attr("preserveAspectRatio", "xMidYMid")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .attr("viewBox", "-" + margin.left + ", -" + margin.top + ", " + elemWidth + ", " + elemHeight)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        // draw the x-axis
        chart.append("g")
            .attr("class", "x_axis")
            .attr("transform", "translate(0, " + height + ")")
            .call(xAxis);

        // draw the y-axis
        chart.append("g")
            .attr("class", "y_axis")
            .call(yAxis);

        // draw a tooltip
        tooltip = chart.append("div")
            .style("position", "absolute")
            .style("z-index", 10)
            .style("visibility", "hidden");

        // draw the lines
        for (i = 0; i < max_elements; i += 1) {

            // draw the line
            chart.append("svg:path")
                .data([data[i]])
                .attr("class", "line")
                .attr("fill", "none")
                .attr("stroke", colours[i])
                .attr("stroke-width", 2)
                .attr("d", line);

            // draw the legend at the top of the screen
            // draw the coloured block
            chart.append("svg:rect")
                .attr("x", 25 + 130 * i)
                .attr("y", -46)
                .attr("stroke", colours[i])
                .attr("fill", colours[i])
                .attr("height", 3)
                .attr("width", 22);

            // draw the text
            chart.append("svg:text")
                .attr("x", 50 + 130 * i)
                .attr("y", -40)
                .text("Series " + (i + 1));
        }
    };

    /**
     * Draws a sparkline chart in a small element - no axis or labels
     *
     * @param data The data to use for plotting the sparkline
     * @param elem The element to draw the sparkline into
     */
    draw_sparkline = function (data, elem) {
        var margin = {
                top: 3,
                right: 5,
                bottom: 3,
                left: 5
            },
            totalWidth = 120,
            totalHeight = 20,

            width = totalWidth - margin.left - margin.right,
            height = totalHeight - margin.top - margin.bottom,

            x = d3.time.scale.utc()
                .domain(d3.extent(data, function (d) {
                    return d.get('loggedAt');
                }))
{'fraction_non_alphanumeric': 0.15431709732601062, 'fraction_numerical': 0.019897362023948862, 'mean_word_length': 1.4285089637079142, 'pattern_counts': {'":': 0, '<': 6, '<?xml version=': 0, '>': 5, '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': '4005416', 'n_tokens_mistral': 3403, 'n_tokens_neox': 3107, 'n_words': 819}