@decidables/detectableelements
Web Components for Visualizing Signal Detection Theory in d′etectable
The web components used to visualize Signal Detection Theory in d′etectable. There is an emphasis on direct manipulation and consistent use of color. SVG is used extensively to provide clean scalable diagrams.
yarn add @decidables/detectableelements
import '@decidables/detectableelements';
A bare import is used to register the elements in the custom registry, so they are then available for use in HTML.
Building blocks for interactive visualizations of SDT
Control panel for SDT demos
A configurable set of controls for user manipulation of examples of signal detection theory. Controls can be provided for the number of trials, the timing of trials, the coherence of the dots on signal trials, the balance of payoff on incentivized trials, the coloring used in the results table, the use of ROC or zROC coordinates in ROC space, and for running, pausing, or resetting a block of trials.

trials: number = undefined
 Show a slider for setting the number of trials, initialized to the value provided
 Options

1
to100
in steps of1


duration: number = undefined
 Show a slider for setting the duration of the stimulus, wait, and intertrial interval on each trial, initialized to the value provided in milliseconds
 Options

10
to2000
in steps of10


coherence: number = undefined
 Show a slider for setting the proportion of coherent dots on signal trials
 Options

0
to1
in steps of0.01


payoff: number = undefined
 Show a slider for setting the relative dollar payoff for hits and misses compared to false alarms and correct rejections
 Options

0
to100
in steps of1


color: string = undefined
 Show a set of options to select how to color the cells in the results table
 Options

'none'
 No use of color

'accuracy'
 Color based on accuracy of responses

'stimulus'
 Color based on signal or noise stimulus

'response'
 Color based on 'signal' or 'noise' response

'outcome'
 Color based on outcome of hit, miss, false alarm or correct rejection

'all'
 Color based on stimulus, response, and outcome


zRoc: boolean = undefined
 Show a switch to set whether to use ztransformed ROC coordinates (
true
) or ROC coordinates (false
)
 Show a switch to set whether to use ztransformed ROC coordinates (

run: boolean = false
 Show a button to run the task

pause: boolean = false
 Show a button to pause the task

reset: boolean = false
 Show a button to reset the task

complete()
 Indicates that a trial block is done, so it can no longer be paused

detectablecontroltrials
 Indicates the number of trials slider has been adjusted

detail

trials: number
 The new number of trials


detectablecontrolduration
 Indicates the duration of trials slider has been adjusted

detail

duration: number
 The new duration


detectablecontrolcoherence
 Indicates the coherence of stimulus dots slider has been adjusted

detail

coherence: number
 The new coherence


detectablecontrolpayoff
 Indicates the payoff slider has been adjusted

detail

payoff: number
 The new payoff


detectablecontrolcolor
 Indicates the color selection for the results table has been toggled

detail

color: string
 The new color scheme


detectablecontrolzroc
 Indicates the plot coordinates switch have been changed

detail

zRoc: boolean
 Whether or not to use ztransformed coordinates now


detectablecontrolrun
 Indicates the run button has been pushed

detectablecontrolpause
 Indicates the pause button has been pushed

detectablecontrolreset
 Indicates the reset button has been pushed
<detectablecontrol trials="15" duration="1500" coherence="0.2" payoff="75" color="outcome" zroc run pause reset></detectablecontrol>
Response buttons, feedback, and payoffs for signal detection tasks
This element provides 'present' and 'absent' response buttons. It can also display a running count of the trials, display feedback in terms of accuracy or SDT outcome, and display the current trial and total payoff.

interactive: boolean = false
 Allow user to respond, instead of just displaying simulated model responses

feedback: string = 'outcome'
 What type of feedback to display
 Options

'none'
 No feedback

'accuracy'
 Feedback in terms of accuracy, i.e. 'correct' or 'error'

'outcome'
 Feedback in terms of outcome, i.e. 'hit, 'miss', 'false alarm', or 'correct rejection'


trial: boolean = false
 Display the running count of trials, i.e. 'Trial: 2 of 10'

payoff: string = 'none'
 What payoff information to display
 Options

'none'
 No payoff information displayed

'trial'
 Only display payoff for the current trial

'total'
 Display payoff for the current trial and display the total payoff for the block


hitpayoff: number = 0
 Value of payoff for a hit

misspayoff: number = 0
 Value of payoff for a miss

correctrejectionpayoff: number = 0
 Value of payoff for a correct rejection

falsealarmpayoff: number = 0
 Value of payoff for a false alarm

noresponsepayoff: number = 0
 Value of payoff for no response

start(signal, trial)
 Indicates that a trial has started, and its time to wait for a response
 Parameters

signal: string
 Whether this is a signal
'present'
or'absent'
trial
 Whether this is a signal

trial: number
 The count of the trial within the block


stop()
 Indicates that the trial is over and it is time to display any requested feedback
 Note: If no response has been made yet, the trial is recorded as having no response

present()
 Emulate a 'present' response

absent()
 Emulate an 'absent' response

responded(response)
 Emulate a response
 Parameters

response: string
 Whether to emulate a
'present'
or'absent'
response
 Whether to emulate a


reset()
 Reset to the state at the start of a block of trials

detectableresponse
 Indicates that a response has been made on this trial

detail

trial: number
 The count of this trial in the block

signal: string
 Whether the signal was actually
'present'
or'absent'
 Whether the signal was actually

response: string
 Whether the response was
'present'
or'absent'
 Whether the response was

outcome: string
 The outcome of the trial as a hit (
'h'
), miss ('m'
), correct rejection ('cr'
), or false alarm ('fa'
)
 The outcome of the trial as a hit (

payoff: number
 The payoff for this trial

h: number
 Total hits in this block

m: number
 Total misses in this block

fa: number
 Total false alarms in this block

cr: number
 Total correct rejections in this block

nr: number
 Total no responses in this block

totalPayoff: number
 Total payoff for the block

<detectableresponse interactive feedback="outcome" trial payoff="total" hitpayoff="60" misspayoff="60" falsealarmpayoff="40" correctrejectionpayoff="40" noresponsepayoff="100"></detectableresponse>
Interactive table of SDT outcomes
A results table for signal detection tasks. The results are presented in a two by two table organized by stimuli (signal present or absent) and responses ('present' or 'absent') leading to four possible outcomes: hits, misses, false alarms, and correct rejections. Results on signal present trials are optionally marginalized with the hit rate and those on signal absent trials with the false alarm rate. Results on response 'present' trials are optionally marginalized with the positive predictive value and those on response 'absent' trials with the false omission rate. And overall results are optionally marginalized with accuracy.

interactive: boolean = false
 Allow user to change values in the table

numeric: boolean = false
 Show numeric values instead of just labelling the cells

summary: Set = <empty>
 Which marginals to display
 Expressed in HTML as a spaceseparated list
 Options

'stimulusRates'
 Display hit rate and false alarm rate

'responseRates'
 Display positive predictive value and false omission rate

'accuracy'
 Display overall accuracy


color: string = 'outcome'
 How to color the cells
 Options

'none'
 No colors

'accuracy'
 Color based on accuracy, i.e. correct or error

'stimulus'
 Color based on stimulus present or absent

'response'
 Color based on response 'present' or 'absent'

'outcome'
 Color based on hits, misses, false alarms and correct rejections

'all'
 Color based on stimulus, response, and outcome


hits: number = 40
 Number of hits

misses: number = 60
 Number of misses

falsealarms: number = 75
 Number of false alarms

correctrejections: number = 25
 Number of correct rejections

payoff: boolean = false
 Whether to display payoffs

hitpayoff: number = undefined
 Payoff for hits

misspayoff: number = undefined
 Payoff for misses

correctrejectionpayoff: number = undefined
 Payoff for correct rejections

falsealarmpayoff: number = undefined
 Payoff for false alarms

detectabletablechange
 One or more values in the table have changed

detail

h: number
 Hits

m: number
 Misses

fa: number
 False alarms

cr: number
 Correct rejections

hr: number
 Hit rate

far: number
 False alarm rate

ppv: number
 Positive predictive value

fomr: number
 False omission rate

acc: number
 Accuracy

<detectabletable interactive numeric summary="stimulusRates responseRates accuracy" = color="outcome" hits="80" misses="20" falsealarms="35" correctrejections="65" payoff hitpayoff="60" misspayoff="60" falsealarmpayoff="40" correctrejectionpayoff="40"></detectabletable>
Displays stimuli for random dot kinematogram signal detection task
When run, a block of trials is presented. Before each trial is an intertrial interval (ITI). Each trial then consists of a stimulus followed by a period of waiting for a response. The stimulus consists of a circle with a collection of small dots moving about. Some trials are signal trials and others are noise trials. On noise trials, the directions of the dots is independent and random. On signal trials, a subset of the dots move coherently in the same direction. The task can be paused and then resumed, and it can also be reset and run again.

coherence: number = 0.5
 Proportion of dots moving coherently

count: number = 100
 Number of dots

probability: number = 0.5
 Probability of signal (as opposed to noise)

duration: number = 2000
 Duration of stimulus in milliseconds

wait: number = 2000
 Duration of wait period for response in milliseconds

iti: number = 2000
 Duration of intertrial interval in milliseconds

trials: number = 5
 Number of trials per block

running: boolean = false
 Currently executing block of trials

reset()
 Stops a currently running or ended block of trials and resets everything to be ready to run again

rdkblockstart
 Indicates the beginning of a block of trials

rdkblockend
 Indicates the completion of a block of trials

detail
forrdkblockstart
andrdkblockend

trials: number
 Number of trials in the block


rdktrialstart
 Indicates the beginning of a trial (iti is over and stimulus is about to start)

rdktrialmiddle
 Indicates the middle of a trial (stimulus is over and the wait is about to start)

rdktrialend
 Indicates the end of a trial (wait is over and iti is about to start)

detail
forrdktrialstart
,rdktrialmiddle
, andrdktrialend

trials: number
 Number of trials in the block

duration: number
 Duration of stimulus in milliseconds

wait: number
 Duration of wait period in milliseconds

iti: number
 Duration of intertrial interval in milliseconds

trial: number
 Count of trial in block (onebased)

signal: string
 Whether the signal is
present
orabsent
in this trial
 Whether the signal is

<rdttask coherence="0.1" count="50" probability="0.5" duration="1000" wait="1000" iti="500" trials="10" running></rdttask>
Interactive receiver operating characteristic (ROC) plot
An ROC plot that can show one or more locations in ROC space or zROC space. Each location can be shown with a point, and/or with intersecting isosensitivity and isobias curves. In interactive mode, the points can be moved via direct manipulation with the mouse, touch, or keyboard arrows. The plot can also display the topography of the space with contour lines indicating isosensitivity, isobias, or isoaccuracy.

interactive: boolean = false
 Allow direct manipulation of points in the plot

contour: string = undefined
 Show contour lines on plot
 Options

undefined
 Show no contours

'sensitivity'
 Show isosensitivity contours

'bias'
 Show isobias contours

'accuracy'
 Show isoaccuracy contours


point: string = 'all'
 Show a point on the plot for each location
 Options:

'all'
 Show points for all locations

'first'
 Only show a point for the first (
'default'
) location
 Only show a point for the first (

'rest'
 Show points for all except the first (
'default'
) location
 Show points for all except the first (

'none'
 Show no points


isod: string = 'first'
 Show an isosensitivity line for each location
 Options:

'all'
 Show contours for all locations

'first'
 Only show a contour for the first (
'default'
) location
 Only show a contour for the first (

'rest'
 Show contours for all except the first (
'default'
) location
 Show contours for all except the first (

'none'
 Show no contours


isoc: string = 'first'
 Show an isobias line for each location
 Options:

'all'
 Show contours for all locations

'first'
 Only show a contour for the first (
'default'
) location
 Only show a contour for the first (

'rest'
 Show contours for all except the first (
'default'
) location
 Show contours for all except the first (

'none'
 Show no contours


zroc: boolean = false
 Plot in zROC space instead of ROC space

far: number = 0.25
 False alarm rate for the first (
'default'
) location
 False alarm rate for the first (

hr: number = 0.75
 Hit rate for the first (
'default'
) location
 Hit rate for the first (

set(hr, far, name = 'default', label = '', s = 1)
 Create or update the location identified by
name
 The
name
'default'
is reserved for the first location  Parameters

hr: number
 Hit rate

far: number
 False alarm rate

name: string = 'default'
 A unique name to identify the location being set

label: string = ''
 A visual label to use in the plot for this location

s: number = 1
 Unequal variance parameter (default of
1
is equal variance)
 Unequal variance parameter (default of

 Create or update the location identified by

setWidthSDT(d, c, name = 'default', label = '', s = 1)
 Create or update the location identified by
name
 The
name
'default'
is reserved for the first location  Parameters

d: number
 Sensitivity

c: number
 Bias

name: string = 'default'
 A unique name to identify the location being set

label: string = ''
 A visual label to use in the plot for this location

s: number = 1
 Unequal variance parameter (default of
1
is equal variance)
 Unequal variance parameter (default of

 Create or update the location identified by

rocpointchange
 Indicates a location on the plot has been moved

detail

name: string
 A unique name to identify the location

far: number
 False alarm rate

hr: number
 Hit rate

d: number
 Sensitivity

c: number
 Bias

s: number
 Variance

label: string
 Display label

<rocspace interactive contour="bias" point="all" isoD="first" isoC="first" zroc far="0.2" hr="0.9"></rocspace>
Interactive visualization of SDT in terms of signal and noise distributions
This widget provides a visualization of signal detection theory. It can show signal and noise distributions and a threshold. The distributions can have unequal variance. The sensitivity, bias, and signal variance can be set and optionally displayed. In interactive mode, the bias can be adjusted by directly moving the threshold horizontally with mouse, touch, or keyboard, the sensitivity can be adjusted by directly moving a distribution horizontally with mouse, touch, or keyboard, and the variance can be adjusted by directly moving the signal distribution vertically with mouse, touch, or keyboard.
In addition, the observation of stimuli can be visualized as blocks arriving at particular evidence levels, and stacking with previous stimuli to form a histogram. In interactive mode, when the model is adjusted, the blocks in the histogram will rearrange accordingly.
The thresholded distributions and the histogram blocks can be colored based on the stimuli, the responses, or the outcomes.

interactive: boolean = false
 Allow direct manipulation of threshold and distributions

color: string = 'outcome'
 Set how to color distributions and trials
 Options

'outcome'
 Color based on outcome of the hit, miss, false alarm, or correct rejection

'response'
 Color based on the
'present'
or'absent'
response provided
 Color based on the

'stimulus'
 Color based on the
present
orabsent
stimulus displayed
 Color based on the

'none'
 No coloring


distributions: boolean = false
 Show distributions

threshold: boolean = false
 Show threshold

unequal: boolean = false
 Allow unequal variance

sensitivity: boolean = false
 Show the sensitivity as d' with a measurement bar

bias: boolean = false
 Show the bias as c with a measurement bar

variance: boolean = false
 Show the variance as s with a measurement bar

histogram: boolean = false
 Show a histogram with a block for each trial/stimulus

d: number = 1
 Set the sensitivity, d`

c: number = 0
 Set the bias, c

s: number = 1
 Set the variance of the signal distribution, s

reset()
 Reset the histogram to have no trials

trial(trialNumber, signal, duration, wait, iti)
 Add a trial to the histogram
 Parameters

trialNumber: number
 Numerical count of the trial in the block

signal: string
 Whether this is a signal
'present'
or'absent'
trial
 Whether this is a signal

duration: number
 The stimulus duration on this trial in milliseconds

wait: number
 The wait duration on this trial in milliseconds

iti: number
 The intertrial interval duration after this trial in milliseconds


pauseTrial()
 Pause the animation of trials in the histogram

resumeTrial()
 Resume the animation of trials in the histogram

sdtmodelchange
 Indicates that one or more model parameters have been changed

detail

d: number
 Sensitivity

c: number
 Bias

s: number
 Variance

far: number
 False alarm rate

hr: number
 Hit rate

h: number
 Hits

m: number
 Misses

fa: number
 False alarms

cr: number
 Correct rejections


detectableresponse
 Indicates that an animated histogram trial has generated a response

detail

stimulus: string
 Whether the signal was actually
'present'
or'absent'
 Whether the signal was actually

response: string
 Whether the response was
'present'
or'absent'
 Whether the response was

outcome: string
 The outcome of the trial as a hit (
'h'
), miss ('m'
), correct rejection ('cr'
), or false alarm ('fa'
)
 The outcome of the trial as a hit (

h: number
 Total hits in this block

m: number
 Total misses in this block

fa: number
 Total false alarms in this block

cr: number
 Total correct rejections in this block

nr: number
 Total no responses in this block

<sdtmodel interactive color="outcome" distributions threshold unequal sensitivity bias variance histogram d="2" c="1" s="1.5"></sdtmodel>
Interactive equations for SDT
The equations can either be static and display the variable names, be static and display names and values or be interactive with names and editable values, in which case only the values on the right side of the equals sign are editable.
Note: The layout for these equations leaves something to be desired, especially on smaller screens. Ideally a proper math renderer would be used, but I haven't found one that takes kindly to insertion of the custom elements needed for live editing.
False alarm rate from sensitivity and bias

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

unequal: boolean = false
 Show the unequal variance version of the equation, including a variance parameter

d: number = 0
 Sensitivity, d`

c: number = 0
 Bias, c

s: number = 1
 Variance, s

far: number
 False alarm rate

sdtequationdc2farchange
 Indicates that the values in the equation have changed

detail

d: number
 New value of sensitivity

c: number
 New value of bias

s: number
 New value of variance

far: number
 New value of false alarm rate

<sdtequationdc2far numeric interactive unequal d="2" c="1" s="1.5"></sdtequationdc2far>
Hit rate from sensitivity and bias

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

unequal: boolean = false
 Show the unequal variance version of the equation, including a variance parameter

d: number = 0
 Sensitivity, d`

c: number = 0
 Bias, c

s: number = 1
 Variance, s

hr: number
 Hit rate

sdtequationdc2hrchange
 Indicates that the values in the equation have changed

detail

d: number
 New value of sensitivity

c: number
 New value of bias

s: number
 New value of variance

hr: number
 New value of hit rate

<sdtequationdc2hr numeric interactive unequal d="2" c="1" s="1.5"></sdtequationdc2hr>
False alarm rate from false alarms and correct rejections

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

falsealarms: number = 0
 False alarms

correctrejections: number = 0
 Correct rejections

far: number
 False alarm rate

sdtequationfacr2farchange
 Indicates that the values in the equation have changed

detail

fa: number
 New value of false alarms

cr: number
 New value of correct rejections

far: number
 New value of false alarm rate

<sdtequationfacr2far numeric interactive falsealarms="25" correctrejections="75"></sdtequationfacr2far>
Positive predictive value rate from hits and false alarms

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

hits: number = 0
 Hits

falsealarms: number = 0
 False alarms

ppv: number
 Positive predictive value

sdtequationhfa2ppvchange
 Indicates that the values in the equation have changed

detail

h: number
 New value of hits

fa: number
 New value of false alarms

hr: number
 New value of positive predictive value

<sdtequationhfa2ppv numeric interactive hits="75" falsealarms="25"></sdtequationhfa2ppv>
Hit rate from hits and misses

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

hits: number = 0
 Hits

misses: number = 0
 Misses

far: number
 Hit rate

sdtequationhm2hrchange
 Indicates that the values in the equation have changed

detail

h: number
 New value of hits

m: number
 New value of misses

hr: number
 New value of hit rate

<sdtequationhm2hr numeric interactive hits="75" misses="25"></sdtequationhm2hr>
Accuracy from hits, misses, false alarms, and correct rejections

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

hits: number = 0
 Hits

misses: number = 0
 Misses

falsealarms: number = 0
 False alarms

correctrejections: number = 0
 Correct rejections

acc: number
 Accuracy

sdtequationhmfacr2cchange
 Indicates that the values in the equation have changed

detail

h: number
 New value of hits

m: number
 New value of misses

fa: number
 New value of false alarms

cr: number
 New value of correct rejections

acc: number
 New value of accuracy

<sdtequationhmfacr2c numeric interactive hits="75" misses="25" falsealarms="25" correctrejections="75"></sdtequationhmfacr2c>
Bias from hit rate and false alarm rate

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

hitrate: number = 0
 Hits

falsealarmrate: number = 0
 Misses

s: number = 1
 Variance, s

c: number
 Bias, c

sdtequationhrfar2cchange
 Indicates that the values in the equation have changed

detail

hr: number
 New value of hits

far: number
 New value of misses

s: number
 New value of variance

c: number
 New value of bias

<sdtequationhrfar2c numeric interactive unequal hitrate="0.75" falsealarmrate="0.25" s="1.5"></sdtequationhrfar2c>
Sensitivity from hit rate and false alarm rate

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

hitrate: number = 0
 Hits

falsealarmrate: number = 0
 Misses

s: number = 1
 Variance, s

d: number
 Sensitivity, d`

sdtequationhrfar2cchange
 Indicates that the values in the equation have changed

detail

hr: number
 New value of hits

far: number
 New value of misses

s: number
 New value of variance

d: number
 New value of sensitivity

<sdtequationhrfar2d numeric interactive unequal hitrate="0.75" falsealarmrate="0.25" s="1.5"></sdtequationhrfar2d>
Positive predictive value rate from hits and false alarms

numeric: boolean = false
 Show values instead of just the names of variables

interactive: boolean = false
 Allow editing of numeric values in the equation

misses: number = 0
 Misses

correctrejections: number = 0
 Correct rejections

fomr: number
 False omission rate

sdtequationmcr2fomrchange
 Indicates that the values in the equation have changed

detail

m: number
 New value of misses

cr: number
 New value of correct rejections

fomr: number
 New value of false omission rate

<sdtequationmcr2fomr numeric interactive misses="75" correctrejections="25"></sdtequationmcr2fomr>
Base class for all interactive SDT equations
To define a new equation:
export default class SDTEquationSomething extends SDTEquation {
...
}
SDTEquation
extends DetectableElement
extends DecidablesElement
extends LitElement
Full examples built from multiple components
User runs task, and results are fit and displayed in realtime using SDT
Used to build examples where the user is performing the randomdot kinematogram task. Can include controls, the task itself, response buttons with feedback and payoffs, a table of results, ROC space, and a visual rendering of signal detection theory. The table of results, ROC space, and the SDT model should not be interactive, because their values are received from the user's task performance.

unnamed
 Place relevant
detectableelements
components here  Wired elements

<detectablecontrol>
 Allows user to adjust parameters and control the task

<rdktask>
 Displays the task

<detectableresponse>
 Allows user to make responses and see feedback and payoffs

<detectabletable>
 Displays numerical results for the current block of trials

<rocspace>
 Displays the hit rate and false alarm rate in ROC space based on current results

<sdtmodel>
 Displays a visual rendering of sensitivity and bias based on current results

 Place relevant
<detectableexamplehuman>
<detectablecontrol coherence=".5" trials="10" duration="1000" run pause reset></detectablecontrol>
<rdktask coherence=".5" trials="10" duration="1000" wait="1000" iti="1000"></rdktask>
<detectableresponse interactive trial feedback="outcome"></detectableresponse>
<detectabletable numeric summary="stimulusRates accuracy" hits="0" misses="0" falsealarms="0" correctrejections="0"></detectabletable>
<rocspace point="all" isod="all" isoc="all" far=".5" hr=".5"></rocspace>
<sdtmodel threshold bias distributions sensitivity histogram color="outcome" d="0" c="0"></sdtmodel>
</detectableexamplehuman>
Exploration of relationship between SDT visualizations
Used to build examples where the user can explore the relationship between results and model parameters. Can include controls, a table of results, ROC space, and a visual rendering of signal detection theory. The table of results, ROC space, and the SDT model should be interactive, to allow the user to modify values and see the implications for the other components.

unnamed
 Place relevant
detectableelements
components here  Wired elements

<detectablecontrol>
 Allows user to adjust parameters

<detectabletable>
 Display and change numerical results

<rocspace>
 Display and change the hit rate and false alarm rate in ROC space

<sdtmodel>
 Display and change sensitivity and bias in a visualization

 Place relevant
<detectableexampleinteractive>
<detectabletable numeric interactive summary="stimulusRates accuracy" hits="80" misses="20" falsealarms="10" correctrejections="90"></detectabletable>
<rocspace interactive point="all" isod="all" isoc="all"></rocspace>
<sdtmodel interactive threshold bias distributions sensitivity color="outcome"></sdtmodel>
</detectableexampleinteractive>
Compare two sets of results using signal detection theory
Used to build examples where the user can explore the relationship between two sets of results and model parameters. Can include two tables of results, a single ROC space, and two visual renderings of signal detection theory. The tables of results, ROC space, and models can all be interactive, to allow the user to modify values and see the implications for the other components.

unnamed
 Place relevant
detectableelements
components here  Wired elements

2×
<detectabletable>
 Display and change values for two sets of results

<rocspace>
 Display and change the hit rate and false alarm rate in ROC space for each of two results

2×
<sdtmodel>
 Display and change sensitivity and bias in a visualization for two sets of results

2×
 Place relevant
<detectableexampledoubleinteractive>
<detectabletable numeric interactive summary="stimulusRates accuracy" hits="0" misses="0" falsealarms="0" correctrejections="0"></detectabletable>
<rocspace interactive contour="accuracy" point="all" isod="none" isoc="none"></rocspace>
<detectabletable numeric interactive summary="stimulusRates accuracy" hits="0" misses="0" falsealarms="0" correctrejections="0"></detectabletable>
</detectableexampledoubleinteractive>
Model simulates task based on SDT parameter values
Used to build examples where the model is simulated to perform the randomdot kinematogram task. Can include controls, the task itself, response buttons with feedback and payoffs, a table of results, ROC space, and a visual rendering of signal detection theory. The SDT model should be interactive, so the user can modify the model. The table of results and ROC space should not be interactive, because their values are received from the model's task performance.

unnamed
 Place relevant
detectableelements
components here  Wired elements

<detectablecontrol>
 Allows user to adjust parameters and control the task

<rdktask>
 Displays the task

<sdtmodel>
 Display and change a visual rendering of the sensitivity and bias of the model

<detectableresponse>
 Displays model's responses and the resulting feedback and payoffs

<detectabletable>
 Displays model's numerical results for the current block of trials

<rocspace>
 Displays the model's hit rate and false alarm rate in ROC space based on current results

 Place relevant
<detectableexamplemodel>
<detectablecontrol run pause reset coherence=".5" trials="10" duration="500"></detectablecontrol>
<rdktask count="100" coherence=".5" trials="10" duration="500" wait="500" iti="500"></rdktask>
<sdtmodel interactive threshold bias distributions sensitivity histogram color="outcome" d="1" c=".5"></sdtmodel>
<detectableresponse trial feedback="outcome"></detectableresponse>
<detectabletable numeric summary="stimulusRates accuracy" hits="0" misses="0" falsealarms="0" correctrejections="0"></detectabletable>
<rocspace hr=".5" far=".5" point="all" isod="all" isoc="all"></rocspace>
</detectableexamplemodel>
Multiple value example
Used to build specialized examples with multiple values for one variable (sensitivity or bias) and a single value for the other variable. Can include controls, ROC space, and a visual rendering of signal detection theory. The SDT model can be interactive.

variable: string = 'd'
 Choose which variable to have multiple values
 Options

'd'
 Sensitivity

'c'
 Bias


values: Array = [0, 1]
 Which marginals to display
 Expressed in HTML as a spaceseparated list of numbers

unnamed
 Place relevant
detectableelements
components here  Wired elements

<detectablecontrol>
 Allows user to adjust parameters

<sdtmodel>
 Display and change a visual rendering of sensitivity and bias

<rocspace>
 Displays the hit rate and false alarm rate in ROC space

 Place relevant
<sdtexamplemultiple variable="d" values="0 1 2 3 4">
<detectablecontrol zroc></detectablecontrol>
<sdtmodel interactive threshold bias></sdtmodel>
<rocspace zroc point="rest" isod="rest" isoc="first"></rocspace>
</sdtexamplemultiple>
Unequal variance example
Used to build specialized examples illustrating the implications of unequal variance. Can include controls, ROC space, and a visual rendering of signal detection theory. The SDT model and ROC space can be interactive.
Note: Unequal variance can be included in other examples, such as
<detectableexampleinteractive>
as well. This example is for a particular bespoke illustration,
and illustrates the highly specialized demonstrations that are possible by composing the various
elements.

unnamed
 Place relevant
detectableelements
components here  Wired elements

<detectablecontrol>
 Allows user to adjust parameters

<sdtmodel>
 Display and change a visual rendering of sensitivity and bias

<rocspace>
 Displays the hit rate and false alarm rate in ROC space

 Place relevant
<detectableexampleunequal>
<detectablecontrol zroc></detectablecontrol>
<sdtmodel interactive unequal distributions sensitivity variance color="stimulus"></sdtmodel>
<rocspace zroc contour="sensitivity" point="rest" isod="rest" isoc="rest"></rocspace>
</detectableexampleunequal>
Base class for all SDT examples
To define a new example:
export default class DetectableExampleSomething extends DetectableExample {
...
}
DetectableExample
extends DetectableElement
extends DecidablesElement
extends LitElement
Base class for all detectable web components
To define a new element:
export default class DetectableElementSomething extends DetectableElement {
...
}
DetectableElement
extends DecidablesElement
extends LitElement
 Remove extraneous spaces from equation tagged template literals!
 Label values IN isoplots? or allow hover or click querying of isoplots?
 Hover/click could be extended ROC generally and to Model plot as well?
 Use localStorage to maintain state?
 Optimize update() based on changedProperties?
 Edge/IE11  minor edge defects between SVG element and shadow
 Firefox  No CSS SVG Geometry Properties

yarn lint
 Lints scripts in
src/
 Lints scripts in

yarn test
 Runs all tests and reports coverage in
test/coverage/
 Runs all tests and reports coverage in

yarn test:watch
 Runs all tests in watch mode and reports coverage in
test/coverage/
 Runs all tests in watch mode and reports coverage in

yarn test:file <filename>
 Runs tests for a single file and reports coverage in
test/coverage/
 Runs tests for a single file and reports coverage in

yarn build
 Builds browsercompatible optimized bundle from
src/
tolib/
 Builds browsercompatible optimized bundle from

detectableelements/

lib/
(Bundles created fromsrc/
bybuild
) [autogenerated] 
src/
(Source files)
components/
(Source for visualizations) 
equations/
(Source for equations) 
examples/
(Source for examples combining visualizations)


test/
(Testing files)
coverage/
(Code coverage results) [autogenerated]


CHANGELOG.md
(Based on conventional commits) [autogenerated] 
gulpfile.js
(Tasks for gulp) 
package.json
(Package config for yarn and npm) 
README.md
(This file) 
rollupstats.html
(Report on js bundle composition and size) [autogenerated]

The content of this project is licensed under Creative Commons AttributionShareAlike 4.0 International License (CCBYSA4.0) and the source code of this project is licensed under GNU General Public License v3.0 or any later version (GPL3.0orlater).