dimple - color by series in bubble chart
<p>I've got the following data:</p>

<pre><code>var data = [
    { id: 0, region: 'europe', average_price: 25, product_count: 10 },
    { id: 1, region: 'europe', average_price: 60, product_count: 40 },
    { id: 2, region: 'europe', average_price: 120, product_count: 15 },
    { id: 3, region: 'usa', average_price: 35, product_count: 20 },
    { id: 4, region: 'usa', average_price: 70, product_count: 70 },
    { id: 5, region: 'usa', average_price: 140, product_count: 35 },
    { id: 6, region: 'asia', average_price: 15, product_count: 15 },
    { id: 7, region: 'asia', average_price: 40, product_count: 40 },
    { id: 8, region: 'asia', average_price: 110, product_count: 25 },
];
</code></pre>

<p>I want to draw a bubble chart with this definition:</p>

<pre><code>var chart = new dimple.chart(svg, data);
chart.addCategoryAxis("x", "region");
chart.addMeasureAxis("y", "average_price");
chart.addMeasureAxis("z", "product_count");
// chart.addSeries(['region'], dimple.plot.bubble); 
chart.addSeries(['region','id'], dimple.plot.bubble);   
chart.draw();
</code></pre>

<p>My problem is that if I add the series on 'region', all data points for each region are aggregated in a single bubble. I don't want them to be aggregated. I want to draw the three bubbles for each region.</p>

<p>If I add the series on ['region','id'], bubbles are separate, but each bubble is given a different color. I want one color per region.</p>

<p>It should be simple...</p>

<p>Here is the fiddle: <a href="https://jsfiddle.net/93vk0c0q/2/" rel="nofollow">https://jsfiddle.net/93vk0c0q/2/</a></p>