Distribution en pointillés (nombre de fréquences)

Question

J'essaie de reproduire un histogramme composé de points. Voici une bonne référence :

Mes données ont le format suivant :

{'name':'Company1', 'aum':42, 'growth':16},
{'name':'Company2', 'aum':36, 'growth':24},
{'name':'Company3', 'aum':34, 'growth':19},
...

Dans mon cas, je procède à un classement par aum et le codage couleur par growth . Tout semblait bien se passer jusqu'à ce que j'aille régler le cy attribut.

graphGroup.selectAll('circ')
    .data(data)
    .enter()
    .append('circ')
    .attr('r',8)
    .attr('cx', function(d) { return xScale(d.aum);})
    .attr('cy', ??????)
    .style('fill', function(d) { return colorScale(d.growth);});

Le seul moyen auquel je pense pour gérer cela est de réorganiser les données pour leur donner une valeur explicite d'index y ou quelque chose comme ça. Cependant, cela n'est pas pris en charge par ma suite statistique et la fonction n est trop important pour que je puisse le faire manuellement.

Question

Compte tenu de ma structure de données actuelle, est-ce que d3 peut m'aider à obtenir la bonne valeur de y ? Je pensais qu'un compteur pourrait fonctionner, mais je n'ai pas réussi à concevoir un compteur spécifique à un bac. Peut-être que d3 a une solution plus élégante qu'un compteur.

Answer 1

...est-ce que d3 peut m'aider avec quelque chose d'ad hoc pour obtenir la valeur y correcte ?

Non, il n'existe pas de méthode native pour cela. Mais c'est là que la plupart des gens se trompent avec D3 : D3 n'est pas un outil graphique (à l'exception du module d'axe, D3 ne peint rien !), c'est juste une collection de méthodes JavaScript. Ce fait donne à D3 à la fois sa faiblesse (courbe d'apprentissage abrupte) et son avantage (vous pouvez faire presque n'importe quoi avec D3).

Dans votre cas, par exemple, tout ce que je ferais serait de séparer les données en groupes (en utilisant un générateur d'histogramme, par exemple, ou en manipulant directement les données) et d'ajouter les cercles dans chaque groupe à l'aide de la fonction leurs indices .

Il peut s'agir de quelque chose comme ceci :

circle.attr("cy", function(_, i) {
    return maxValue - circleRadius * i;
});

Ceci ajoutera le premier cercle de chaque bin (groupe) à la base du SVG, puis chaque cercle suivant dans un cercle plus petit. y en fonction de son indice.

Regardez cette démo de base :

const data = d3.range(100).map(() => Math.random());
const svg = d3.select("svg");
const xScale = d3.scalePoint(d3.range(10).map(d => d / 10), [20, 480])
  .padding(0.5);
const binData = d3.histogram()
  .domain([0, 1])(data);
const g = svg.selectAll(null)
  .data(binData)
  .enter()
  .append("g")
  .attr("transform", d => "translate(" + xScale(~~(100 * d.x0) / 100) + ",0)");
g.selectAll(null)
  .data(d => d)
  .enter()
  .append("circle")
  .attr("r", 5)
  .attr("cy", function(_, i) {
    return 220 - 13 * i;
  })
  .style("fill", "gray")
  .style("stroke", "black");
const axisGroup = svg.append("g")
  .attr("transform", "translate(0,230)")
  .call(d3.axisBottom(xScale));

<script src="https://d3js.org/d3.v5.min.js"></script>
<svg width="500" height="250"></svg>