allow more than 2 accessors, for instance for Bubble charts

[Bondifrench]

Hi Andrea,
how about allowing to have a third accessor? like zaccessor, so when we do line.path.points(), we have arrays of 3 coordinates (x,y and z) and z can be assigned to the r parameter, so from a scatter plot charts we can also do bubble charts?

or change accessors to be an object, so it can be extended to more than 2 accessors? but i can guess that would be a breaking change.
Cheers

[andreaferretti]

Hi Bondifrench, I am a little undecided on this. In general, I know that one needs access to the original item: this is why all charts return some collection of objects having the shape

{
  item: <datum>,
  index: <index>,
  <curve>: <shape object>
}

In this way, one can refer to the item, as well as the curve. Moreover, all charts accept a parameter compute that one can fill with other things to compute, and this will be available as well. For instance, passing

compute: {
  r: function(item) { ... }
}

would result in objects of the shape

{
  item: <datum>,
  index: <index>,
  <curve>: <shape object>,
  r: <result of the above function>
}

Now, why doesn't all this work for bubble charts?

The reason is that Paths.js is not actually doing any work for scatterplots!

You see, the simplest way to produce a scatterplot (or a bubble chart) starting from a collection of data is just to iterate over each datum and draw a circle. There is no path computation to be done, hence no value added by paths.js. The reason I added it in the demo is that some people started asking for scatterplot support, so I showed that it was trivially doable with - say - the existing Stock diagram.

Now, the problem in your case is that the stock diagram has an item associated for each line, while you need something (the radius) to be computed for each point.

I see two solutions:

• either you iterate over the points yourself, or
• I could add a BubbleChart diagram, that has no actual curves to speak of, but allows to use the same API as the other charts - for instance associate something with each data point.

An example of the first in React would look more or less like this:

var bubbles = data.map(function(d) {
  <circle cx={f(d)} cy={g(d)} r={h(d)} />
});

return <svg>{ bubbles }</svg>

where f, g and h are the accessor functions.

Let me know what you think - in case it would be pretty simple to add a BubbleChart.

[Bondifrench]

Hi Andrea,
initially when I drew a scatter plot with paths-js, I actually used item to draw the different points.
However this is not convenient for 2 reasons:

• I like to use the map array method so I can render from the same stock.curves.map, for instance using mithril (but same in React I presume)"

stock.curves.map(function(d, i) {
            return [
            //m('path', {d: d.line.path.print(), stroke: d.color,fill: 'none', 'stroke-width' : 2}),
            // m('path', {d: d.area.path.print(),stroke: 'none',fill: d.color}),
            m('g', {style: {stroke: 'white', 'stroke-width': 3, fill: d.color}}, 
                d.line.path.points().map(function (p, j) {
                    return m('circle', {
                        cx:p[0], 
                        cy: p[1],
                        r: 5
                    })
                })
                )
            ]
        })

so I don't need to do a separate calculation.

• The second is, like for x and y, I might want to do a transformation on z, to scale it for instance, so z would not be equal to the original data. I understand that there are no path calculations but it would need to go through an amended line-chart-comp.