How to add specific colors to data in json with d3.js?

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39

// Define a JSON object with data
const data = [
  {name: 'A', value: 10},
  {name: 'B', value: 20},
  {name: 'C', value: 30},
  {name: 'D', value: 40}
];

// Define a color scale
const colorScale = d3.scaleOrdinal()
  .domain(data.map(d => d.name))
  .range(['#ff5733', '#33ff57', '#5733ff', '#33ffeb']);

// Create SVG element
const svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 200);

// Create rectangles for each data point
svg.selectAll('rect')
  .data(data)
  .enter()
  .append('rect')
  .attr('x', (d, i) => i * 50)
  .attr('y', 0)
  .attr('width', 50)
  .attr('height', d => d.value)
  .attr('fill', d => colorScale(d.name));

// Add labels to the rectangles
svg.selectAll('text')
  .data(data)
  .enter()
  .append('text')
  .attr('x', (d, i) => i * 50 + 25)
  .attr('y', d => d.value + 20)
  .attr('text-anchor', 'middle')
  .text(d => d.name);