function graph()

in correlations.js [566:693]
105 lines of code
4 McCabe index (conditional complexity)

  function graph(svgElem, signature, channel, product) {
    loadCorrelationData(signature, channel, product).then((data) => {
      d3.select(svgElem).selectAll("*").remove();

      if (
        !(product in data) ||
        !(signature in data[product][channel]["signatures"]) ||
        !data[product][channel]["signatures"][signature]["results"]
      ) {
        return;
      }

      let total_reference = data[product][channel].total;
      let total_group = data[product][channel]["signatures"][signature].total;

      let correlationData = data[product][channel]["signatures"][signature][
        "results"
      ].filter((elem) => Object.keys(elem.item).length <= 1);
      correlationData = sortCorrelationData(
        correlationData,
        total_reference,
        total_group
      );
      correlationData.reverse();

      let margin = { top: 20, right: 300, bottom: 30, left: 300 };
      let width = svgElem.getAttribute("width") - margin.left - margin.right;
      let height = svgElem.getAttribute("height") - margin.top - margin.bottom;

      let y0 = d3.scale.ordinal().rangeRoundBands([height, 0], 0.2, 0.5);

      let y1 = d3.scale.ordinal();

      let x = d3.scale.linear().range([0, width]);

      let color = d3.scale.ordinal().range(["blue", "red"]);

      let xAxis = d3.svg.axis().scale(x).tickSize(-height).orient("bottom");

      let yAxis = d3.svg.axis().scale(y0).orient("left");

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

      let options = [signature, "Overall"];

      correlationData.forEach((d) => {
        d.values = [
          { name: "Overall", value: d.count_reference / total_reference },
          { name: signature, value: d.count_group / total_group },
        ];
      });

      y0.domain(correlationData.map((d) => itemToLabel(d.item)));
      y1.domain(options).rangeRoundBands([0, y0.rangeBand()]);
      x.domain([0, 100]);

      svg
        .append("g")
        .attr("class", "x axis")
        .attr("transform", "translate(0," + height + ")")
        .call(xAxis);

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

      let bar = svg
        .selectAll(".bar")
        .data(correlationData)
        .enter()
        .append("g")
        .attr("class", "rect")
        .attr(
          "transform",
          (d) => "translate( 0," + y0(itemToLabel(d.item)) + ")"
        );

      let bar_enter = bar
        .selectAll("rect")
        .data((d) => d.values)
        .enter();

      bar_enter
        .append("rect")
        .attr("height", y1.rangeBand())
        .attr("y", (d) => y1(d.name))
        .attr("x", (d) => 0)
        .attr("value", (d) => d.name)
        .attr("width", (d) => x((d.value * 100).toFixed(2)))
        .style("fill", (d) => color(d.name));

      bar_enter
        .append("text")
        .attr("x", (d) => x((d.value * 100).toFixed(2)) + 5)
        .attr("y", (d) => y1(d.name) + y1.rangeBand() / 2)
        .attr("dy", ".35em")
        .text((d) => (d.value * 100).toFixed(2));

      let legend = svg
        .selectAll(".legend")
        .data(options.slice())
        .enter()
        .append("g")
        .attr("class", "legend")
        .attr(
          "transform",
          (d, i) => "translate(" + margin.right + "," + i * 20 + ")"
        );

      legend
        .append("rect")
        .attr("x", width - 18)
        .attr("width", 18)
        .attr("height", 18)
        .style("fill", color);

      legend
        .append("text")
        .attr("x", width - 24)
        .attr("y", 9)
        .attr("dy", ".35em")
        .style("text-anchor", "end")
        .text((d) => d);
    });
  }