OtoSense time visualizations

Class TimeChannel

Renders a single-row visualization.

Required props:

• channel An AudioChannel, DataChannel, or WinnersChannel containing the data to render
• from The start timestamp of the channel, in microseconds.
• to The end timestamp of the channel, in microsedonds.

Optional props:

• annotations An array of Timerange objects to render as overlays on the chart.
• chartType The type of chart to render. Options are bargraph, heatmap, spectrogram, peaks, and winners (default bargraph)
• enablePlayback (audio channels only) Embeds playback controls in the chart: Click to set position, double click to start, spacebar to pause/resume
• height The height of the chart in pixels (default 50)
• menu A JSX element to render to the right of the channel title
• params An object with display parameters (currently only supports chunkSize in milliseconds)
• renderProgress A JSX element to display after the component has mounted, before the visualization is complete
• subtitle A string to display under the channel title
• title A channel title to display

Optional event handler props

• clickHandler Single click
• contextMenuHandler Context menu (right click or Mac ctrl+click)
• keydownHandler Keydown
• mouseOutHandler Mouse out
• startSelecting Mouse down
• zoomHandler Mouse wheel
• suppressEvents Disables all events including defaults

Advanced props

• getAnnotationColor A function that takes a Timerange and returns a color code for drawing overlays
• getAnnotationHighlight A function that takes a Timerange and returns a boolean value for highlighting overlays
• hideTooltips Disables hover tooltips for data charts

Interface AudioChannel

An object representing an audio visualization.

Required keys:

• type Must be 'audio'

Either one of these keys is required (not all three):

• url The URL of a WAV file to visualize
• buffer An ArrayBuffer with WAV data that can be read by the browser (header + PCM)
• image A pre-drawn image data URL

Optional keys:

• from The start timestamp of the audio, in microseconds, if different from the TimeChannel element
• to The start timestamp of the audio, in microseconds, if different from the TimeChannel element
• windowSize The width of windows used for calculating signal peaks when drawing a peaks diagram.

Interface DataChannel

An object representing a time series visualization.

Required keys:

• type Must be 'data'
• data An array of DataPoint objects

Optional keys:

• bargraphMax For a bar graph, the numeric value for the top of the chart (defaults to 1 so you'll want to set this unless your data is all under 1)
• bargraphMin The numeric value for the bottom of the chart (defaults to -2)
• chartType Either 'bargraph' or 'heatmap'
• filters An array of functions with the signature (params: object, data: DataPoint[]) to apply to the data before rendering
• getColor A function taking a DataPoint and outputting a color code (must be set for a useful heatmap)
• image A pre-drawn image data URL for the chart
• renderTooltip A function that takes a timestamp in microseconds (based on the position of the mouse cursor) and returns a renderable element (a string or JSX element) to display in a tooltip

Interface WinnersChannel

An object representing a visualization with two or more rows displaying the highest value for each point in time.

Required keys:

• type Must be 'data'
• chartTYpe Must be 'winners'
• categories An array of the categories represented in the data
• data An array of WinnerDataPoint objects

Optional keys:

• color A color code for the data points on the chart
• image A pre-drawn image data URL for the chart

Interface Timerange for annotation overlays

• bt Start time in microseconds
• tt End time in microseconds
• color (optional) A hex code color for drawing an overlay.
• highlighted (optional) A boolean value to add additional emphasis to the element.

Interface DataPoint for time series data

Data points must either have both bt and tt, or time

• bt Start time in microseconds
• tt End time in microseconds
• time Point in time in microseconds, if representing an instantaneous or chunk-sized event (display width will be determined by the prop params.chunkSize passed to the TimeChannel, defaulting to 972ms)
• value Any value (should be numeric for a bargraph)

Interface WinnerDataPoint for category winner time series data

• time Point in time in microseconds (display width will be determined by the prop params.chunkSize passed to the TimeChannel, defaulting to 972ms)
• winner The category that won this point in time (may be null)

CSS classes

• otv--vis-channel The outermost container of TimeChannel
• otv--channel-title The title displayed above the chart
• otv--canvas-container A div wrapping the visualization image
  • otv--data Additional class applied to data channels
  • otv--audio Additional class applied to audio channels
• otv--overlay-selections The overlay container
• otv--selection The individual overlay items
  • otv--annotation-highlight Highlighted items
• otv--indicator The current position indicator for audio playback
• otv--tooltip The tooltip for data channels

TODO

• Support (bt, tt) for winners
• Add CSS
• More documentation
• More shortcuts
• Examples