Guides > Ordinal Brushes

Ordinal Brushes

You can turn any OrdinalFrame into an interactive region with a brush by using the interaction prop. Interaction settings:

start: The function with parameters (e,column) to run on the start of a brush where e is the array of the range of the brush and column is the column name of the brush
during: The function with parameters (e,column) to run at the during a brush
end: The function with parameters (e,column) to run at the end of a brush
columnsBrush: turns on a brush for each column (parallel coordinates style) can be true or false. Otherwise you get a brush for selecting columns
extent: The base value for the brush, so you can set an extent if you want to initialize the brush with

Example

Number of points in brushed region: 94

import OrdinalFrame from "semiotic/lib/OrdinalFrame"
const frameProps = { 
/* --- Data --- */
  data: [{ value: 78 },
    { value: 81 }, ... ],

/* --- Size --- */
  size: [700,200],
  margin: { left: 20, top: 0, bottom: 50, right: 20 },

/* --- Layout --- */
  type: "swarm",
  summaryType: "violin",
  projection: "horizontal",

/* --- Process --- */
  oAccessor: function(){return"singleColumn"},
  rAccessor: "value",
  rExtent: [0,100],

/* --- Customize --- */
  style: { fill: "#ac58e5", stroke: "white", strokeWidth: 1 },
  summaryStyle: { fill: "#ac58e5", fillOpacity: 0.3, stroke: "white", strokeWidth: 1 },
  axes: [{ orient: "bottom" }]
}

export default class CreateOrdinalBrush extends React.Component {
  constructor(props) {
    super(props)

    this.state = { selectedDataCount: 200, extent: [20, 70] }
    this.changeExtent = this.changeExtent.bind(this)
    }

    changeExtent(e) {
    this.setState({
      selectedDataCount: frameProps.data.filter(d => d.value >= e[0] && d.value <= e[1])
        .length
    })
    }
    render() {
      return (
        <OrdinalFrame {...frameProps} interaction={{
          columnsBrush: true,
          extent: { singleColumn: this.state.extent },
          end: this.changeExtent
        }}/>
      )}
}