HistropediaJS v1.1.0 Released
By Navino Evans
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! 1. Calculate the length scale factor from a change in zoom level Use this method to predict the size in pixels of any time span after a given change in zoom level (without actually changing the zoom level on the timeline).
// Add as a new Timeline method using:
Histropedia.Timeline.prototype.getScaleFactor = 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.getScaleFactor(3.5);
// Note: use negative zoomChange for a decrease in zoom level
2. Calculate zoom change required for a given length scale factor
This is the inverse of the function above. You can use it to calculate the change in zoom that would be required to transform all time-span lengths by a given scale factor.
// Add as a new Timeline method using:
Histropedia.Timeline.prototype.getZoomChange = 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.getZoomChange(0.5)
// add calculated change to the current zoom
myTimeline.setZoom(myTimeline.timescaleManager.zoom + zoomChange)
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).