// LEGEND
const maxScalePercent = 50;

const colorScale = d3
  .scaleLinear()
  .domain([0, 0.1, 5, 10, 20, 75, 100])
  .range(["#f8f8f8", "#DCF6FE", "#A1CDF7", "#63ADF2", "#1D88ED", "#0C5497", "#051F39"]);

function buildLegend(container, colorScale, squareSize, squarePad, numSpace, numMax) {
  let legend = {
    array: [],
    size: 0,
    pad: 0,
  };

  for (let i = 0; i <= 100; i += 2) {
    legend.array.push(i);
  }
  legend.size = Math.floor(300 / legend.array.length);
  //legend.array = [0, 1, 2, 5, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100];
  const height = container.node().viewBox.baseVal.height;
  const width = container.node().viewBox.baseVal.height;

  const legendLayer = container.append("g").attr("class", "legend-layer");
  const l = legendLayer.selectAll("g").data(legend.array).enter();

  l.append("rect")
    .attr("class", "legend-rect")
    .attr("x", (d, i) => i * (legend.size + legend.pad))
    .attr("y", -legend.size - 12)
    .attr("width", legend.size)
    .attr("height", 10)
    .attr("fill", (d) => colorScale(d));

  l.append("text")
    .attr("class", "legend-text")
    .attr("x", (d, i) => i * (legend.size + legend.pad) + legend.size / 2)
    .attr("y", -(legend.size + 15))
    .attr("font-size", 11)
    .attr("text-anchor", "middle")
    .text((d, i) => (i % 5 === 0 ? d : ""));

  legendLayer
    .append("text")
    .attr("x", 0)
    .attr("y", -legend.size - 30)
    .attr("font-size", 11)
    .attr("fill", "#aaa")
    .text("% of population");

  legendLayer.attr("transform", `translate(${legend.size}, ${height})`);
}