Animated Bar Chart

This component generates an animated bar chart where the bars race over time, increasing in range. This animated visualization is popular to visualize different entities competing or simply changing over time on a selected metric. Examples are stock prices of different companies, disease confirmed cases by country, social media activity by users, ... all of those over time.

The visualization is defined via the Generic JavaScript node using d3.js, but settings are available in the component dialogue to customize:
- the title above the chart;
- the label displaying the time and its size and position;
- bins with too small values;
- the cumulative sum over time;
- which are the 3 columns storing the metric values, the categories and the timestamps.

Additional settings can be customized by editing the workflow or even the JavaScript code: simply remove the link of the shared component and edit the nodes inside.

Options

Sum Values

Check this box to sum over time the numbers provided for each category. If this box is not checked it is assumed that the input table already aggregates over time the metric column, for example via a cumulative sum.

Hide Time Label

Check this box to hide the label displaying time units during the animation. If active, the setting above "Time Label Granularity" is ignored.

Select Bars Column

Select with this setting the categorical column listing the categories for which values are tracked over time in the animated bar chart.

Select Metric for Bars Size

Select with this setting the numerical column holding the values to be displayed over time.

Select Timestamp

Select with this setting the Date&Time column holding the timestamps to create the time series.

Minimum Amount Threshold

If a category has an aggregation sum lower than this value, then it is discarded and not represented as an additional visual bar. Raising this number increases the smoothness of the visualization and reduces the number of animations.

Time Label Right Padding

The higher this value, the bigger the distance between the time label and the right margin of the chart. If "Hide Time Label" is active, this setting is ignored. This value increases the padding proportionally to the length of the label. Default value is 20.%%00010%%00010

Time Label Font Size

The higher this value, the bigger the time label is. If "Hide Time Label" is active, this setting is ignored. Default value is 30.

Time Label Granularity

Select the time label to be displayed and updated during the animation. Please select a granularity which is also stored in the time column you provided (Date/Time/Date&Time types).

View Title

A string to be rendered above the chart as the title of the visualization. Place an empty string to not display any title.

Nodes

• String Manipulation15 ×
• CASE Switch Data (End)5 ×
• Column Filter5 ×
• Table Row to Variable5 ×
• Transpose5 ×
• Show all 40 nodes

Extensions

• FeatureKNIME Base nodes
• FeatureKNIME Data Generation
• FeatureKNIME JavaScript Views
• FeatureKNIME Javasnippet
• FeatureKNIME JSON-Processing
• Show all 7 modules

Links

• No links available