Comment choisir l'axe x et y dans un diagramme à bulles dc.js?

Question

J'ai un problème avec les axes x et y dans un graphique à bulles avec dc.js.

Une société a deux propriétés: une Ytd (aléatoirement) et une Ytdn1 (aléatoirement). Quelle est la logique pour choisir le bon axe X et Y?

L'axe x est pour moi: Ytd - Ytdn1 et l'axe Y est la variation. Y a-t-il une meilleure idée?

Comment choisir les bonnes échelles pour x et y? Que faire pour une meilleure lisibilité? Des idées ?

yearlyBubbleChart 
     .width(1200) 
     .height(400) 
     .transitionDuration(1500) 
     .margins({ top: 10, right: 50, bottom: 30, left: 40 }) 
     .dimension(yearlyDimension)  
     .group(yearlyPerformanceGroup) 
     .colors(["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"]) 
     .colorDomain([-500, 500]) 

     .colorAccessor(function (d) { 
      // console.log("Color"); 
      // console.log(d); 
      return +d.value.variation; 
     }) 
     .keyAccessor(function (p) { 
      return p.value.absGain/500; 
     }) 
     .valueAccessor(function (p) { 
      return p.value.variation/2; 
     }).radiusValueAccessor(function (p) { 
      return p.value.fluctuationPercentage; 
     }) 
     .maxBubbleRelativeSize(0.7) 
     .x(d3.scale.linear()) 
     .y(d3.scale.linear()) 
     .r(d3.scale.linear().domain([0, 4000])) 
       //##### Elastic Scaling 


     .elasticY(true) 
     .elasticX(true) 

     .yAxisPadding(100) 
     .xAxisPadding(100) 

     .renderHorizontalGridLines(true) 

     .renderVerticalGridLines(true) 

     .xAxisLabel('X') 

     .yAxisLabel('Y') 

     .renderLabel(true) 
     .label(function (p) { 
      return p.key; 
     }) 

     .renderTitle(true) 
     .title(function (p) { 
      return [ 
       p.key, 
       'Abs Gain: ' + p.value.absGain, 
       'Variation: ' + p.value.variation + '%' 

      ].join('\n'); 
     }) 

     .yAxis().tickFormat(function (v) { 

      // console.log("Hethi el V mta3 e tick") 
      // console.log(v); 
      return v + '%'; 
     }); 
dc.renderAll(); 

Voici un jsFiddle: http://jsfiddle.net/w8top6zj/

Answer 1

J'ai apporté quelques modifications au Code et je l'ai obtenu un meilleur résultat.

yearlyBubbleChart 
     .width(1200) 
     .height(400) 
     .transitionDuration(1500) 
     .margins({ top: 10, right: 50, bottom: 30, left: 40 }) 
     .dimension(yearlyDimension)  
     .group(yearlyPerformanceGroup) 
     .colors(["#ffffd9", "#edf8b1", "#c7e9b4", "#7fcdbb", "#41b6c4", "#1d91c0", "#225ea8", "#253494", "#081d58"]) 
     .colorDomain([-500, 500]) 

     .colorAccessor(function (d) { 
      // console.log("Color"); 
      // console.log(d); 
      return +d.value.variation; 
     }) 
     .keyAccessor(function (p) { 
      return p.value.absGain; 
     }) 
     .valueAccessor(function (p) { 
      return p.value.variation; 
     }).radiusValueAccessor(function (p) { 
      return p.value.fluctuationPercentage; 
     }) 
     .maxBubbleRelativeSize(0.7) 
     .x(d3.scale.linear()) 
     .y(d3.scale.linear()) 
     .r(d3.scale.linear().domain([0, 4000])) 
       //##### Elastic Scaling 


     .elasticY(true) 
     .elasticX(true) 

     .yAxisPadding(100) 
     .xAxisPadding(100) 

     .renderHorizontalGridLines(true) 

     .renderVerticalGridLines(true) 

     .xAxisLabel('X') 

     .yAxisLabel('Y') 

     .renderLabel(true) 
     .label(function (p) { 
      return p.key; 
     }) 

     .renderTitle(true) 
     .title(function (p) { 
      return [ 
       p.key, 
       'Abs Gain: ' + p.value.absGain, 
       'Variation: ' + p.value.variation + '%' 

      ].join('\n'); 
     }) 

     .yAxis().tickFormat(function (v) { 

      // console.log("Hethi el V mta3 e tick") 
      // console.log(v); 
      return v + '%'; 
     }); 
dc.renderAll(); 

Voici le: http://jsfiddle.net/n34gn7qg/

Maintenant, je n'ai que des problèmes avec le Min et Max, les deux extrémités ne sont pas entièrement représentées. Pourquoi ce comportement? J'ai dit au graphique à bulles d'utiliser elasticX et elasticY pour calculer chaque fois le domaine de valeurs (Ytd - Ytdn1).

Answer 2

Utilisez elasticX (true) et elasticY (true) pour obtenir l'échelle parfaite. Le problème est celui des bordures, qui cachent un cercle avec des valeurs max et min. Pour résoudre ce problème, vous pouvez masquer le chemin du clip tel qu'il est considéré here.

bubbleChart 
    ....    
    .x(d3.scale.linear()) 
    .y(d3.scale.linear()) 
    .elasticX(true) 
    .elasticY(true) 
    .... 
    .on('renderlet', function(chart, filter){ 
     chart.svg().select(".chart-body").attr("clip-path",null); 
    }); 

Vous obtiendrez quelque chose comme ça: