// Dimensions of chart.
let margin = { top: 20, right: 20, bottom: 50, left: 290 },
    // width = parseInt(d3.select('#chart').style('width'), 10) - margin.left - margin.right,
    width = 650 - margin.left - margin.right,
    height = 550 - margin.top - margin.bottom;

// Start SVG     
let svg = d3.select("#chart").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 + ")");
    
// Scales: x and y
let x = d3.scaleLinear()
    .domain([0, 80])
	.range([0, width]);
let y = d3.scaleBand()
    // .domain([3, 6])
	.range([height, 0]);


let activities;
let xAxis, yAxis, xAxisEl, yAxisEl;
let barbell;


// Load data
const activitiesData = Promise.all([
    d3.tsv("data/hh-activities-withkids.tsv", d3.autoType)
]);
activitiesData.then(function(data) {
    activities = data[0].sort((a, b) => a.pctkidsf - b.pctkidsf);
    // console.log(activities);
    
    // Initialize chart now that data is loaded.
    initChart();
});


function initChart() {
    
    // x-axis
    xAxis = d3.axisBottom(x)
        .tickFormat(d => d + "%")
        .ticks(5)
	    .tickSize(-height-8)
	    .tickPadding(5);
    xAxisEl = svg.append("g")
	    .attr("class", "x axis bottom")
	    .attr("transform", "translate(0,"+(height+8)+")");
    xAxisEl.append("text")
	    .attr("class", "axistitle")
        .attr("text-anchor", "start")
	    .attr("x", 0).attr("y", 0)
	    .attr("dx", "-.75em").attr("dy", "2.5em")
	    .text("Engaged in Activity");
    xAxisEl.call(xAxis);


    // y-axis
    y.domain(activities.map(d => d.desc));
    yAxis = d3.axisLeft(y)
        .tickSize(0);
    yAxisEl = svg.append("g")
	    .attr("class", "y axis left")
        .attr("transform", "translate("+(-8)+",0)");
    yAxisEl.call(yAxis);
    
    
    // barbells
    barbell = svg.selectAll(".barbell")
        .data(activities)
        .join("g")
        .attr("class", "barbell")
        .attr("transform", d => 
            "translate(0,"+(y(d.desc)+(y.bandwidth()/2))+")")
        .attr("id", d => "act"+d.code);
    
    // connecting lines
    barbell.append("line")
        .attr("x1", d => x(d.pctkidsm))
        .attr("x2", d => x(d.pctkidsf))
        .attr("y1", 0).attr("y2", 0)
        .attr("stroke", "#000000");
    
    // circles
    barbell.append("circle")
        .attr("class", "men")
        .attr("cx", d => x(d.pctkidsm))
        .attr("cy", 0)
        .attr("r", 6);
    barbell.append("circle")
        .attr("class", "women")
        .attr("cx", d => x(d.pctkidsf))
        .attr("cy", 0)
        .attr("r", 6);
    
    // labels
    svg.append("text")
        .attr("x", x(activities[14].pctkidsm))
        .attr("y", y(activities[14].desc))
        .attr("text-anchor", "middle")
        .text("MEN");
    svg.append("text")
        .attr("x", x(activities[14].pctkidsf))
        .attr("y", y(activities[14].desc))
        .attr("text-anchor", "middle")
        .text("WOMEN");
}