D3JS Можно ли нарисовать вертикальный набор пузырьков в зависимости от размера

Question

D3JS Можно ли нарисовать вертикальный набор пузырьков в зависимости от размера Я очень новичок в фреймворке Java-скриптов, особенно в визуализации, такой как D3JS. Для основного графика я могу получить образцы из Интернета. Но такого рода манипулируемые графики я не умею создавать, как этот. Пожалуйста, помогите.

данные json:

[{Total: 750, left: 250, rigth: 500},
 {Total: 75, left: 25, rigth: 50}
]

Итого: общее количество работников

Слева: общее количество работниц

Справа: общее количество сотрудников мужского пола

Answer 1

Круги нарисованы с использованием следующего фрагмента.

Горизонтальные линии и цифры оставлены в качестве упражнения.

var svgWidth = 700, svgHeight = 700;
var svg = d3.select('body').append('svg').attr('width', svgWidth).attr('height', svgHeight);
var data = [
  {Total: 750, left: 250, right: 500},
  {Total: 75, left: 25, right: 50},
  {Total: 1000, left: 750, right: 250},
  {Total: 125, left: 25, right: 100}
];

var yScale = d3.scaleBand().domain(d3.range(data.length)).rangeRound([0,svgHeight]);
var radius = d3.scaleLinear().domain([0,1200]).range([10, yScale.bandwidth()*0.5]);

var bars = svg.selectAll('.bar')
    .data(data)
  .enter()
  .append('g')
    .attr('class', 'bar')
    .attr('transform', (d,i) => `translate(${svgWidth * 0.5},${yScale(i)+yScale.bandwidth()*0.5})`)
    ;
bars.append('circle')
    .attr('r', d => radius(d.Total));
bars.append('text')
    .text( d => d.Total)
    .attr('text-anchor', 'middle')
    .attr('dy', '0.3em');

.bar circle {
  fill:none;
  stroke:steelblue;
  stroke-width: 2;
}

<script src="https://d3js.org/d3.v5.min.js"></script>