The bump chart is a special type of line chart designed for exploring changes in ranking over time. It is useful to compare the position / performance / ranking of multiple observations rather than the actual values itself.
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.
The bump chart can be used to visualize any dataset that contains items ranked at different time points. In order to make it work properly a data table with at least three columns is required:
- One column should identify the items, for example, names of teams, countries, people or objects.
- One column should contain a time point, for example years, or weeks.
- One columns should contain the rank of the team, country, person or object at different times.
Setting Up the Mod
Let's say we have data about the popularity of different fruits:
Year | Rank | Fruit | Vote |
---|---|---|---|
2018 | 1 | Figs | 179 |
2018 | 2 | Huckleberries | 152 |
2018 | 3 | Cantaloupes | 137 |
2018 | 4 | Apples | 130 |
2018 | 5 | Bananas | 76 |
2018 | 6 | Grapes | 74 |
2018 | 7 | Elderberries | 58 |
2018 | 8 | Jackfruits | 56 |
2018 | 9 | Dates | 26 |
2018 | 10 | Ice Cream Beans | 17 |
2019 | 1 | Elderberries | 176 |
2019 | 2 | Grapes | 115 |
2019 | 3 | Cantaloupes | 110 |
2019 | 4 | Huckleberries | 110 |
2019 | 5 | Figs | 104 |
2019 | 6 | Bananas | 99 |
2019 | 7 | Dates | 98 |
2019 | 8 | Apples | 92 |
2019 | 9 | Jackfruits | 80 |
2019 | 10 | Ice Cream Beans | 77 |
2020 | 1 | Cantaloupes | 155 |
2020 | 2 | Grapes | 138 |
2020 | 3 | Apples | 127 |
2020 | 4 | Ice Cream Beans | 125 |
2020 | 5 | Figs | 118 |
2020 | 6 | Jackfruits | 118 |
2020 | 7 | Huckleberries | 98 |
2020 | 8 | Dates | 56 |
2020 | 9 | Elderberries | 55 |
2020 | 10 | Bananas | 18 |
2021 | 1 | Grapes | 146 |
2021 | 2 | Jackfruits | 140 |
2021 | 3 | Bananas | 123 |
2021 | 4 | Apples | 109 |
2021 | 5 | Figs | 118 |
2021 | 6 | Cantaloupes | 91 |
2021 | 7 | Huckleberries | 80 |
2021 | 8 | Figs | 77 |
2021 | 9 | Elderberries | 70 |
2021 | 10 | Dates | 54 |
A basic bump chart can be configured to show how the ranking of different fruits have changed over time by creating a bump chart with the following settings:
- Ranking = Rank
- Period = Year
- Line By = Fruit
Optionally you could also use colors to show another measure. E.g:
- Color By = Avg(Votes)
The end result will look something like this:
Configuring the Mod
The bump chart can be configured by setting the period, ranking, line by and color expression. A color gradient will be used if two circles with different colors are connected.
Once the bump chart is configured and has data provided, you can also display the columns labels vertically. The setting is accessed by clicking on a scale.
Using the Mod
Tooltip
Hovering over a circle will show the ranking, period and line by column and value.
Marking
Clicking on a circle will mark it in the bump chart and in all other visualizations that uses the same marking. Clicking or dragging in the empty space in between circles will clear the marking. You can mark several circles by Ctrl-clicking on them. Clicking and dragging allow you to select multiple circles. You can select all circles within a range of periods or rankings by dragging along the column or row labels. Clicking on a line will mark the entire line and all circles in that group. Clicking on a row label will also mark the entire group. Ctrl-clicking on a row will add or remove the entire group to or from the current selection. Marked circles will be labeled with the Y-axis value.
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 Community Exchange: A safe and trusted place to discover ready-to-use Mods
- Developer Documentation: Introduction and tutorials for Mods developers
- Mods code examples on GitHub: A public repository for example projects
Recommended Comments
There are no comments to display.