Я пытаюсь создать точечный график / пузырьковую диаграмму, как это:

введите описание изображения здесь

X будет категориями, а Y — своего рода. Все расстояния между галочками могут быть равны 1 или некоторым другим статическим / ручным значениям, и только размер точки должен изменяться в зависимости от значения в файле CSV.

Ось X и размер точки уже работают, но я не могу понять, как равномерно распределить центры точек по оси y.

{amp}lt;html{amp}gt; {amp}lt;head{amp}gt; {amp}lt;link rel="stylesheet" type="text/css" href="http://localhost/css/c3-eb4b9be8.css"{amp}gt; {amp}lt;/head{amp}gt; {amp}lt;body{amp}gt; {amp}lt;div id="chart"{amp}gt;{amp}lt;/div{amp}gt; {amp}lt;script src="https://localhost/js/d3-5.8.2.min-c5268e33.js" charset="utf-8"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script src="https://localhost/js/c3.min-c0990868.js"{amp}gt;{amp}lt;/script{amp}gt; {amp}lt;script{amp}gt; var chart = c3.generate( { x : 'Brand', bindto: '#chart', data: { url: 'http://localhost/data/brand-vendor.csv', x: 'Brand', type: 'scatter' }, axis: { x: { type: 'category' }, y: { max: 40, min: 0, padding: 0 } }, point: { r: function(d) { return ( d.value / 2 ); } }, }); {amp}lt;/script{amp}gt; {amp}lt;/body{amp}gt; {amp}lt;/html{amp}gt; 

И случайные фиктивные данные для тестирования как CSV:

 Brand,Brand1,Brand2,Brand4,Brand5 Shop1,10,20,5,8 Shop2,30,40,25,30 Shop3,15,20,15,10 Shop4,5,10,8,5 

Как заставить это работать? Кто-нибудь может указать мне правильное направление?