// set the dimensions and margins of the graph
const bc_margin = {
    top: 50,
    right: 400,
    bottom: 45,
    left: 75,
  },
  bc_width = 945 - bc_margin.left - bc_margin.right,
  bc_height = 472 - bc_margin.top - bc_margin.bottom;

// append the svg object to the body of the page
const bc_svg = d3
  .select('#bubble_chart')
  .append('svg')
  .attr(
    'width',
    bc_width + bc_margin.left + bc_margin.right,
  )
  .attr(
    'height',
    bc_height + bc_margin.top + bc_margin.bottom,
  )
  .append('g')
  .attr(
    'transform',
    `translate(${bc_margin.left},${bc_margin.top})`,
  );

// read the data
const data = [
  { Make: 'Toyota', Horsepower: 180, Torque: 176, 'Highway MPG': 35 },
  { Make: 'Honda', Horsepower: 190, Torque: 179, 'Highway MPG': 33 },
  { Make: 'Ford', Horsepower: 210, Torque: 220, 'Highway MPG': 30 },
  { Make: 'Chevrolet', Horsepower: 220, Torque: 225, 'Highway MPG': 28 },
  { Make: 'Nissan', Horsepower: 200, Torque: 195, 'Highway MPG': 32 },
  // Add more data here...
];

// add chart title
bc_svg
  .append('text')
  .attr('x', bc_width / 2)
  .attr('y', -20)
  .attr('text-anchor', 'middle')
  .style('font-size', '22px')
  .text('Correlation Between Torque, Horsepower, and MPG');

// add x axis
const x = d3
  .scaleLinear()
  .domain([100, 700])
  .range([0, bc_width]);
bc_svg
  .append('g')
  .attr('transform', `translate(0, ${bc_height})`)
  .call(d3.axisBottom(x));

// add x axis label
bc_svg
  .append('text')
  .attr('text-anchor', 'middle')
  .attr('x', bc_width / 2)
  .attr('y', bc_height + 40)
  .text('Avg. Horsepower');

// add y axis
const y = d3
  .scaleLinear()
  .domain([0, 800])
  .range([bc_height, 0]);
bc_svg.append('g').call(d3.axisLeft(y));

// add y axis label:
bc_svg
  .append('text')
  .attr('text-anchor', 'middle')
  .attr('x', -bc_height / 2)
  .attr('y', -50)
  .text('Avg. Torque')
  .attr('transform', 'rotate(-90)');

// add a scale for bubble size
const z = d3
  .scaleLinear()
  .domain([0, d3.max(data, (d) => d['Highway MPG'])])
  .range([1, 40]);

// add a scale for bubble color
const makes = data.map((d) => d.Make);
const makeColors = makes.map((el, i, arr) =>
  d3.interpolateTurbo(i / arr.length),
);
const myColor = d3
  .scaleOrdinal()
  .domain(makes)
  .range(makeColors);

// ---------------------------//
//      tooltip               //
// ---------------------------//

// -1- create a tooltip div that is hidden by default:
const tooltip = d3
  .select('#bubble_chart')
  .append('div')
  .style('opacity', 0)
  .attr('class', 'tooltip')
  .style('background-color', 'black')
  .style('border-radius', '5px')
  .style('padding', '10px')
  .style('color', 'white')
  .style('font-family', 'sans-serif');

// -2- create 3 functions to show / update (when mouse moves but stay on same circle) / hide the tooltip
const showTooltip = (event, d) => {
  tooltip.transition().duration(200);
  tooltip
    .style('opacity', 1)
    .html('Make: ' + d.Make)
    .style('left', event.x + 25 + 'px')
    .style('top', event.y + 25 + 'px');
};
const moveTooltip = (event, d) => {
  tooltip
    .style('left', event.x + 25 + 'px')
    .style('top', event.y + 25 + 'px');
};
const hideTooltip = (event, d) => {
  tooltip.transition().duration(200).style('opacity', 0);
};

// add dots
bc_svg
  .append('g')
  .selectAll('dot')
  .data(data)
  .join('circle')
  .attr('class', 'bubbles')
  .attr('cx', (d) => x(d.Horsepower))
  .attr('cy', (d) => y(d.Torque))
  .attr('r', (d) => z(d['Highway MPG']))
  .style('fill', (d) => myColor(d.Make))
  .attr('stroke', 'black')
  .on('mouseover', showTooltip)
  .on('mousemove', moveTooltip)
  .on('mouseleave', hideTooltip);

// ---------------------------//
//       legend              //
// ---------------------------//

// add legend: circles
const valuesToShow = [20, 40];
const xCircle = 745;
const xLabel = 810;
bc_svg
  .selectAll('legend')
  .data(valuesToShow)
  .join('circle')
  .attr('cx', xCircle)
  .attr('cy', (d) => bc_height - 100 - z(d))
  .attr('r', (d) => z(d))
  .style('fill', 'none')
  .attr('stroke', 'black');

// add legend: segments
bc_svg
  .selectAll('legend')
  .data(valuesToShow)
  .join('line')
  .attr('x1', (d) => xCircle + z(d))
  .attr('x2', xLabel)
  .attr('y1', (d) => bc_height - 100 - z(d))
  .attr('y2', (d) => bc_height - 100 - z(d))
  .attr('stroke', 'black')
  .style('stroke-dasharray', '2,2');

// add legend: labels
bc_svg
  .selectAll('legend')
  .data(valuesToShow)
  .join('text')
  .attr('x', xLabel)
  .attr('y', (d) => bc_height - 100 - z(d))
  .text((d) => d)
  .style('font-size', '14px')

