HistropediaJS Full Screen Demo

Descendants of Queen Victoria

Bring your content to life and increase online engagement with interactive timelines

This is a full screen demo of a timeline created with our timeline rendering software HistropediaJS.
Follow the links below for more information.

(Click the About icon in the header menu to return to this page)

HistropediaJS Home Page

© 2017 Histropedia Ltd.

HistropediaJS Full Screen Demo

What is HistropediaJS?

HistropediaJS is a JavaScript Library (Web development software package) designed to allow you to visualise your existing content as interactive timelines. The software works by taking your content (data) and rendering it as interactive timelines that can be added to an existing web page, used to create a full screen experience, or even setup to run offline on an interactive touch display at your premises (ideal for museums and exhibitions).

Thanks to a wide range of built in options, it is easy to customise the style and functionality of the timelines to suit the needs of your content.

HistropediaJS Home Page

About This Demo

Data and Filtering

This demo has been created using sample data that was readily available from Wikipedia and Wikidata; it is just a taste of what HistropediaJS is capable of, using a small selection of publicly available data.

The timeline shows all of the direct descendants of Queen Victoria, with an initial colour code to show the number of generations

The coolest part of the timeline is the "Close relation" colour code, which highlights the family members connected to the person currently selected on the timeline (showing the relation with the colour code).

UI Elements

HistropediaJS is a light-weight and streamlined product designed to allow you to easily connect your own page elements to the timeline. The html elements on this demo such as menus, filters pages and pop-up screen are basic elements we have created to better show you the inner working of the HistropediaJS.


HistropediaJS Full Screen Demo - Controls

Use the mouse scroll wheel to zoom in and out of time

Zooming in and out will change the amount of time visible on the screen. Hover your mouse over the period of time you want to zoom into.

Click and Drag to scroll through time

Click and drag using the left mouse button to move backwards and forwards through time. To move quickly try zooming out, and zooming back in again.

Colour Code

Click on the colour code icon to view the current colour code key and change the colour code. You can also use the colour code as a quick filter to view only one of more of the categories at one time.


Click on the filter icon to apply a new filter to the timeline. Choose the type of filter you would like to apply from the drop down menu and use the search box to find a filter. Adding additional filters will further refine the results visible on the timeline.

Fit events to screen height

Click to fit the visible events to the height of the screen. Use the and arrows to manually adjust the row spacing or select AUTO to always fit to screen height.

Open Related Content

Double click on any event to open up the Wikipedia article and other related content for that event.

HistropediaJS Full Screen Demo

Contact Us or Request a Demo

If you have any questions about HistropediaJS or would like to discuss the possibility of a demo using your existing content, please get in touch.

We are always happy to discuss your timeline needs, and advise you whether HistropediaJS would be a suitable product for you. We are also always interested in collaborations with potential data partners, if you have an interesting collection and would like to discuss how it could be visualised we would love to hear from you.

Email us at:


From time to time, we also volunteer as Wikidata consultants for cultural heritage institutes who are interested in adding or linking their data to Wikidata. You can learn more about Wikidata on the Wikidata home page.

Placeholder image