Work on Dot Visualization for the Visualization Page

[ShamaKamina]

We will start with the D3 zoomable circle packing visualization to enhance the visualization page. This will provide users with an interactive and intuitive way to explore the data.

Tasks

• [x] Integrate the D3 library into the project
• [x] Ensure compatibility with the existing frontend framework
• [x] Create a basic implementation of the D3 zoomable circle packing visualization
• [x] Ensure the visualization dynamically updates with the data from the backend
• [x] Ensure the data is correctly formatted and represented in the visualization
• [x] Add interactive features like zoom and hover effects
• [x] Balance the shading for when you hover around the circles. It is a bit harsh on the eyes.
• [x] Implement proper labeling for the visualization that we will demo on monday.

Example code

import * as d3 from 'd3';

const width = 932;
const height = width;

const pack = data => d3.pack()
  .size([width - 2, height - 2])
  .padding(3)(d3.hierarchy(data)
  .sum(d => d.value)
  .sort((a, b) => b.value - a.value));

const root = pack(data);

const svg = d3.create("svg")
  .attr("viewBox", `-${width / 2} -${height / 2} ${width} ${height}`)
  .style("display", "block")
  .style("margin", "0 -14px")
  .style("background", "white")
  .style("cursor", "pointer")
  .on("click", (event) => zoom(event, root));

const node = svg.append("g")
  .selectAll("circle")
  .data(root.descendants().slice(1))
  .join("circle")
    .attr("fill", d => d.children ? "lightblue" : "lightgreen")
    .attr("pointer-events", d => !d.children ? "none" : null)
    .on("mouseover", function() { d3.select(this).attr("stroke", "#000"); })
    .on("mouseout", function() { d3.select(this).attr("stroke", null); })
    .on("click", (event, d) => focus !== d && (zoom(event, d), event.stopPropagation()));

// More implementation details...

Documentation

https://observablehq.com/@d3/zoomable-circle-packing

[ShamaKamina]

@TebogoYungMercykay @IRIA7 I added more checkpoints