// http://bl.ocks.org/d3noob/5987480

let margin = {top: 50, right: 50, bottom: 80, left: 90},
    width = 450 - margin.left - margin.right,
    height = 250 - margin.top - margin.bottom;

let axisTitleFontStyle = "10px sans-serif";
let plotTitleFontStyle = "20px sans-serif";

let x_axis_attr = "age";
let y_axis_attr = "worth in billions";
let type_attr = "category";
let x_axis_title = titleCase(x_axis_attr);
let y_axis_title = titleCase(y_axis_attr);
let type_title = titleCase(type_attr);

// read data and draw
d3.csv("billionaires.csv", function(error, data) {
    if (error) throw error;

    data = data.filter(d => +d[x_axis_attr] !== -1);

    let plotTypesDict = {};

    data.forEach(function(d) {
        d[x_axis_attr] = +d[x_axis_attr];
        d[y_axis_attr] = +d[y_axis_attr];
        plotTypesDict[d[type_attr]] = 1;
    });

    let plotTypes = d3.keys(plotTypesDict);

    let all_data = data;

    for (let i = 0; i < plotTypes.length; i++) {

        let category_name = plotTypes[i];

        let svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin.left + margin.right)
            .attr("height", height + margin.top + margin.bottom)
            .append("g")
            .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

        data = all_data.filter(d => d[type_attr] == category_name);

        // if (data.length <= 20) {
        //     continue;
        // }

        let x = d3.scaleLinear()
            .domain(d3.extent(data, function(d) { return d[x_axis_attr]; }))
            .range([0, width]);

        let y = d3.scaleLinear()
            .domain(d3.extent(data, function(d) { return d[y_axis_attr]; }))
            .range([height, 0]);

        let xAxis = d3.axisBottom().scale(x);

        let yAxis = d3.axisLeft().scale(y);

        // x axis
        svg.append("g")
            .attr("class", "x axis")
            .attr("transform", "translate(0," + height + ")")
            .call(xAxis)
            .selectAll("text")
            .style("text-anchor", "end")
            .attr("dx", "1em")
            .attr("dy", "1em");

        // y axis
        svg.append("g")
            .attr("class", "y axis")
            .call(yAxis);

        // x axis title
        svg.append("text")
            .style("font", axisTitleFontStyle)
            .attr("text-anchor", "middle")
            .attr("transform", "translate("+ (width/2) +","+(height+(margin.bottom-(margin.bottom/2)))+")")
            .text(x_axis_title);

        // y axis title
        svg.append("text")
            .style("font", axisTitleFontStyle)
            .attr("text-anchor", "middle")
            .attr("transform", "translate("+ (0-margin.left/2) +","+(height/2)+")rotate(-90)")
            .text(y_axis_title);

        // main title
        svg.append("text")
            .style("font", plotTitleFontStyle)
            .attr("text-anchor", "middle")
            .attr("transform", "translate("+ (width/2) +","+(-margin.top/2)+")")
            .text(function() { if(category_name === ""){ return "\"\"";} return category_name;});

        // draw plot
        svg.selectAll(".dot")
            .data(data)
            .enter()
            .append("circle")
            .attr("class", "dot")
            .attr("r", 2)
            .attr("cx", function(d) { return x(d[x_axis_attr]); })
            .attr("cy", function(d) { return y(d[y_axis_attr]); })
            .style("fill", "steelblue");
    }

});


function titleCase(str) {
  str = str.toLowerCase().split(' ');
  for (var i = 0; i < str.length; i++) {
    str[i] = str[i].charAt(0).toUpperCase() + str[i].slice(1);
  }
  return str.join(' ');
}