Global

Members

(constant) HtmlTooltip

Styled component for custom HTML tooltip.
Source:

(constant) HtmlTooltip

Styled component for custom HTML tooltip.
Source:

(constant) Image

Custom styled component for the image.
Source:

(constant) ImageBackdrop

Custom styled component for the image backdrop.
Source:

(constant) ImageButton

Custom styled component for the image button.
Source:

(constant) ImageMarked

Custom styled component for the marked image.
Source:

(constant) ImageSrc

Custom styled component for the image source.
Source:

(constant) accessoiresAtt :Array

Array of accessories attributes.
Type:
  • Array
Source:

(constant) faceFeaturesAtt :Array

Array of face feature attributes.
Type:
  • Array
Source:

(constant) facialHairAtt :Array

Array of facial hair attributes.
Type:
  • Array
Source:

(constant) generalAtt :Array

Categories attributes for better overview. Array of general attributes.
Type:
  • Array
Source:

(constant) hairAtt :Array

Array of hair attributes.
Type:
  • Array
Source:

(constant) images :Array

Array of image objects with their URLs, titles, and routes.
Type:
  • Array
Source:

(constant) useWalk

Custom store for managing walk-related data and actions. Uses Zustand library for state management.
Source:

(constant) useWalks

Custom store for managing walks-related data and actions. Uses Zustand library for state management.
Source:

Methods

FilterDialog() → {JSX.Element}

Renders the filter dialog component. Here the user selects the attribute for the direction of the walks.
Source:
Returns:
- The FilterDialog component.
Type
JSX.Element

LineChart(props) → {JSX.Element}

LineChart component displays a line chart based on the provided attribute.
Parameters:
Name Type Description
props object The component props.
Properties
Name Type Description
attribute string The changing attribute for the line chart.
Source:
Returns:
- The LineChart component, displaying a linechart for a single attribute for a selection of walks.
Type
JSX.Element

LineChartDisplay() → {JSX.Element}

Renders the LineChartDisplay component. Here we iterate over all attributes to generate a line chart with slope histograms for each of them.
Source:
Returns:
- The LineChartDisplay component.
Type
JSX.Element

RadarChart() → {JSX.Element}

Generate the radar chart when the walk data is available or when the start and end indices change.
Source:
Returns:
- The RadarChart component, displaying a radarchart for a number of attribute for a single walks.
Type
JSX.Element

RadarChartDisplay() → {JSX.Element}

Display component for the RadarChart.
Source:
Returns:
- The RadarChartDisplay component.
Type
JSX.Element

RegressionScatterplot() → {JSX.Element}

Scatterplot component displaying the regression data. For each walk, the slope of all 30 attributes are calculated and displayed.
Source:
Returns:
Scatterplot component.
Type
JSX.Element

Scatterplot() → {JSX.Element}

UMAP Scatterplot component. Displays the UMAP scatterplot chart.
Source:
Returns:
UMAP scatterplot component.
Type
JSX.Element

UmapDisplay() → {JSX.Element}

UMAP Display component. Show the umap projection of all walks for a selected direction.
Source:
Returns:
UMAP Display component.
Type
JSX.Element

Walk(props) → {JSX.Element}

Walk component for detailed exploration of a single walk. Displays the walk visualization.
Parameters:
Name Type Description
props Object The component props.
Properties
Name Type Description
space string The space value (either z (latent) or w (style) space).
direction string The direction value.
walk string The walk index.
Source:
Returns:
Walk component.
Type
JSX.Element

calculateLinearRegressions(walk) → {object}

Calculates linear regression for each attribute in the walk.
Parameters:
Name Type Description
walk object The walk object.
Source:
Returns:
- The updated walk object with regression values.
Type
object

generateLineChart(ref, data, attribute, selectedWalks)

Generates a line chart based on the provided data, attribute, and selected walks.
Parameters:
Name Type Description
ref object The reference to the chart container.
data Array The data used to generate the chart.
attribute string Name of the changing attribute in the selected direction.
selectedWalks Array Walk selection for filtering (selected in umapScatterplot).
Source:

generateRadarChart(ref, walkData, start, end)

Generates the radar chart. The first polyline displays the start values of the most relevent attributes. The second displays the end state.
Parameters:
Name Type Description
ref Object The chart reference object for svg.
walkData Object The data of the walks.
start number The start index of the walk.
end number The end index of the walk.
Source:

generateScatterplot(ref, walks, selectedWalks)

Generates the scatterplot chart using D3.
Parameters:
Name Type Description
ref React.Ref Reference to the chart container element for the svg.
walks Array Array of walk data.
selectedWalks Array Array of selected walks to change color for selected data points in the umap.
Source:

generateScatterplot(ref, walks, selectedWalks, setSelectedWalks)

Generates the scatterplot chart for umap projection.
Parameters:
Name Type Description
ref Object The reference to the chart container holding the svgs.
walks Array The array of walks data.
selectedWalks Array The array of selected walks to color the selection made by the user through brushing or clicking.
setSelectedWalks function The function to set the selected walks to save for other charts.
Source:

getWalk()

Fetches walk data from the API.
Source:

getWalks(space, direction, chunks)

Fetches walks data from the API based on space, direction, and number of chunks.
Parameters:
Name Type Description
space string The space value.
direction string The direction value.
chunks number The number of chunks.
Source:

linspace(start, end, n) → {Array.<number>}

Generate an array of equally spaced numbers.
Parameters:
Name Type Description
start number The start value.
end number The end value.
n number The number of values.
Source:
Returns:
The array of equally spaced numbers.
Type
Array.<number>

radarAngle(angle, index) → {number}

Calculates the angle for a point on the radar chart.
Parameters:
Name Type Description
angle number The angle of the point.
index number The index of the point.
Source:
Returns:
- The angle for the point.
Type
number

radarX(radius, index, angle) → {number}

Calculates the x-coordinate for a point on the radar chart.
Parameters:
Name Type Description
radius number The radius of the point.
index number The index of the point.
angle number The angle of the point.
Source:
Returns:
- The x-coordinate of the point.
Type
number

radarY(radius, index, angle) → {number}

Calculates the y-coordinate for a point on the radar chart.
Parameters:
Name Type Description
radius number The radius of the point.
index number The index of the point.
angle number The angle of the point.
Source:
Returns:
- The y-coordinate of the point.
Type
number

scale(index, point) → {number}

Scales a point based on the index and value.
Parameters:
Name Type Description
index number The index of the point.
point number The value of the point.
Source:
Returns:
- The scaled point.
Type
number

setCurrent(current)

Sets the current value.
Parameters:
Name Type Description
current number The current value.
Source:

setDirection(direction)

Sets the direction value and triggers the fetch for corresponding walks.
Parameters:
Name Type Description
direction string The direction value.
Source:

setEnd(end)

Sets the end value.
Parameters:
Name Type Description
end number The end value.
Source:

setError(error, errorMessage)

Sets the error state and error message.
Parameters:
Name Type Description
error boolean The error state value.
errorMessage string The error message.
Source:

setLoading(loading)

Sets the loading state.
Parameters:
Name Type Description
loading boolean The loading state value.
Source:

setSelectedWalks(selectedWalks)

Sets the selected walks.
Parameters:
Name Type Description
selectedWalks Array The array of selected walks.
Source:

setSpace(space)

Sets the space value (z or w) and triggers the fetch for corresponding walks.
Parameters:
Name Type Description
space string The space value.
Source:

setSpaceAndDirection(space, direction)

Sets the space and direction values and triggers the fetch for corresponding walks.
Parameters:
Name Type Description
space string The space value.
direction string The direction value.
Source:

setSpaceDirectionWalk(space, direction, walk)

Sets the space, direction, and walk values and fetches the corresponding walk data.
Parameters:
Name Type Description
space string The space value. Either z (latent) or w (style) space.
direction string The direction value. One of 30 possible attributes.
walk number The walk value (Index of the walk).
Source:

setStart(start)

Sets the start value for the walk sequence.
Parameters:
Name Type Description
start number The start value.
Source:

topAttributes(data, start, end, numAxis) → {Object}

Selects the top attributes for the radar chart. The higher the absolute difference between the start and end value the more relevent it is. Additonally sort, so that the first most relevant are positive and the later are negagive changes.
Parameters:
Name Type Description
data Object The data object.
start number The start index.
end number The end index.
numAxis number The number of axis to display.
Source:
Returns:
- The selected attributes data.
Type
Object