Click here to Skip to main content
Click here to Skip to main content
Go to top

ChronoZooms v2.1-Rise of the Big Bang Theory

, 27 Oct 2013
Rate this:
Please Sign up or sign in to vote.
How do you see time? Or better yet how do you visualize time when explaining to students about the concepts of the Big Bang theory from 13 Billion years ago? Now not only can help your students understand what 13B years ago looks like you can experience Big History in a fascinating new way.

Please note

This article is an entry in our AppInnovation Contest. Articles in this sub-section are not required to be full articles so care should be taken when voting.


Category : All-in-One  

ChronoZooms is an time visualization application that uses the concept of zooming to express the scope of time.This is something that a timeline drawn on paper could never do! Zooming makes it possible to view Big History in a whole new way. ChronoZooms visualizes time on the broadest possible scale from the Big Bang to the present day. ChronoZooms approaches the documentation and visualization of time and history in the same way that Google Earth deals with geography.  

Why ChronoZooms?

Just as Student  cannot reasonably access millions of books without heavy computational aids, humans have difficulty even conceiving of the scope of ‘big’ human history that covers billions of years. With ChronoZooms, you can explore an array of historical data including articles, images, video and audio. 


"An Image is better than 1000 words" 

The primary goal of ChronoZooms is to make time relationships between different studies of history clear and vivid. ChronoZooms is focused on providing a dynamic, interactive cloud based data visualization tool for Big History. It allows users to see the true scale of time over cosmic, geologic, biological and social periods.

ChronoZooms is an open-source community project dedicated to visualizing the history of everything. you can search the online ChronoZoom program  over the internet. then why can't it be a windows application also? ChronoZooms is planned as an educational tool as well as a research tool, by allowing researchers to plot various time series data next to each other for comparison.  

Significant Features of ChronoZooms: 

Create personal canvas/timeline/tours:

  Users can able to create their own timeline/exhibit/tours by signing up with Microsoft account.It allows users to save their own life on the timeline. 


Use of device GPS(On Progress): 

This is a new feature where users can update their location in their timeline.  

Multi-touch interface(new): The app takes advantage of the touch capability of the AIO allowing user/users to Pinch and Zoom over the timeline and to grab any exhibit on the timeline.  

Multi-modal interaction(On Progress)  

This feature is new in this version. Users can able to get into the information's  using voice commands. 


Share timelines or tours with others via social networking(new):

Users can able to share their timeline with others through  Facebook or twitter. 

Display Geo-spacial data 

Present multiple interpretations  

Uses the Full Screen of Lenovo Horizon AIO 27"  

Approach taken : 

I have been working this application on Windows 8 Platform with HTML5 and Javascript.  


ChronoZooms uses Microsoft Seadragon Deep Zoom technology, moving along the z-axis.   

Caption: Visual  Timeline and information about Discovery of Dinosaurs

Caption: Exhibit about Windows 7 Release  


 ChronoZoom is a Open-Source project which was rewritten in HTML5 and Javascript.

To Create Axis for the timeline the code are:  

File: axis.htm

<script type="text/javascript">
$(document).ready(function () {

    var _div = $("#axis").first();
    // Connect RX to axis
    // get the stream of events from the mousedown, mousemove and mouseup events
    var mouseDown = _div.toObservable("mousedown"),
    mouseMove = _div.toObservable("mousemove"),
    mouseUp = _div.toObservable("mouseup"),
    mouseWheel = _div.toObservable("mousewheel");

    // get the changes in the X and Y direction as the mouse moves
    var mouseMoves = mouseMove.Skip(1).Zip(mouseMove, function (left, right) {
        return {
            xChange: left.clientX - right.clientX,
            yChange: left.clientY - right.clientY
    }); // for each mouse down event, get all the subsequent changes in the clientX and
    // clientY values resulting from the mouse move events until mouse up event occurs
    var mouseDrags = mouseDown.SelectMany(function (md) { return mouseMoves.TakeUntil(mouseUp);

    mouseDrags.Subscribe(function (mouseEvent) {
        var range = $("#axis").axis("getRange");
        var change = mouseEvent.xChange * (range.right - range.left) / 800.0;
        range.left -= change;
        range.right -= change;
        $("#axis").axis("setRange", range.left, range.right);
    }); var mouseWheels = mouseWheel.Zip(mouseWheel, function (event) {
        var factor = 0;
        if (!event) event = window.event; if (event.wheelDelta) {
            factor = event.wheelDelta / 120;
        } else if (event.detail) {
            factor = -event.detail / 3;
        } return factor < 0 ? 1.2 : 1 / 1.2;

    mouseWheels.Subscribe(function (factor) {
        var range = $("#axis").axis("getRange");

        var delta = (range.right - range.left) / 2; 
        var center = (range.left + range.right) / 2; 
        var min = center - delta * factor;
        var max = center + delta * factor;

        $("#axis").axis("setRange", min, max);

    $(window).bind('resize', function () {

 File: axis.js Only some important functions only showed 

/*sets whether the mouse move over the axis will move the marker
allowMarkerMovesOnHover: function (e) {
    this.doesMarkerMovesOnHover = e;
_init: function () {
_destroy: function () {
    return this;
// in cosmos or calendar mode zoom is possible up to 4 decimal digits or up to 1 year span near present date (or zero)
if (this.options.mode == "cosmos" || this.options.mode == "calendar") {
    var start = Math.max(this.options.range.left, maxPermitedTimeRange.left);
    var finish = Math.min(this.options.range.right, maxPermitedTimeRange.right);
    if (this.options.mode == "calendar") {
        // shift range limits as in calendar mode we count from present year
        start -= this.firstYear;
        finish -= this.firstYear;
    var d = finish - start;
    var beta = this.beta;

    if (this.options.mode == "cosmos") {
        // prevent zooming deeper than 4 decimal digits
        if (this.regime == "Ga" && beta < 5) beta = 5;
        else if (this.regime == "Ma" && beta < 2) beta = 2;
        else if (this.regime == "ka" && beta < -1) beta = -1;
    else if (this.options.mode == "calendar") {
        // prevent zooming deeper than 1 year span if (beta < 0) beta = 0;
    // span between two neighboring ticks
    var temp = * Math.pow(10, beta);
    // calculate count of ticks to create
    var min = Math.floor(start / temp);
    var max = Math.floor(finish / temp);
    var count = max - min + 1;

    // calculate rounded ticks values
    // they are in virtual coordinates (years from present date)
    var x0 = min * temp;
    if (temp == 2) count++;

    for (var i = 0; i < count + 1; i++) { var v = this._round(x0 + i * temp, beta);
    if (this.options.mode == "calendar") {
            if (v < 0) v += 1;
            if (Math.abs(v) < 1e-10 && temp > 1) // Move tick from 1BCE to 1CE
        if (v >= start && v <= finish && v != ticks[ticks.length - 1]) {

Implementation of New Voice Recognition in the Application:  

I will be updated very soon...

Note : This is the Open-Source project but i have implemented some of my own ideas in this application to make the app even better. Once i implemented my own ideas in way of coding i will update it. 


Initial post: 30 July 2013.


This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)


About the Author

Wilson P Shiruguppi
Student Software Developer
India India
Wilson is a Student,App Developer,Tech Enthusiastic,love to learn new stuffs who pursues Pre-University college.
He have been working on platforms like Windows, Windows phone 8 and Blackberry.He started to develop apps for windows 8 and windows phone8 a 8 months ago. He is currently living at Coimbatore,Tamilnadu.
Some of his previous works are:

Comments and Discussions

QuestionSo great! PinmemberMember 1077789229-Apr-14 21:11 
QuestionWait a sec... PinprofessionalAdam David Hill16-Jan-14 12:56 
AnswerRe: Wait a sec... PinprofessionalWilson P Shiruguppi23-Apr-14 11:03 
QuestionHow's app development going? Will you be submitting on time? PinstaffKevin Priddle23-Oct-13 10:28 
AnswerRe: How's app development going? Will you be submitting on time? PinprofessionalWilson P Shiruguppi27-Oct-13 7:19 
GeneralMy vote of 5 Pinmembermadhumathnan28-Aug-13 17:50 
GeneralRe: My vote of 5 PinprofessionalWilson PS29-Aug-13 9:15 
GeneralMy vote of 5 PinmemberMember 1022126720-Aug-13 8:55 
GeneralRe: My vote of 5 PinprofessionalWilson PS29-Aug-13 9:16 
GeneralMy vote of 5 PinprofessionalAdam David Hill19-Aug-13 2:10 
GeneralRe: My vote of 5 PinprofessionalWilson PS29-Aug-13 9:17 
AdminThanks for your submission! PinstaffKevin Priddle9-Aug-13 10:44 
GeneralRe: Thanks for your submission! PinstaffKevin Priddle16-Aug-13 14:46 
GeneralRe: Thanks for your submission! PinprofessionalWilson PS17-Aug-13 19:47 
GeneralMy vote of 5 PinprofessionalArun Murugesan(cse)6-Aug-13 8:01 
GeneralRe: My vote of 5 PinprofessionalWilson PS8-Aug-13 6:24 
GeneralMy vote of 5 PinprofessionalAbhishek Nandy3-Aug-13 22:55 
GeneralRe: My vote of 5 PinprofessionalWilson PS8-Aug-13 6:24 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.

| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 27 Oct 2013
Article Copyright 2013 by Wilson P Shiruguppi
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid