Customizing Selection Mark

Edit this page

Every interval selection also adds a rectangle mark to the visualization, to depict the extents of the selected region. The appearance of this mark can be customized with the following properties, specified under mark.

Property	Type	Description
cursor	String	The mouse cursor used over the interval mark. Any valid CSS cursor type can be used.
fill	Color	The fill color of the interval mark. Default value: `"#333333"`
fillOpacity	Number	The fill opacity of the interval mark (a value between `0` and `1`). Default value: `0.125`
stroke	Color	The stroke color of the interval mark. Default value: `"#ffffff"`
strokeOpacity	Number	The stroke opacity of the interval mark (a value between `0` and `1`).
strokeWidth	Number	The stroke width of the interval mark.
strokeDash	Number[]	An array of alternating stroke and space lengths, for creating dashed or dotted lines.
strokeDashOffset	Number	The offset (in pixels) with which to begin drawing the stroke dash array.

Examples

For example, the spec below imagines two users, Alex and Morgan, who can each drag out an interval selection. To prevent collision between the two selections, Morgan must press the shift key while dragging out their interval (while Alex must not). Morgan’s interval is depicted with the default grey rectangle, and Morgan’s with a customized red rectangle.