dimple - color by series in bubble chart

Question

I've got the following data:

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 },
];

I want to draw a bubble chart with this definition:

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();

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.

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.

It should be simple...

Here is the fiddle: https://jsfiddle.net/93vk0c0q/2/

Answer 1

Like you said its simple. Attached a working code.

chart.addSeries(['id','region'], dimple.plot.bubble); // interchange

"use strict";

	var svg = dimple.newSvg('.chart-container',"100%","100%");
	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 },
    ];
	var chart = new dimple.chart(svg, data);
	chart.addCategoryAxis("x", "region");
    chart.addMeasureAxis("y", "average_price");
    chart.addMeasureAxis("z", "product_count"); 
    chart.addSeries(['id','region'], dimple.plot.bubble); 
	chart.draw();
	
	window.addEventListener('resize', function()
	{
		chart.draw(0, true);
	});

.chart-container {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
}

svg {
	background: #ddd;
}

<script src="https://d3js.org/d3.v3.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dimple/2.2.0/dimple.latest.js"></script>
<div class="chart-container"></div>