Creating Interactive Timelines with JavaScript
source link: https://medium.com/nightingale/creating-interactive-timelines-with-javascript-b70b7ded3d13
Go to the source link to view the article. You can view the picture content, updated content and better typesetting reading experience. If the link is broken, please click the button below to view the snapshot at that time.
Creating Interactive Timelines with JavaScript
A step-by-step guide to visualizing the development of COVID-19 vaccines
I think all of us have come across timelines somewhere or the other; as a means of conveying chronological information, the classic timeline is unmatched, both in the depth of information conveyed and the “cool” factor, when done with a deft creative touch. So, with that said, would you like to learn how to build a timeline chart using JavaScript that both looks great and is simple to create? (Of course, you do!) Follow along with me as I take you through the step-by-step breakdown for developing your own JS timeline with a practical example.
As the world continues to battle with COVID-19, the long-awaited good news is the development of vaccines across the globe. Here, I decided to build an interactive timeline that showcases the phases of Pfizer-BioNTech vaccine development in the United States. To add more contextual information, I also wanted to show approvals from other countries and some related facts, including the dates for the development of the 3 other vaccines approved for usage in the US. Ultimately, this is what the finished product turns out as:
Image by the authorBuilding a Basic JavaScript Timeline Chart in 4 Steps
It’s actually quite easy to create charts and visualize data even without much technical knowledge. Of course, if you have skills with technologies like HTML and JavaScript, it is easier to grasp what is happening and you can arrange a wider range of customizations quicker. Nonetheless, data visualization with one of the available JS charting libraries is fairly straightforward. So, without worrying about any bugs (well, unfortunately, we do have to worry about the viruses), let’s take our first attempt at creating a timeline with JavaScript.
The first thing to understand is that not all JavaScript charting libraries support timeline charts. So logically, the first thing to do is to find one that does. In this tutorial, I decided to use AnyChart as it supports timelines out of the box and is also lightweight, flexible, and easy-to-use, providing extensive documentation and a dedicated playground that’s helpful for practising with code. All of this should help you understand the basics of the process, which tend to be quite similar regardless of which specific library you choose.
There are 4 fundamental steps to creating any JS chart, including a JS timeline chart. They are:
- Make a basic HTML page.
- Reference all necessary scripts.
- Add the data.
- Write some JS code to configure the timeline chart.
1. Make a basic HTML page
First of all, we have to set up a basic HTML page. This includes developing a framework for the visualization as well as adding the necessary CSS rules.
A basic HTML template is enclosed in html tag and contains 2 portions — a head and a body. The title of the page along with CSS links and JS scripts go in the head part. The body part defines the various components of the html page. One of the fundamental ways to define a section of the page is using the div tag in HTML.
Here, I create a div to contain the timeline chart and give it an id that will identify this specific container. I have set “100%” in both width and height parameters to make the timeline visualization occupy the entire page.
2. Reference all necessary scripts
Second, all necessary JS scripts need to be referenced in the <head> section. For this tutorial, since I am using the AnyChart library, I will include the corresponding files from its CDN (Content Delivery Network).
To create a timeline chart, I will need to add references to the core library module from AnyChart that is necessary for all types of charts as well as the special timeline module.
Adding the scripts for the timeline chart3. Add the data
Third, let’s add the data. I created a dataset for this timeline chart tutorial manually by compiling what I wanted from various news sources, two of the main ones being NYT and Bloomberg. My JSON data file is here in case you are interested.
Loading the JSON file in AnyChart can be done with the help of the Data Adapter module, which I add along with all the JS scripts in the <head>. Next, I use the loadJsonFile method inside the <script> tag in the body of the HTML page to load the data file.
Now that all the prep is done, get ready to add the code which will create the interactive JS timeline chart in no time!
4. Write some JS code to configure the timeline chart
The first basic step to create any chart this way is to add a function enclosing all the code, which makes sure that the entire code inside of it will only execute once the page is ready.
The timeline chart that I create here consists of 3 parts:
- the central timeline that shows the Pfizer-BioNTech vaccine development phases for the US as time intervals,
- the temporal ranges above the timeline that indicates events related to the Pfizer-BioNTech vaccine in general as milestones, and
- the markers below the timeline that represent the dates of development phases for other vaccines approved in the US as milestones.
Creating the central timeline is very straightforward, but it could get slightly overwhelming when dealing with the points above and below the timeline. Do not worry though, as all the code is commented, and I will walk you through each of the code snippets.
For the central part, all I need to do is initialize the timeline chart object with the inbuilt functionality and set the points to the range series.
Code snippet for the central timelineTo plot the above and below the timeline points, I initialize datasets, define the mapping for the points, and set both series with the moment series functionality.
Code snippet for the top and bottom points in the timelineNow I just need to set the scale of the timeline to 1 month and add a scroll bar that will allow seeing specific sections of the timeline.
Code snippet for the zoom level scaling and scrolling in the timelineTo wrap it up, I add a title to the chart, set the container defined for the chart, and draw the actual timeline.
The final lines of the code to draw the timelineThat’s it! A fully functional, interactive timeline chart is all set up!
You’re welcome to see and play with this initial version of the interactive timeline chart with the full JS/CSS/HTML code on CodePen.
The initial version of the timeline chartCustomizing the JS Timeline Chart
JavaScript libraries like AnyChart not only simplify the process of creating the base visualization but also provide the option for easy customizations. With a few code tweaks (or slightly more), if you want, you can make some quick and effective changes to the chart.
Colors and markers for the timeline
Simple customization that makes the chart look personalized is changing colors. Since the development phases include trials, review and approval, I used a color spectrum of red to green — traffic signal colors. I also change the marker color for the top series and use Pfizer’s signature blue for it.
Code snippet for the colors of the central timelineAs the bottom series contains information for three separate vaccines, I create a different series for all three of them, which in turn automatically assigns a different marker for each of the series.
Check out how the variation now looks. You can find the interactive version of this JS timeline chart iteration with the complete code here.
Tooltip customization
Additionally, I want to show some more information for each of the data points in the timeline, so I add that to the chart tooltip as an interactive feature, including some customization to the appearance.
Code snippet for the tooltip of the timelineText markers and title
The timeline looks just about ready, so it’s time for the finishing touches. I’ll format the title and add a subtitle to make it look better. I will then add text markers for the different series above and below the central timeline so that the events are more explanatory.
Code snippet for the last touches of the timeline
That’s it! You can find the interactive version of this JavaScript timeline chart on CodePen or GitHub.
In this step-by-step tutorial, I have shown just how easy it is to get a JS timeline chart not just up and running, but also how to bring it to life. There are a lot of customization options for timelines, and you can continue your exploration with the documentation here. Creating versatile and interactive JavaScript charts is easy with the aid of a good JS library. You can check out various other chart options or try your hand at other JavaScript charting libraries for your data visualization needs.
Please feel free to ask me any questions or let me know how your own JS timeline turned out. Stay safe and get your shots in time to fight this pandemic!
Shachee Swadia is a freelance data designer and content creator. She loves creating visualizations and writing about the process. You can check out her profile and more such articles here.
Recommend
About Joyk
Aggregate valuable and interesting links.
Joyk means Joy of geeK