CanvasXpress Highlighting & Selecting

Introduction to Highlighting & Selecting

CanvasXpress lets you steer the reader's eye with two complementary mechanisms. Highlighting is declarative — you name the variables or samples of interest in the configuration and they are emphasized on load. Selecting is interactive — the reader clicks or lassoes data points and the visualization responds.

Both share the same three render styles through the highlightMode and selectionMode parameters — highlight, ghost and focus — so a chart reads the same whether the emphasis came from your configuration or from a user's click. This is the classic storytelling-with-data technique of directing attention to a few elements by de-emphasizing everything else.

Declarative Highlighting

Set highlightVar (rows) or highlightSmp (columns) to the names you want to emphasize. With the default highlightMode: "highlight" the chosen marks are recolored with the emphasis color while the rest stay as they are.

var people = {
  "y": {
    "vars": ["Keith", "Nina", "Freddy", "Tracey", "Isabelle", "Penny"],
    "smps": ["Height", "Weight"],
    "data": [[174, 65.6], [161, 51.6], [194, 80.7], [160, 49.2], [173, 55.2], [151, 48.7]]
  }
};
var cXHi = new CanvasXpress("canvasHi", people, {
  graphType: "Scatter2D",
  xAxisTitle: "Height",
  yAxisTitle: "Weight",
  dataPointSizeScaleFactor: 2,
  highlightVar: ["Freddy", "Isabelle"],
  theme: "CanvasXpress"
});

Highlight Modes

The same highlighted set can be rendered three ways. highlight recolors the chosen marks; ghost fades the non-chosen marks; focus greys the non-chosen marks and keeps the chosen ones in full color (the gghighlight look). The strength of the ghost/focus de-emphasis is controlled by highlightGreyOut.

// same data + highlightVar, only highlightMode differs
new CanvasXpress("canvasModeH", people, { graphType: "Scatter2D", highlightVar: ["Freddy", "Isabelle"], highlightMode: "highlight" });
new CanvasXpress("canvasModeG", people, { graphType: "Scatter2D", highlightVar: ["Freddy", "Isabelle"], highlightMode: "ghost"   });
new CanvasXpress("canvasModeF", people, { graphType: "Scatter2D", highlightVar: ["Freddy", "Isabelle"], highlightMode: "focus"   });

Highlight by Predicate

Instead of naming elements, describe them. highlightBy evaluates a predicate against the data before rendering and populates highlightVar / highlightSmp for you — and automatically switches to focus mode. Aggregate each element with a statistic (mean, max, min, sum, median) and compare, or test an annotation field.

// focus the individuals taller than 170 cm (max of their measurements > 170)
var cXBy = new CanvasXpress("canvasBy", people, {
  graphType: "Scatter2D",
  xAxisTitle: "Height",
  yAxisTitle: "Weight",
  dataPointSizeScaleFactor: 2,
  highlightBy: { target: "variable", stat: "max", operator: ">", value: 170 },
  theme: "CanvasXpress"
});

Interactive Selection

Selection is driven by the reader. Click a data point (or lasso several) and selectionMode decides how the chart responds — the same highlight / ghost / focus styles, plus name (label the selection) and filter (keep only the selection). Use the buttons to switch modes, then click the points.

var cXSel = new CanvasXpress("canvasSel", people, {
  graphType: "Scatter2D",
  xAxisTitle: "Height",
  yAxisTitle: "Weight",
  dataPointSizeScaleFactor: 2,
  selectionMode: "focus",
  selectedDataPoints: ["Freddy"],
  theme: "CanvasXpress"
});

// switch the mode live
function setSelMode(mode) {
  cXSel.setConfig({ selectionMode: mode });
  cXSel.draw();
}

Emphasis Color

A single parameter, highlightColor, sets the emphasis color used by both highlighting and selection. The per-target colors (varHighlightColor, smpHighlightColor, nodeHighlightColor, selectionColor) are deprecated overrides that inherit highlightColor unless individually set.

var cXColor = new CanvasXpress("canvasColor", people, {
  graphType: "Scatter2D",
  xAxisTitle: "Height",
  yAxisTitle: "Weight",
  dataPointSizeScaleFactor: 2,
  highlightVar: ["Freddy", "Isabelle"],
  highlightColor: "rgb(30,120,220)",
  theme: "CanvasXpress"
});