<commit_before>String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

//Options
var width = 700,
    height = 450,
    gridSpacing = 40;

var aspect = width / height;

var min_radius = 4,
    max_radius = 20

var min_age = 35,
    max_age = 57
    min_women = 10,
    max_women = 90

var infobox = d3.select("#infobox")

var svg = d3.select("#quadcontainer").append("svg")
    .attr("width", width).attr("height",height)
    .attr("viewBox", "0 0 " + width + " " + height)
    .attr("preserveAspectRatio", "xMidYMid")
    .attr("id", "quad");

//Scales for item positions
var x = d3.scale.linear().domain([min_age, max_age]).range([0,width]);
var y = d3.scale.linear().domain([min_women, max_women]).range([height,0]);

// Set-up a window handler that re-sizes the svg when the window size changes
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0]

function updateWindow(){
    x = w.innerWidth || e.clientWidth || g.clientWidth;
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    svg.attr("width", x).attr("height", y);
}

window.onresize = updateWindow;

//gridlines
svg.append("path")
  .attr("class","grid")
  .attr("d",function() {
    var d = "";

    for (var i = gridSpacing; i < width; i += gridSpacing ) {
      d += "M"+i+",0 L"+i+","+height;
    }

    for (var i = gridSpacing; i < height; i += gridSpacing ) {
      d += "M0,"+i+" L"+width+","+i;
    }

    return d;
  })


// setup pie charts
var pie_radius = 50;
var pie_colors = ["#ca0020", "#92c5de", "#f4a582", "#0571b0"];
var pie_color = d3.scale.ordinal().range(pie_colors);

var pie_arc = d3.svg.arc()
    .outerRadius(pie_radius - 10)
    .innerRadius(0);

var pie = d3.layout.pie().sort(null)

d3.json("parties.json", function(error, json) {
    if (error) return console.warn(error);
    itemList = json;

    var max_total = d3.max(itemList, function(d) { return d.males + d.females; });
    var radius_scale = d3.scale
        .linear()
        .range([min_radius, max_radius])
        .domain([0, max_total])

    var datax = function(d) {
        return x(d.median_age)
    }

    var datay = function(d) {
        var total = d.males + d.females;
        var perc = d.females / total * 100;
        return y(perc);
    }


    //One group per item
    var items = svg.selectAll("g.item")
        .data(itemList).enter()
        .append("g")
            .attr("class","item");

    display_infobox = function(d) {
        var total = d.males + d.females

        d3.select("#party_info").style("display", "block");
        d3.select("#lbl_party").text(d.party.toProperCase())
        d3.select("#lbl_total").text(total)
        d3.select("#lbl_males").text(parseInt(d.males / total * 100))
        d3.select("#lbl_females").text(parseInt(d.females / total * 100))
        d3.select("#lbl_median").text(d.median_age)
        d3.select("#lbl_young").text(parseInt(d.young / total * 100))
        d3.select("#lbl_middle").text(parseInt(d.middle / total * 100))
        d3.select("#lbl_old").text(parseInt(d.old / total * 100))
        d3.select("#lbl_vold").text(d.vold)

        d3.selectAll("#youngest_members p").remove()
        d3.select("#youngest_members").selectAll("small").data(d.youngest).enter().append("small")
            .text(function(d2) {
                return d2[0].toProperCase() + " (" + d2[2] + ") | "
            })

        d3.selectAll("#oldest_members p").remove()
        d3.select("#oldest_members").selectAll("small").data(d.oldest).enter().append("small")
            .text(function(d2) {
                return d2[0].toProperCase() + " (" + d2[2] + ") | "
            })


        var draw_pie = function(el, data, labels, title) {
            var data_size = data.length
            el.selectAll("svg").remove()
            var svg = el.append("svg")
                .attr("class", "pie");

            svg.append("text")
                .attr("class", "pie label")
                .attr("text-anchor", "middle")
                .attr("y", 10)
                .attr("x", 45)
                .text(title)

            svg.selectAll("g")
                .data(pie(data)).enter().append("g")
                .attr("class", "arc")
                .attr("transform", "translate(" + pie_radius + "," + (pie_radius + 5) + ")")
                .append("path")
                    .attr("d", pie_arc)
                    .style("fill", function(d, idx) { return pie_color(idx); });

            legend = svg.append("g");
            legend.selectAll("rect")
                .data(pie_colors.slice(0, data_size))
                .enter().append("rect")
                    .attr("height", 10)
                    .attr("width", 10)
                    .attr("y", function(d, idx) { return idx * 20 + pie_radius * 2 + 5})
                    .attr("x", 20)
                    .style("fill", function(d) { return d; })

            legend.selectAll("text")
                .data(labels)
                .enter().append("text")
                .attr("class", "pie legend")
                .attr("text-anchor", "begin")
                .attr("y", function(d, idx) { return 20 * idx + pie_radius * 2 + 14})
                .attr("x", 40)
                .text(function(d) { return d; });

        }

        draw_pie(d3.select("#gender_pie"), [d.males/total, d.females/total], ["Men", "Women"], "By Gender")
        draw_pie(d3.select("#age_pie"), [d.young/total, d.middle/total, d.old/total, d.vold/total], ["< 40", "40-59", "60-79", "80+"], "By Age")
    }

    //Add a dot
    items.append("circle")
        .attr("class", "party")
        .attr("r", function(d) {
            total = d.males + d.females;
            return radius_scale(total);
        })
        .attr("cx", datax)
        .attr("cy", y(50))
        .on("mouseover", display_infobox)
        .on("mousedown", function(d) {
            d3.select(this).classed("clicked", true)
            display_infobox(d);
        })
        .on("mouseup", function(d) {
            d3.select(this).classed("clicked", false)
        })
        .transition().delay(40).ease("bounce").duration(1000)
        .attr("cy", datay)

    // setup Y-Axis
    var yScale = d3.scale
        .linear()
        .range([0, height])
        .domain([100, 0])

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5);

    svg.append("g")
        .attr("class", "yaxis")
        .attr("transform", "translate(6, -1)")
        .call(yAxis)

    svg.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .attr("y", 6)
        .attr("dy", "1.0em")
        .attr("transform", "rotate(-90)")
        .text("more women candidates →");

    svg.append("text")
        .attr("class", "y label")
        .attr("y", 6)
        .attr("dy", "1.0em")
        .attr("transform", "translate(0, " + height + ") rotate(-90)")
        .text("← fewer women candidates");

    // setup X-Axis
    var xScale = d3.scale
        .linear()
        .range([0, width])
        .domain([min_age, max_age + 10])


    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("top")
        .ticks(4);

    svg.append("g")
        .attr("class", "xaxis")
        .attr("transform", "translate(7, " + yScale(50) + ")")
        .call(xAxis)

    svg.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "end")
        .attr("x", width)
        .attr("y", height - 6)
        .text("median age of candidates in list (years)");

    svg.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "end")
        .attr("x", width)
        .attr("y", xScale(50))
        .attr("dy", "-0.6em")
        .text("older candidates →");

    svg.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "begin")
        .attr("x", 11)
        .attr("y", xScale(50))
        .attr("dy", "-0.6em")
        .text("← younger candidates");

    //would need to use .getBBox() to make sure this doesn't hit the sides
    items.append("text")
        .attr("class", "text-label")
        .attr("x", datax)
        .attr("y", y(50)) // start off in the center before animating
        .attr("dy","1.25em")
        .attr("text-anchor","middle")
        .on("mouseover", display_infobox)
        .on("mousedown", function(d) {
            d3.select(this).classed("clicked", true)
            display_infobox(d);
        })
        .on("mouseup", function(d) {
            d3.select(this).classed("clicked", false)
        })
        .text(function(d) { return d.abbr; })
        .transition().delay(40).ease("bounce").duration(1000)
        .attr("y", function(d) {
            total = d.males + d.females
            return datay(d) + radius_scale(total) }
        )


});
<commit_msg>Fixed x-axis label as well as youngest/oldest candidates<commit_after>String.prototype.toProperCase = function () {
    return this.replace(/\w\S*/g, function(txt){return txt.charAt(0).toUpperCase() + txt.substr(1).toLowerCase();});
};

//Options
var width = 700,
    height = 450,
    gridSpacing = 40;

var aspect = width / height;

var min_radius = 4,
    max_radius = 20

var min_age = 35,
    max_age = 57
    min_women = 10,
    max_women = 90

var infobox = d3.select("#infobox")

var svg = d3.select("#quadcontainer").append("svg")
    .attr("width", width).attr("height",height)
    .attr("viewBox", "0 0 " + width + " " + height)
    .attr("preserveAspectRatio", "xMidYMid")
    .attr("id", "quad");

//Scales for item positions
var x = d3.scale.linear().domain([min_age, max_age]).range([0,width]);
var y = d3.scale.linear().domain([min_women, max_women]).range([height,0]);

// Set-up a window handler that re-sizes the svg when the window size changes
var w = window,
    d = document,
    e = d.documentElement,
    g = d.getElementsByTagName('body')[0]

function updateWindow(){
    x = w.innerWidth || e.clientWidth || g.clientWidth;
    y = w.innerHeight|| e.clientHeight|| g.clientHeight;

    svg.attr("width", x).attr("height", y);
}

//window.onresize = updateWindow;

//gridlines
svg.append("path")
  .attr("class","grid")
  .attr("d",function() {
    var d = "";

    for (var i = gridSpacing; i < width; i += gridSpacing ) {
      d += "M"+i+",0 L"+i+","+height;
    }

    for (var i = gridSpacing; i < height; i += gridSpacing ) {
      d += "M0,"+i+" L"+width+","+i;
    }

    return d;
  })


// setup pie charts
var pie_radius = 50;
var pie_colors = ["#ca0020", "#92c5de", "#f4a582", "#0571b0"];
var pie_color = d3.scale.ordinal().range(pie_colors);

var pie_arc = d3.svg.arc()
    .outerRadius(pie_radius - 10)
    .innerRadius(0);

var pie = d3.layout.pie().sort(null)

d3.json("parties.json", function(error, json) {
    if (error) return console.warn(error);
    itemList = json;

    var max_total = d3.max(itemList, function(d) { return d.males + d.females; });
    var radius_scale = d3.scale
        .linear()
        .range([min_radius, max_radius])
        .domain([0, max_total])

    var datax = function(d) {
        return x(d.median_age)
    }

    var datay = function(d) {
        var total = d.males + d.females;
        var perc = d.females / total * 100;
        return y(perc);
    }


    //One group per item
    var items = svg.selectAll("g.item")
        .data(itemList).enter()
        .append("g")
            .attr("class","item");

    display_infobox = function(d) {
        var total = d.males + d.females

        d3.select("#party_info").style("display", "block");
        d3.select("#lbl_party").text(d.party.toProperCase())
        d3.select("#lbl_total").text(total)
        d3.select("#lbl_males").text(parseInt(d.males / total * 100))
        d3.select("#lbl_females").text(parseInt(d.females / total * 100))
        d3.select("#lbl_median").text(d.median_age)
        d3.select("#lbl_young").text(parseInt(d.young / total * 100))
        d3.select("#lbl_middle").text(parseInt(d.middle / total * 100))
        d3.select("#lbl_old").text(parseInt(d.old / total * 100))
        d3.select("#lbl_vold").text(d.vold)

        d3.selectAll("#youngest_members small").remove()
        d3.select("#youngest_members")
            .selectAll("small")
            .data(d.youngest).enter()
            .append("small")
                .text(function(d2) {
                    return d2[0].toProperCase() + " (" + d2[2] + ") | "
                })

        d3.selectAll("#oldest_members small").remove()
        d3.select("#oldest_members").selectAll("small").data(d.oldest).enter().append("small")
            .text(function(d2) {
                return d2[0].toProperCase() + " (" + d2[2] + ") | "
            })


        var draw_pie = function(el, data, labels, title) {
            var data_size = data.length
            el.selectAll("svg").remove()
            var svg = el.append("svg")
                .attr("class", "pie");

            svg.append("text")
                .attr("class", "pie label")
                .attr("text-anchor", "middle")
                .attr("y", 10)
                .attr("x", 45)
                .text(title)

            svg.selectAll("g")
                .data(pie(data)).enter().append("g")
                .attr("class", "arc")
                .attr("transform", "translate(" + pie_radius + "," + (pie_radius + 5) + ")")
                .append("path")
                    .attr("d", pie_arc)
                    .style("fill", function(d, idx) { return pie_color(idx); });

            legend = svg.append("g");
            legend.selectAll("rect")
                .data(pie_colors.slice(0, data_size))
                .enter().append("rect")
                    .attr("height", 10)
                    .attr("width", 10)
                    .attr("y", function(d, idx) { return idx * 20 + pie_radius * 2 + 5})
                    .attr("x", 20)
                    .style("fill", function(d) { return d; })

            legend.selectAll("text")
                .data(labels)
                .enter().append("text")
                .attr("class", "pie legend")
                .attr("text-anchor", "begin")
                .attr("y", function(d, idx) { return 20 * idx + pie_radius * 2 + 14})
                .attr("x", 40)
                .text(function(d) { return d; });

        }

        draw_pie(d3.select("#gender_pie"), [d.males/total, d.females/total], ["Men", "Women"], "By Gender")
        draw_pie(d3.select("#age_pie"), [d.young/total, d.middle/total, d.old/total, d.vold/total], ["< 40", "40-59", "60-79", "80+"], "By Age")
    }

    //Add a dot
    items.append("circle")
        .attr("class", "party")
        .attr("r", function(d) {
            total = d.males + d.females;
            return radius_scale(total);
        })
        .attr("cx", datax)
        .attr("cy", y(50))
        .on("mouseover", display_infobox)
        .on("mousedown", function(d) {
            d3.select(this).classed("clicked", true)
            display_infobox(d);
        })
        .on("mouseup", function(d) {
            d3.select(this).classed("clicked", false)
        })
        .transition().delay(40).ease("bounce").duration(1000)
        .attr("cy", datay)

    // setup Y-Axis
    var yScale = d3.scale
        .linear()
        .range([0, height])
        .domain([100, 0])

    var yAxis = d3.svg.axis()
        .scale(yScale)
        .orient("left")
        .ticks(5);

    svg.append("g")
        .attr("class", "yaxis")
        .attr("transform", "translate(6, -1)")
        .call(yAxis)

    svg.append("text")
        .attr("class", "y label")
        .attr("text-anchor", "end")
        .attr("y", 6)
        .attr("dy", "1.0em")
        .attr("transform", "rotate(-90)")
        .text("more women candidates →");

    svg.append("text")
        .attr("class", "y label")
        .attr("y", 6)
        .attr("dy", "1.0em")
        .attr("transform", "translate(0, " + height + ") rotate(-90)")
        .text("← fewer women candidates");

    // setup X-Axis
    var xScale = d3.scale
        .linear()
        .range([0, width])
        .domain([min_age, max_age + 10])


    var xAxis = d3.svg.axis()
        .scale(xScale)
        .orient("top")
        .ticks(4);

    svg.append("g")
        .attr("class", "xaxis")
        .attr("transform", "translate(7, " + yScale(50) + ")")
        .call(xAxis)

    svg.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "end")
        .attr("x", width)
        .attr("y", height - 6)
        .text("median age of candidates in list (years)");

    svg.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "end")
        .attr("x", width)
        .attr("y", yScale(50))
        .attr("dy", "-0.6em")
        .text("older candidates →");

    svg.append("text")
        .attr("class", "x label")
        .attr("text-anchor", "begin")
        .attr("x", 11)
        .attr("y", yScale(50))
        .attr("dy", "-0.6em")
        .text("← younger candidates");

    //would need to use .getBBox() to make sure this doesn't hit the sides
    items.append("text")
        .attr("class", "text-label")
        .attr("x", datax)
        .attr("y", y(50)) // start off in the center before animating
        .attr("dy","1.25em")
        .attr("text-anchor","middle")
        .on("mouseover", display_infobox)
        .on("mousedown", function(d) {
            d3.select(this).classed("clicked", true)
            display_infobox(d);
        })
        .on("mouseup", function(d) {
            d3.select(this).classed("clicked", false)
        })
        .text(function(d) { return d.abbr; })
        .transition().delay(40).ease("bounce").duration(1000)
        .attr("y", function(d) {
            total = d.males + d.females
            return datay(d) + radius_scale(total) }
        )


});

{'fraction_non_alphanumeric': 0.19050279329608938, 'fraction_numerical': 0.022681564245810054, 'mean_word_length': 2.0325258343215316, 'pattern_counts': {'":': 0, '<': 9, '<?xml version=': 0, '>': 3, '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': '2083236', 'n_tokens_mistral': 6333, 'n_tokens_neox': 5968, 'n_words': 1140}