how to modify the size and color of a pts on a chart depending on the value? dimple.js

Question

I have a two axis chart (x,y), i ploted all the points

  var x = myChart.addAxis("x","Id");
  x.addOrderRule("Id");
  var y = myChart.addMeasureAxis("y", "VALUE");
  y.tickFormat = ",";
  myChart.addSeries(null, dimple.plot.line);
  var z = myChart.addSeries(["Version","Id","STATUS"], dimple.plot.line);
  myChart.addLegend(60, 10, 500, 20, "left", z);
  myChart.draw();
  x.shapes.selectAll("text").remove();

I want to plot some points depending on the value of "STATUS" Ex: STATUS = PASS BLUE STAUTS = FAIL RED

Could someone help me please

Thanks

Answer 1

By the look of your code the series z will already be coloured by STATUS meaning all you need to do is assign some specific colours:

var z = myChart.addSeries(["Version","Id","STATUS"], dimple.plot.line);
myChart.assignColor("PASS", "blue");
myChart.assignColor("FAIL", "red");
myChart.addLegend(60, 10, 500, 20, "left", z);
myChart.draw();

though you'd probably want to specify some slightly nicer shades of red and blue.

There are more options and you can see more detail on assignColour here:

https://github.com/PMSI-AlignAlytics/dimple/wiki/dimple.chart#wiki-assignColor

To size points based on a category you need to encode them to numbers and plot them as bubbles on the z axis, which you can do as follows. The bubble series will line up with the points of the line chart making them look like sized markers.

data.forEach(function (d) {
   d["Status Score"] = (d.STATUS === "PASS" ? 80 : 100);
}, this);
var myChart = new dimple.chart(svg, data);
var x = myChart.addAxis("x","Id");
x.addOrderRule("Id");
var y = myChart.addMeasureAxis("y", "VALUE");
y.tickFormat = ",";
var z = myChart.addMeasureAxis("z", "Status Score");
z.overrideMin = 0;
z.overrideMax = 100;
myChart.addSeries(null, dimple.plot.line);
myChart.addSeries(["Version","Id","STATUS"], dimple.plot.line);
myChart.addSeries(["Version","Id","STATUS"], dimple.plot.bubble);
myChart.addLegend(60, 10, 500, 20, "left", z);
myChart.draw();

Here I'm encoding Pass as 80 and Fail as 100 (assuming those are the only 2 statuses). I'm then fixing the bubble size (z axis) from minimum 0 to maximum 100. That means that 100 is the full size bubble and 0 is the smallest bubble, so you can play with the scores in the status score to make you bubbles the desired size.