You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
<alluvial-diagramaccessibility={...}linkData={[{group: 'Group 1',cat: 'Team 1 2018',target: 'Team 2 2019',value: 1234},{links}]}nodeData={[{did: 'Team 1 2018'},{nodes}]}// optional, allows you to join more data to nodessourceAccessor={'cat'}targetAccessor={'target'}groupAccessor={'group'}nodeIDAccessor={'did'}// required if you pass nodeDatavalueAccessor={'value'}/>
Key used to determine link's source, must be a node.
targetAccessor
string
'target'
Key used to determine link's target, must be a node.
nodeIDAccessor
string
'id'
Key used to determine unique node identifiers. Requires nodeData to be populated.
valueAccessor
string
'value'
Key used to determine link (and ultimately node size).
groupAccessor
string
'group'
Key used to determine link's group or category.
uniqueID
string
undefined
ID used to identify chart (must be unique per chart), helpful for validation messages. Defaults to UUID v4 standard.
linkData
object[]
undefined
Data used to create chart links, an array of objects which includes keys that map to above accessors. We leverage d3-sankey for sankey generation, refer to requirements documented for that algorithm for additional data specifications.
nodeData
object[]
undefined
Optional. Data used to create chart nodes, an array of objects which includes keys that map to above accessors. We leverage d3-sankey for sankey generation, refer to requirements documented for that algorithm for additional data specifications.
Manages messages and settings for chart accessibility, see object definition below.
IAccessibilityType Definition
Name (accessibility.)
Type
Default Value(s)
Description
longDescription
string
''
Use this to add a helpful description of the chart.
executiveSummary
string
''
Use this to describe the biggest takeaway of the chart.
purpose
string
''
Use this to describe the purpose of this particular chart.
contextExplanation
string
''
Use this to explain any controls or content on your page that affect or are affected by this chart.
title
string
''
Gives the chart an alternate title to be used by screen readers.
elementDescriptionAccessor
string
''
Optional key used to add an additional description to any element, from your data.
statisticalNotes
string
''
Use this to provide any statistical explanations, such as trends, clusters, patterns, or outliers.
structureNotes
string
''
Use this to describe special visual features of the chart, such as sorting, color grouping, etc.
includeDataKeyNames
boolean
false
If true, includes data key names in voice over description of each element. EG "Year over year growth: 5.6%" instead of just "5.6%"
hideDataTableButton
boolean
false
If true, hides the data table button (but it is still available to screen reader users).
disableValidation
boolean
false
If true, disables validations of accessibility props for this chart. Validation is intended to be used during development; upon completion, validation should be disabled.
elementsAreInterface
any/boolean
null
Defaults to null. Set to true if interacting with the elements in this chart affects your application. Otherwise, must be set to false.
onChangeFunc
function
undefined
Custom event listener (changeFunc) that enables dev to control accessibility page experience when chart data updates.
showSmallLabels
boolean
false
Defaults to false. Set to true if you would like to display labels on small elements that are likely to overlap. Note, this could impact accessibility of your graphic. Note: This prop is not currently enabled in this chart and has no effect on the alluvial diagram
hideStrokes
boolean
false
Defaults to false. Set to true if you would like to remove automated stroke outlines from the chart, note, this could impact accessibility of your graphic. Note: This prop is not currently enabled in this chart and has no effect on the alluvial diagram
hideTextures
boolean
false
Defaults to false. Set to true if you would like to remove textures from the chart, note, this could impact accessibility of your graphic. Note: This prop is not currently enabled in this chart and has no effect on the alluvial diagram
Defaults disabled to false. May be set to true if accessibility.elementsAreInterface = false and suppressEvents = true. This will disable keyboard navigation and simplify chart instructions for screen reader users.
showExperimentalTextures
boolean
false
Defaults to false. Set to true if you would like leverage our textures which are still undergoing research and development. Note: This prop is not currently enabled in this chart and has no effect on the alluvial diagram
// accessibility = { ...accessibility, onChangeFunc: d => changeHandler(d)}// example of setting updates on page based on changeFunc custom eventsconstchangeHandler=d=>{if(d.updated&&(d.removed||d.added)){letupdates='The alluvial-diagram chart has ';if(d.removed){updates+='removed '+d.removed+' link'+(d.removed>1 ? 's ' : ' ');}if(d.added){updates+=(d.removed ? 'and ' : '')+'added '+d.added+(d.removed ? '' : d.added>1 ? ' links' : ' link');}setChartUpdates(updates);}elseif(d.updated){constnewUpdate="The chart's data has changed, but no links were removed or added.";setChartUpdates(newUpdate!==chartUpdates ? newUpdate : "The chart's data has changed again, but no links were removed or added.");}};
annotations is an array of objects which needs to have the following properties within them. See the detailed api specifications from d3-svg-annotation, along with additional properties layered on top of that work, documented below.
Name
Type
Default Value(s)
Description
accessibilityDescription
string
undefined
Sets the accessibility description for the annotation for screen reader users.
positionType
string
undefined
Can be set to node, source or target and when a data object is passed, will return an annotation that is placed at the node, the link's source or the link's target.
Events in stencil.js dispatch Custom DOM events for other components to handle, we use Stencil's @Event() decorator to emit events (click, hover, mouseOut) from end user activity on our charts.
Name
Type
Default Value(s)
Description
suppressEvents
boolean
false
Suppresses and disables click, hover and mouseOut event emitters. Setting to true can increase performance for non-interactive charts.
cursor
string
'default'
Changes pointer type during mouse over on elements. Valid values are 'default' or 'pointer'.
onClickEvent
function
undefined
When clickEvent event occurs (e.g., mouse/keyboard click on chart geometry), this event handler will be called with the custom event object (e.g., e), containing data and target node at e.detail {data: d, target: n}. You will need to construct your own functionality of what actions to take within the callback.
clickHighlight
object[]
[]
Data used to track chart selections, an array of objects which includes keys that map to above accessors.
Sets the styling of elements when they are selected, see object definition below.
onHoverEvent
function
undefined
When hoverEvent event occurs (e.g., mouse hover/keyboard focus on chart geometry), this event handler will be called with the custom event object (e.g., e), containing data and target node at e.detail {data: d, target: n}. You will need to construct your own functionality of what actions to take within the callback.
onMouseOutEvent
function
undefined
When mouseOutEvent event occurs (e.g., mouse/keyboard blur on chart geometry), this event handler will be called, and has no data object. You will need to construct your own functionality of what actions to take within the callback.
hoverHighlight
object
{}
Datum object used to track active chart element, the object should include keys that map to above accessors.
Sets the styling of a elements when they are hovered/focused, see object definition below.
interactionKeys
string[]
[]
Sets the key names of data to interact with.
hoverOpacity
number
1
Sets opacity of inactive elements when hovering/focused on a chart geometry.
onInitialLoadEvent
function
undefined
When initalLoad event occurs (e.g., chart is mounted to window), this event handler will be called with the custom event object (e.g., e), containing the corresponding chartID at e.detail. You will need to construct your own functionality of what actions to take within the callback.
onDrawStartEvent
function
undefined
When drawStart event occurs (e.g., chart render function is called), this event handler will be called with the custom event object (e.g., e), containing the corresponding chartID at e.detail. You will need to construct your own functionality of what actions to take within the callback.
onDrawEndEvent
function
undefined
When drawEnd event occurs (e.g., chart's stencil lifecycle completes), this event handler will be called with the custom event object (e.g., e), containing the corresponding chartID at e.detail. You will need to construct your own functionality of what actions to take within the callback.
onTransitionEndEvent
function
undefined
When transitionEnd event occurs (e.g., chart geometry's transition lifecycle completes), this event handler will be called with the custom event object (e.g., e), containing the corresponding chartID at e.detail. You will need to construct your own functionality of what actions to take within the callback.
IClickStyleType Definition
Name
Type
Default Value(s)
Description
color
string
''
Sets the color of the clicked element (requires clickHighlight to be valid and sent).
strokeWidth
number
2
Sets the stroke width of the clicked element (requires clickHighlight to be valid and sent). Note: This prop is not currently enabled in this chart and has no effect on the alluvial diagram
IHoverStyleType Definition
Name
Type
Default Value(s)
Description
color
string
''
Sets the color of the hovered element (requires hoverHighlight to be valid and sent).
strokeWidth
number
2
Sets the stroke width of the hovered element (requires hoverHighlight to be valid and sent). Note: This prop is not currently enabled in this chart and has no effect on the alluvial diagram
// example of interactivity code// note this only tracks a single click, you need your own logic to build the array of currnet selections made by user and then pass that result back to chart//...constclickHandler=evt=>{constd=evt.detail.data;// data is located hereconstt=evt.detail.target;// chart mark/label clicked is located herethis.currentClickedElement=[d];// this is passed to clickHighlight prop};consthoverHandler=evt=>{constd=evt.detail.data;// data is located hereconstt=evt.detail.target;// chart mark/label clicked is located herethis.currentHoveredElement=d;// this is passed to hoverHighlight prop};constmouseOutHandler=evt=>{this.currentHoveredElement='';// this is passed to hoverHighlight prop};// an example of calling these from within a stencil.js component<alluvial-diagramaccessibility={...}linkData={[{group: 'Group 1',cat: 'Team 1 2018',target: 'Team 2 2019',value: 1234},{links}]}nodeData={[{did: 'Team 1 2018'},{nodes}]}// optional, allows you to join more data to nodessourceAccessor={'cat'}targetAccessor={'target'}groupAccessor={'group'}nodeIDAccessor={'did'}// required if you pass nodeDatavalueAccessor={'value'}interactionKeys={['group']}onClickEvent={this.onClickEvent}clickHighlight={this.currentClickedElement}clickStyle={this.clickStyle}onHoverEvent={this.onHoverEvent}onMouseOutEvent={this.onMouseOut}hoverHighlight={this.currentHoveredElement}hoverStyle={this.hoverStyle}/>//...
Sets the configuration and styling properties of links in the alluvial, see object definition below.
ILinkConfigType Definition
Name
Type
Default Value(s)
Description
visible
boolean
true
Toggles whether to horizontally space nodes and render links in between them. Passing false will remove links from the view and bring nodes closer together for easier comparison, we suggest also using nodeConfig.compare in this scenario.
fillMode
string
'none'
Determines how to color links in the alluvial, options are 'group' (requires groupAccessor), 'source', 'target', 'link', or, 'none'.
Controls visibility, content and format of the chart tooltip, see object definition below.
IDataLabelType Definition
Name
Type
Default Value(s)
Description
labelAccessor
string
''
Key used to determine label's property.
visible
boolean
true
Toggles the visibility (opacity) of the data labels.
placement
string
'top'
Sets the placement of the data label. Examples of values are 'inside' and 'outside'. Placement option 'auto' leverages the resolveLabelCollision algorithm and places labels without overlaps in available space on the chart.
Toggles whether to run resolveLabelCollision algorithm and hide labels if collision is detected (vs hide and then place). This is overridden by placement being set to auto.
collisionPlacement
string
'auto'
Sets the placement of the data label when resolveLabelCollision algorithm is run (dataLabel.placement must be 'auto'). Examples of values are 'auto', 'outside' and 'inside'.
ITooltipLabelType Definition
Name
Type
Default Value(s)
Description
labelAccessor
string[]
[]
An array that determines which property of the data is displayed in the tooltip.
labelTitle
string[]
[]
An array that sets the title for each data property in the tooltip.
format
string
''
Sets the formatting for the data properties in the tooltip, EG %b, refer to d3-time-format and numeral.js.