Scatter plot groups

#1

Hi, I have a Scatter plot with one group and 3 metrics, but sometimes users get confused when identifying the different groups, I wonder if there is a more visible way to differentiate the groups?

#2

Well, if you know what your groups are, you can use something like this:

let symbol = {
    color: "#fe8b3e",
    borderColor: "#756ccc",
    borderWidth: 2,
    opacity: 0.8,
    form: "roundRect",
    size: 15,
};
let symbol2 = {
    color: "#0095b7",
    borderColor: "#756ccc",
    borderWidth: 2,
    opacity: 1,
    form: "pin",
    size: 35,
};
let symbol3 = {
    color: "#cf2f23",
    borderColor: "#756ccc",
    borderWidth: 2,
    opacity: 1,
    form: "circle",
    size: 35,
};

let group1 = cf.Attribute("city")
    .limit(10)
    .sort("desc", "city");

// Put here the match for the groups in your data for example a group called city
let symbolMatch = {
    "City 1": symbol2,
    "City 2": symbol3
};
let myChart = cf.provider("your_provider")
    .source("your_source")
    .groupby(group1)
    .metrics(...metrics)
    .set("symbol", symbol) // default symbol
    .set("symbolMatch", symbolMatch) // symbol match setting
    .graph("Scatter Plot")
    .execute();

With that code “City 1” and “City 2” will look different

#3

I tried it over the weekend and it works fine, but if I had multiple groups I don’t think it would be as useful.

#4

You have the reason, so, instead you can use the color match for having a specific color for each group, like this:

let color = cf.Color()
    .match({
        "City 1": "red",
        "City 2": "blue",
        "City 3": "purple"
    });
let myChart = myData.graph("Scatter Plot")
    .set("color", color)
    .execute();
#5

Thank you, actually it was a good idea, it was the solution.