Dimple js modify scatter shape

Question

Is there an easy way to modify the shape of the circles in a scatter plot using dimple.js?

I want different shapes for each color in this scatter plot. For instance, rectangles for blue, triangles for red, brackets for yellow...

How can I do that?

Answer 1

You can do it by writing a custom plot function.

If you don't care about certain features (e.g. tooltips, animation, repeated draws etc), you can cut them out and it reduces the code to something very minimal. Here's the most basic plotter for drawing a star.

var myCustomPlotter = {
  stacked: false,
  grouped: false,
  supportedAxes: ["x", "y"],
  draw: function (chart, series, duration) {
    chart._group
      .selectAll(".my-series")
      .data(series._positionData)
      .enter()
      .append("path")
    // Path Generated at http://www.smiffysplace.com/stars.html
      .attr("d", "M 0 10 L 11.756 16.180 L 9.511 3.090 L 19.021 -6.180 L 5.878 -8.090 L 0 -20 L -5.878 -8.090 L -19.021 -6.180 L -9.511 3.090 L -11.756 16.180 L 0 10")
      .attr("transform", function (d) { 
      return "translate(" +
        dimple._helpers.cx(d, chart, series) + "," + 
        dimple._helpers.cy(d, chart, series) + ")"; 
    }) 
      .style("fill", "yellow")
      .style("stroke", "orange");
  }
};

http://jsbin.com/mafegu/6/edit?js,output

Once you start adding tooltips etc it will get more complicated but you can use the original bubble method as a base and work from there:

https://github.com/PMSI-AlignAlytics/dimple/blob/master/src/objects/plot/bubble.js