const width = 800;
const height = width;

const svg = d3.select("#mainSvg")
    .style("width", "800")
    .style("height", "800");

const color = d3.scaleSequential([8, 0], d3.interpolateMagma)

const data = d3.csv("T1-Over-5-Countries.csv")
    .then(function(data) {
      data = {
        "children": data
      };

      function pack(data) {
        return d3.pack()
            .size([width / 2, height / 2])
            .padding(3)(
                d3.hierarchy(data)
                    .sum(d => d["Rate of Opposition"])
                    .sort(function(a, b) {
                      return b["Rate of Opposition"] - a["Rate of Opposition"];
                    })
            );
      }

      const root = pack(data);

      const node = svg.selectAll("g")
          .data(root.descendants())
          .join("g")
              .attr("transform", d => `translate(${d.x + 1},${d.y + 1})`);

      node.append("circle")
          .attr("r", d => d.r)
          .attr("fill", d => color(d.height));

      const leaf = node.filter(d => !d.children);

      node.append("title")
          .text(function(d) {
            return `${d.data["Country"]}\n${d.value + "%"}`;
          });
    });