Manipulating data prior to display in dimplejs

Question

I found bubble series in dimple js to be wrong in scaling in that it uses radius instead of area, which makes the difference between one data point and another much larger than it seems.

A way to fix this is by root squaring given attribute to 'y' axis, but I don't know if this is possible with dimplejs. Could anyone help, please? Here is my code:

  // First one is the code without squaring z.
  var svg = dimple.newSvg("#chartContainer", 500, 500);
  d3.csv("xyz.csv", function (data) {
    var chart = new dimple.chart(svg, data);
    chart.addCategoryAxis("x", "x");
    chart.addMeasureAxis("y", "y");
    chart.addMeasureAxis("z", "z");
    chart.addSeries(null, dimple.plot.bubble);
    chart.draw();
  });

  // Second block is supposed to be with squared z.
  var svg2 = dimple.newSvg("#chartContainer2", 500, 500);
  d3.csv("xyz.csv", function (data) {
    var chart2 = new dimple.chart(svg2, data);
    chart2.addCategoryAxis("x", "x");
    chart2.addMeasureAxis("y", "y");
    // How to manipulate 'z' data here before passing it to the code below?
    chart2.addMeasureAxis("z", "zsquare");
    mySeries = chart2.addSeries(null, dimple.plot.bubble);
    chart2.draw();
    mySeries.shapes.selectAll("circle").attr("r", 3);
  });

For the sake of testing, csv file could be something like:

x,y,z,zsquare
1,1,1,1
2,2,2,1.414
3,3,3,1.732
4,4,4,2
5,5,5,2.236

Answer 1

You could use a map function to modify your data. e.g:

// Second block is supposed to be with squared z.
var svg2 = dimple.newSvg("#chartContainer2", 500, 500);
d3.csv("xyz.csv", function (data) {

    data = data.map(function(datum) {
        if(datum.zsquare) {
           datum.zsquare = datum.zsquare * 2; // Manipulate your zsquare here
        }
        return datum; 
    });

    var chart2 = new dimple.chart(svg2, data);
    chart2.addCategoryAxis("x", "x");
    chart2.addMeasureAxis("y", "y");
    chart2.addMeasureAxis("z", "zsquare");
    mySeries = chart2.addSeries(null, dimple.plot.bubble);
    chart2.draw();
    mySeries.shapes.selectAll("circle").attr("r", 3);
});