HistropediaJS v1.1.0 Released

HistropediaJS v1.1.0 is now available!

This is a major new release with significant improvements to the core library, including a massive boost to the available zoom levels, upgraded zoom logic, built in pinch to zoom and many more powerful new features and options!

New features in HistropediaJS v1.1.0

Cosmic timescales

You can now fit around 15 billion years across the screen when fully zoomed out! This means we can finally visualise topics with cosmic or geological timescales, like the formation of the solar system and evolution of life on Earth.

The new zoom levels are all accessible by default, so make sure to set your zoom.minimum and zoom.maximum timeline options to restrict the user to the appropriate timescale for the data you are presenting.

Geometric Zoom Logic

The new zoom logic effects how the visible time scale changes as you zoom in or out. This is quite a low level change which gives a range of important benefits.

Smoother experience when zooming in or out of the timeline

With HistropediaJS v1.1.0, each click of the mouse scroll wheel always creates the same proportionate change to the visible time span. Previously this could vary as you zoomed through different time scales (e.g. from years to months).

This applies to any constant increment/decrement in zoom level, so zooming in or out using your own custom buttons will also be completely consistent (as long as you add/subtract the same amount from the zoom level with each click).

Developers can make geometric calculations based on changes in zoom level.

The maths behind the new zoom logic make it simple to perform all kinds of handy geometric calculations. We’ll release a range of new functions for this in the next version of HistropediaJS, but here’s a couple to get you started if you just can’t wait!

//Add as a new Timeline method using:
Histropedia.Timeline.prototype.getScaleFactorFromZoomChange = function(zoomChange){
   return Math.pow(this.options.zoom.ratio, zoomChange);
}

//Example use: Check the length of an article's time-span after a change in zoom
//get article with id = 1 from myTimeline 
var article = myTimeline.getArticlebyId(1); 

//current length in pixels of the article's duration marker
var currentLength = article.indcator.toX - article.indicator.fromX;

//length in pixels of this timespan after an increase in zoom level by 3.5
var lengthAfterZoom = currentLength * myTimeline.getScaleFactorFromZoomChange(3.5); 

//Note: use negative zoomChange for a decrease in zoom level

//Add as a new Timeline method using:
Histropedia.Timeline.prototype.getZoomChangeFromScaleFactor = function(scaleFactor){
   return Math.log(scaleFactor) / Math.log(this.options.zoom.ratio)
}

//Example use: Change the current zoom so that all time-span lengths are halved
//find the zoom change required for a scale factor 0.5
var zoomChange = myTimeline.getZoomChangeFromScaleFactor(0.5)
/add calculated change to the current zoom
myTimeline.setZoom(myTimeline.timescaleManager.zoom + zoom change)

Built in Pinch to Zoom

Pinch to zoom is built in to HistropediaJS v1.1.0, so you wont need an external library or custom code for this anymore.

In this version pinch to zoom is always active, but the next release will have options which allow you to configure how it works as well as attach you’re own handlers to pinch events.

If you do need to add any custom pinch handlers in the mean time then we’d recommend using a library like Hammer.JS alongside HistropediaJS.

Major improvements to date markers and labels

The style.marker and style.dateLabel sections in the Timeline options now each contain major and minor subsections. Styling these different types of date marker differently makes it much easier for the end user to see at a glance what time period they are in.

The date labels have had several improvements to aid easy reading of dates, all of which are configurable for major and minor labels separately. The following new options have been added:

• thousandsSeparator: Set the character used to group digits together in large numbers (e.g. the year “20000” will display as “20,000” on timeline date markers).
• yearPrefixes: Configure the brand new prefixes feature, which abbreviates date labels with very large numbers of years (e.g. the year 300,000 will display as “300ka” and the year 2,500,000 BCE will display as “2.5Ma BCE”). The new options allow you to edit the existing prefixes or add you’re own custom ones.
• textAlign: Set the text alignment of the date label relative to the corresponding marker on the timeline.
• offset: Set a horizontal and vertical offset for the position of the date label relative to the corresponding marker on the timeline.
• bceText: Set the text string to be appended to the end of BCE dates. The default is set to “ ʙᴄᴇ” for major date labels and an empty string “” for minor labels (i.e. no BCE text for minor date labels).

Well that’s an overview of some of the most exciting changes but there is plenty more to discover. For a complete list of all changes in HistropediaJS v1.1.0 see histropedia.com/histropediajs/download.html#release-notes

Any questions or comments?

Use the comments section below or send an email to info@histropedia.com if you have any general comments or feedback on the new release.
Please do get in touch if you’re already using HistropediaJS or planning a new project! We’re always happy to offer help and advice on getting the most out of HistropediaJS regardless of how big or small the project is 🙂

• About
• Latest Posts

Navino Evans

Co-Founder at Histropedia

Latest posts by Navino Evans (see all)

• Histropedia Sheets – Timelines from spreadsheets - May 4, 2021
• HistropediaJS v1.2.0 Released - October 13, 2020
• HistropediaJS v1.1.0 Released - April 24, 2019

More in this category

HistropediaJS Timeline Renderer – New features

More posts you might like:

• HistropediaJS v1.2.0 Released

Histropedia Sheets – Timelines from spreadsheets