This is a personal project that I'm using to learn about creating a full-stack web application with a Vue front-end with data coming from a static API back-end.
The concept is a hierarchical timeline of the Disney parks and the attractions contained within as sub-entities. The data describes both the parent-child relationships between entities (e.g., Space Mountain is contained within Tomorrowland, which is contained within Disneyland, which is contained within Disneyland Resort.) as well as the predecessor-successor relationships (e.g., Star Tours replaced Adventure Thru Inner Space, which replaced the Monsanto House of Chemistry.)
Granted, the latter relationships may pose a more difficult problem, since succession is not always straightforward. In other words, it can be defined as the replacement of an attraction within a physical space or a more conceptual/spiritual replacement. Additionally, when dealing with physical succession, a predecessor may be larger and may be replaced by multiple successors, and vice-versa. These issues are going to need to be analyzed further before a suitable data model is finalized.
Initially, I used the Google Charts library but soon found that it didn't fulfill all the requirements of this hierarchical paradigm. So I've built this timeline from scratch.
The API for accessing the data is housed in a separate repository here.
- basis: length of longest node (in days)
- horizon: rightmost/latest date on the timeline
- epoch: start date of oldest node (i.e., the leftmost/first date on the timeline)
- increment: number of years per notch
Additional definitions are in disney-parks-api.
Everything is normalized as a percentage of the basis, which is the duration of the longest node displayed.
- Calculate the duration of the current object (in days)
- Normalize the duration by dividing by the basis
- Multiply by 100 to convert to a percentage
(The longest node in the timeline sets the context, because it calculates to 100%, thus establishing the basis.)
- Calculate the number of days from the epoch to the start date of the current object
- Normalize by dividing by the basis
- Multiply by 100 to convert to a percentage
Positioning is based on the distance from the left side of the timeline.
- Node.js
| Variable | Description |
|---|---|
| VUE_APP_API | URL of the data API |
| VUE_APP_TITLE | Site title that will appear on HTML pages |
npm install
npm run serve
This project is in no way associated with The Walt Disney Company or its affiliated/subsidiary entities.