hierarchical-estimates-visualizer/lib/d3experiment.js

import React, { useState, useEffect } from "react";
import * as d3 from "d3";

export function drawChart(height, width) {
  d3.select("#chart")
    .append("svg")
    .attr("width", width)
    .attr("height", height)
    .style("border", "1px solid black")
    .append("text")
    .attr("fill", "green")
    .attr("x", 50)
    .attr("y", 50)
    .text("Hello D3");
}

export function drawCircles() {
  var svg = d3
    .select("#circles")
    .append("svg")
    .attr("width", 960)
    .attr("height", 500)
    .attr("bgcolor", "blue");

  var background = svg
    .append("rect")
    .attr("width", "100%")
    .attr("height", "100%")
    .attr("fill", "blue");

  var ball = svg
    .append("circle")
    .attr("r", 73)
    .attr("cx", 480)
    .attr("cy", 250)
    .style("fill", "#ffe41e");
}

export function drawGraph() {
  let margin = { top: 20, right: 30, bottom: 20, left: 30 };
  let width = 900 - margin.left - margin.right;
  let height = 600 - margin.top - margin.bottom;

  var svg = d3
    .select("#graph")
    .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 + ")");

  let data = {
    nodes: [
      {
        id: 1,
        name: "A",
      },
      {
        id: 2,
        name: "B",
      },
      {
        id: 3,
        name: "C",
      },
      {
        id: 4,
        name: "D",
      },
      {
        id: 5,
        name: "E",
      },
      {
        id: 6,
        name: "F",
      },
      {
        id: 7,
        name: "G",
      },
      {
        id: 8,
        name: "H",
      },
      {
        id: 9,
        name: "I",
      },
      {
        id: 10,
        name: "J",
      },
    ],
    links: [
      {
        source: 1,
        target: 2,
      },
      {
        source: 1,
        target: 5,
      },
      {
        source: 1,
        target: 6,
      },

      {
        source: 2,
        target: 3,
      },
      {
        source: 2,
        target: 7,
      },
      {
        source: 3,
        target: 4,
      },
      {
        source: 8,
        target: 3,
      },
      {
        source: 4,
        target: 5,
      },
      {
        source: 4,
        target: 9,
      },
      {
        source: 5,
        target: 10,
      },
    ],
  };

  console.log(data);
  // List of node names
  var allNodes = data.nodes.map(function (d) {
    return d.name;
  });

  // A linear scale to position the nodes on the X axis
  var x = d3.scalePoint().range([0, width]).domain(allNodes);

  // Add the circle for the nodes
  svg
    .selectAll("mynodes")
    .data(data.nodes)
    .enter()
    .append("circle")
    .attr("cx", function (d) {
      return x(d.name);
    })
    .attr("cy", height - 30)
    .attr("r", 8)
    .style("fill", "#69b3a2");

  // And give them a label
  svg
    .selectAll("mylabels")
    .data(data.nodes)
    .enter()
    .append("text")
    .attr("x", function (d) {
      return x(d.name);
    })
    .attr("y", height - 10)
    .text(function (d) {
      return d.name;
    })
    .style("text-anchor", "middle");

  // Add links between nodes. Here is the tricky part.
  // In my input data, links are provided between nodes -id-, NOT between node names.
  // So I have to do a link between this id and the name
  var idToNode = {};
  data.nodes.forEach(function (n) {
    idToNode[n.id] = n;
  });
  // Cool, now if I do idToNode["2"].name I've got the name of the node with id 2

  // Add the links
  svg
    .selectAll("mylinks")
    .data(data.links)
    .enter()
    .append("path")
    .attr("d", function (d) {
      let start = x(idToNode[d.source].name);
      // X position of start node on the X axis
      let end = x(idToNode[d.target].name);
      // X position of end node
      return (
        [
          "M",
          start,
          height - 30,
          // the arc starts at the coordinate x=start, y=height-30 (where the starting node is)
          "A",
          // This means we're gonna build an elliptical arc
          (start - end) / 2,
          ",",
          // Next 2 lines are the coordinates of the inflexion point. Height of this point is proportional with start - end distance
          (start - end) / 2,
          0,
          0,
          ",",
          start < end ? 1 : 0,
          end,
          ",",
          height - 30,
        ]
          // We always want the arc on top. So if end is before start, putting 0 here turn the arc upside down.
          .join(" ")
      );
    })
    .style("fill", "none")
    .attr("stroke", "black");

  // labels for links
  svg
    .selectAll("mylinks")
    .data(data.links)
    .enter()
    .append("text")
    .attr("x", function (d) {
      let start = x(idToNode[d.source].name);
      // X position of start node on the X axis
      let end = x(idToNode[d.target].name);
      // X position of end node
      return start + (end - start) / 2;
    })
    .attr("y", function (d) {
      let start = x(idToNode[d.source].name);
      // X position of start node on the X axis
      let end = x(idToNode[d.target].name);
      // X position of end node
      return height - 30 - Math.abs(start - end) / 2; //height-30
    })
    .text(function (d) {
      return `${idToNode[d.source].name}-${idToNode[d.target].name}`;
    })
    .style("text-anchor", "top");

  svg
    .selectAll("text")
    .data(data.links)
    .enter()
    .append("text")
    .attr("x", function (d) {
      return d.source.x + (d.target.x - d.source.x) / 2;
    })
    .attr("y", function (d) {
      return d.source.y + (d.target.y - d.source.y) / 2;
    })
    .text(function (d) {
      return d.something;
    });
}

export function D3Experiment() {
  useEffect(() => {
    drawGraph();
  }, []);

  return (
    <div>
      <div id="chart"></div>
      <div id="circles"></div>
      <div id="graph"></div>
    </div>
  );
}

export default D3Experiment;