Vertical Line Chart Mod for Spotfire®

This article is a user guide for Vertical Line Chart Mod

The Vertical Line Chart mod is used to display multiple variables using the visualizations Y-axis as the categorization axis, and the X-axis as the value axis. This is the opposite orientation to a standard Spotfire® line chart.

One particularly useful case for this chart is to visualize well metrics in a vertical orientation matching the depth of the well being analyzed.

This video shows how to configure the chart for a wide data structure, where your data is in columns:

And this video shows how to configure for a tall data structure, where your data is in name-value pairs:

And finally, this video shows some of the additional configuration options in the mod:

Data Requirements

Every mod handles missing, corrupted and/or inconsistent data in different ways. It is advised to always review how the data is visualized.

This mod displays both continuous and categorical variables in a vertical orientation. The vertical axis must be a continuous variable, and there must be at least one continuous variable on the horizontal axis in order to display categorical variables. Variables are displayed as curves, and grouped into tracks based on the curve type. These are shown as follows:

This mod has complex additional configuration capabilities. Refer to the section Configuring the Vertical Line Chart for further details. By default, the mod will place all continuous curves into a single continuous track, and all categorical curves into a single categorical track like this:

The mod will display data stored in standard column format (wide data) or name-value pairs (tall data). The axis configuration for each will differ slightly, and this will be noted in the section on Setting up the Vertical Line Chart.

Categorical variables are displayed over vertical ranges identified by a y-axis value which represents the start of the range. Rows with the same categorical value will be merged together across the set of y-axis values. The final row presented for a given value will be used as the end of the range. In cases where a final value has a further defined interval, then an additional row should be added with the end y-axis value and the same name.

For example:

depth	gammaray	geology
100	12.4	sandstone
200	25.6	sandstone

This will display a category from depth 100 to 200. If the sandstone category extends to depth 300, then an additional row must be added.

depth	gammaray	geology
100	12.4	sandstone
200	25.6	sandstone
300		sandstone

This will now display a category from depth 100 to 300.

Setting Up the Mod

The Mod includes the following axes. Not all axis values are mandatory and this will be indicated.

Trellis By

Optional. The Mod supports trellising with rows being grouped by the value in this axis.

X

Mandatory. Continuous value axis in the horizontal direction. This axis will accept multiple columns for plotting multiple curves. Where data is in name-value pairs, this should be set to the column containing the value.

Y

Mandatory. Continuous value axis in the vertical direction. This axis will only accept a single column either numeric or date/time.

Line By

Mandatory. Column value for grouping rows into a series for rendering as a line. When the X axis has multiple columns this should be set to the value of (Column Names). Where data is in name-value pairs, this should be set to the column containing the name.

Color Background By

Optional. Categorical value for shading background intervals. The background will be shaded across the range of y-axis values.

Configuring the Mod

Additional configuration for the mod can be accessed by clicking on the small settings gear icon in the upper right corner of the visualization. This will display the configuration properties over the visualization. Maximize the visualization if necessary to update the fields. The configuration panel will only be accessible when the analysis is in Editing mode.

Further additional configuration for tracks and curves can be accessed by clicking the small curve icon beneath the gear icon.

Additional Mod Configuration

Group	Property	Description	Remarks
Data	Row limit	Maximum number of rows to render	If the row count is exceeded then an error message will be displayed. This is a safety feature to keep from accidentally rendering too much data.
Data	Data group limit	Maximum number of groups to render	If the Line By axis results in a large number of data groups, then an error message will be displayed. This is a safety feature to keep from accidentally rendering too much data.
Data	Shade marking interval	Enable background shading over marking interval
Appearance	Default stroke width	Default curve stroke width in pixels	Individual curves can be separately configured
Appearance	Default stroke dash array	Default curve stroke dash array	Individual curves can be separately configured. This conforms to standard SVG dash array configuration. Stroke Dash Array
X Axis	Show zoom slider	Display X-axis zoom slider
X Axis	Show gridlines	Display grid lines
X Axis	Show scale	Display scale
X Axis	Compact scale	Display scale compactly	Compact scales have only start and end ticks and a label closer to the scale line
X Axis	Number of ticks	Maximum ticks to display	May be reduced by the mod if necessary for clarity
Y Axis	Show zoom slider	Display Y-axis zoom slider
Y Axis	Show gridlines	Display grid lines
Y Axis	Show scale	Display scale
Y Axis	Invert scale	Change scale direction
Y Axis	Scale multiplier	Expansion factor for vertical space	Integer number >= 1. A value of 1 will fill the available vertical space like a standard Spotfire® visual. If greater than 1, then the vertical space will be expanded by that factor, and a vertical scrollbar will be presented.
Y Axis	Lock scale scroll	Lock scrolling across trellis panels	This will not synchronize the scales, just the scrolling
Y Axis	Show track boundaries	Enable track boundary display
Tooltip	Show tooltip	Display tooltips
Tooltip	Show horizontal cursor line	Display horizontal line across all tracks at mouse location
Tooltip	Show vertical cursor line	Display vertical line down track at mouse location
Tooltip	Show hover markers	Display circle markers on curves across horizontal cursor line
Trellis	Trellis direction	Direction for trellis panels	Columns or Rows
Trellis	Max Trellis Panel Count	Maximum number of trellis panels to render	If the panel count is exceeded then an error message will be displayed. This is a safety feature to keep from accidentally rendering too much data.

Tracks and Curves Configuration

Auto Configuration

Group	Property	Description	Remarks
Auto Configuration	Auto add tracks & curves	Automatically allocate curves to tracks	If this is disabled, all tracks and curves will need manual configuration
Auto Configuration	Auto remove empty tracks	Automatically remove tracks with no curves	If this is disabled, empty tracks will need to be manually removed

Tracks and Curves

A graphical diagram of tracks and curves is displayed, representative of how they will be displayed on the chart. Click on a track or curve to select and display detailed information. Both tracks and curves can be dragged and dropped to reposition. It will not be possible to move a continuous curve on to a categorical track, nor vice versa.

The toolbar has options to:

Add a track
Add a curve when a track is selected
Remove the selected track or curve

When adding a track, there will be a prompt to define it as Continuous or Categorical. Once defined it isn't possible to change the type.

When adding a curve, there will be a prompt to select the name from a dropdown list. The list will only present curves matching the track type. For a continuous track the list will contain values from the X axis, and for a categorical track the list will contain values from the Category axis. Once defined it isn't possible to change the name.

The same curve name may be configured on multiple tracks. It is even possible to define the same curve name twice on the same track.

Select a track to display the track detail panel. The track will have a blue border.

The top of the panel will display a track index and type. There are a hide/show button, and arrows to move tracks left or right. The following additional properties can be configured:

Property	Description	Remarks
Log scale	Enable logarithmic x scale	If enabled, all scales on the track will be logarithmic
Padding left	Track left padding in pixels	Padding for the first track is ignored
Width ratio	Width ratio for track	Based on a total of 100 across all tracks

Select a curve to display the curve detail panel. The curve will have a blue border. The detail will vary whether the curve is continuous or categorical. For a continuous curve the following details will be displayed:

The curve name and type are displayed, as well as hide/show button, and arrows to move curves up or down. The following additional properties can be configured for continuous curves:

Group	Property	Description	Remarks
	Display mode	Display curve as lines or markers	Markers may result in poorer performance in the case of larger datasets
X Scale	Invert scale	Change scale direction
X Scale	Scale min	Minimum scale value
X Scale	Scale max	Maximum scale value
Stroke	Color	Color applied to curve	See Curve Colors for more information
Stroke	Stroke width	Stroke width in pixels	Overrides the default stroke width
Stroke	Stroke dash array	Stroke dash array	Overrides the default stroke dash array. This conforms to standard SVG dash array configuration. Stroke Dash Array
Fill	Fill to	Fill area to curve	Min, Max, Line, or Curve. Further options will vary depending on the type selected.
Fill	Fill with gradient	Enable gradient fill	Applies to all types. Gradients are specified using min and max color values, standard colors with a single value.
Fill	Fill color	Color	Applies to Min and Max, non-gradient
Fill	Fill gradient min	Min gradient color	Applies to Min and Max, gradient
Fill	Fill gradient max	Max gradient color	Applies to Min and Max, gradient
Fill	Fill to line	Fills from curve to line	Applies to Line, a numeric value rendered as a vertical line
Fill	Fill to curve	Fills between curves	Applies to Curve
Fill	Fill color negative	Color applied to negative fills	Applies to Line and Curve, non-gradient. Color below the specified line or curve.
Fill	Fill color positive	Color applied to positive fills	Applies to Line and Curve, non-gradient. Color above the specified line or curve.
Fill	Fill gradient negative min	Min value color negative	Applies to Line and Curve, gradient.
Fill	Fill gradient negative max	Max value color negative	Applies to Line and Curve, gradient.
Fill	Fill gradient positive min	Min value color positive	Applies to Line and Curve, gradient.
Fill	Fill gradient positive max	Max value color positive	Applies to Line and Curve, gradient.

For any fill option, if no color is specified then the default black will be used. This applies to both gradient and non-gradient colors. It is recommended to specify both positive and negative color values, as well as both min and max values for all gradients for the desired effect.

For a categorical curve the following details will be displayed:

The curve name and type are displayed, as well as hide/show button, and arrows to move curves left or right.

The color scheme can be selected for each categorical curve. See Color Schemes for more information. To assign a specific color to a category value, select the color box next to the value and choose the color to apply. See Curve Colors for more information.

Color Schemes

Color schemes are used in several areas within the track and curve configuration. The list of schemes are fixed and cannot be customized. The scheme list includes all the standard Spotfire® color schemes, and adds some D3 color schemes.

Color schemes will consistently select the same color for a given value within a specific mod instance. This is not guaranteed between mod instances, and not guaranteed when a single mod instance is re-rendered. For consistent coloring, it is recommended to assign a specific color to each value. See Curve Colors for more information.

Curve Colors

There are three places where curve color can be set. The order of precedence is:

Specified color in curve details
Specified color in Curve Colors
Color scheme selection

By default, the color scheme will select an initial color from the selected palette. This color is not guaranteed to be consistent, so one of the other two methods should be used for consistent curve coloring.

Background Colors

The color scheme can be selected for background color intervals. See Color Schemes for more information. To assign a specific color to a background value, select the color box next to the value and choose the color to apply.

Using the Mod

Once the mod is configured it will render a vertically oriented chart with continuous and categorical curves.

Marking

The mod supports marking if configured. The mod supports rectangular marking for all continuous and categorical curves. If a continuous curve is displayed as markers, click a marker to select that point. Categorical curve values can also be marked with a click. Use CTRL-Click to add additional rows to the marking, or remove an already marked row. To clear the marking, click in any open area. Background shading across the marked interval will be displayed if configured.

Building the Project

In a terminal window:

npm install
npm start

In a new terminal window:

npm run server

Help and Support

This Mod is not supported by Spotfire® Support.
In the event of issues or to suggest features and enhancements, submit an issue in the Mod's GitHub repository.
For general questions about Mods, please post a question in the Forum for Extensions & Mods to make it visible and routed to the appropriate team(s) to respond.

More Information About Spotfire® Mods

Spotfire® Visualization Mods on the Spotfire® Community Exchange: A safe and trusted place to discover ready-to-use Mods
Spotfire® Mods Developer Documentation: Introduction and tutorials for Mods Developers
Mods by Spotfire®: A public repository for example projects

Sign In