This code performs the following actions: 1. Fetch Data: ...

June 27, 2025 at 10:28 PM

fetch('/data')
  .then(res => res.json())
  .then(data => {
    const width = 500;
    const height = 500;
    const radius = Math.min(width, height) / 2;

    const color = d3.scaleOrdinal()
      .domain(data.map(d => d.range))
      .range(d3.schemeCategory10);

    const arc = d3.arc()
      .innerRadius(0)
      .outerRadius(radius - 10);

    const pie = d3.pie()
      .sort(null)
      .value(d => d.count);

    const svg = d3.select("#chart")
      .append("svg")
      .attr("width", width)
      .attr("height", height)
      .append("g")
      .attr("transform", `translate(${width / 2}, ${height / 2})`);

    const arcs = pie(data);

    svg.selectAll("path")
      .data(arcs)
      .enter()
      .append("path")
      .attr("fill", d => color(d.data.range))
      .attr("d", arc)
      .append("title")
      .text(d => `${d.data.range}: ${d.data.count}`);

    // Add labels
    svg.selectAll("text")
      .data(arcs)
      .enter()
      .append("text")
      .attr("transform", d => `translate(${arc.centroid(d)})`)
      .attr("dy", "0.35em")
      .style("font-size", "12px")
      .style("text-anchor", "middle")
      .text(d => d.data.range);
  });

This code performs the following actions:

Fetch Data:
- The code retrieves JSON data from the /data endpoint using the fetch API.
- The retrieved data is expected to be an array of objects, each containing properties like range and count.
Set Visualization Dimensions:
- It defines the width and height of the chart (500x500 pixels) and calculates a radius for the pie chart, which is half the minimum of the width or height.
Create a Color Scale:
- It uses the D3 library to create a color scale (d3.scaleOrdinal) that assigns distinct colors (chosen from d3.schemeCategory10) to the range values in the data.
Define Arc and Pie Layout:
- arc: Defines the shape of pie chart slices, which have an inner radius of 0 (no hole) and an outer radius slightly smaller than the chart’s radius.
- pie: Configures the pie chart, specifying that the slices are based on the count value in the data without sorting.
Initialize SVG and Group for the Chart:
- It appends an svg element to a DOM element with the id="chart".
- The chart is centered using a translate transformation.
Bind Data and Create Pie Slices:
- It binds the transformed pie(data) output to path elements, creating a slice for each data entry.
- Each slice is styled:
  - The fill color is set based on the range value using the color scale.
  - The d attribute of the path is set using the arc generator to define the slice's shape.
- A title element is added to each slice to display a tooltip showing the range and count values.
Add Labels:
- It appends a text element to display a label (the range value) at the center of each pie slice.
- The label is positioned using the arc.centroid method to place it at the appropriate location and styled for alignment and readability.

Final Outcome:

The code renders an interactive pie chart using data from the /data endpoint:

Each slice represents a data point, sized proportionally to the count value.
The slices are colored by range, and tooltips and labels provide additional information about the data.
The chart is created using the D3.js library.

Generate your own explanations

Download our vscode extension

Read other generated explanations

Built by @thebuilderjr

This code performs the following actions: 1. **Fetch Data:** ...

Final Outcome:

This code performs the following actions: 1. Fetch Data: ...