Generate An Interactive Timeline From JSON Using D3.js

Preview:

Description:

With the rise of data visualization libraries like D3.js, designers and developers are creating new site elements using these new powerful tools. One of these new block elements gaining in popularity is the timeline.

The Interactive Timeline library is a tool that helps quickly generate a horizontal timeline from JSON to visualize data over time. It uses the d3.js JavaScript library to create and set up the graphic, as well as the CSS3 transition properties to add animated effects.

How to use it:

1. Load the necessary d3.js and moment.js libraries in the document.

<script src="https://d3js.org/d3.v7.min.js"></script>
<script src="https://momentjs.com/downloads/moment.js"></script>

2. Load the stylesheet timeline.css and JavaScript timeline.js in the document.

<link rel="stylesheet" href="assets/timeline.css" />
<script src="assets/timeline.js"></script>

3. Create the HTML for the timeline.

<div id="timeline">
  <h2>My Timeline</h2>
  <div id="timelineChart"></div>
</div>

4. Override the default data in the timeline.json

[
  {
  "id": 0,
  "name": "Bachelor degree in Japanese and English languages",
  "category": "Education",
  "placeName": "Université de Grenoble (Stendhal)",
  "country": "France",
  "startDate": "2010-09",
  "endDate": "2013-07",
  "description":["Japanese (Kanji, Grammar, History, Language practise)",
    "English (British and American history, Grammar, Language practise)",
   "Economy, Accounting, Law, International law",
   "Introduction to computer Science (Javascript, Adobe Flash Player, Microsoft Access, CMS)"],
  "skills": [
    "english",
    "japanese",
    "law",
    "economics"
  ]
},
{
  "id": 1,
  "name": "Exchange Student",
  "category": "Education",
  "placeName": "Nagoya University of Foreign Studies",
  "country": "Japan",
  "startDate": "2012-09",
  "endDate": "2013-07",
  "description": ["Japanese language classes JLPT N3, JLPT N2",
  "Tourism & Hospitality",
  "Economy",
  "British law",
  "Sociology"],
  "skills": [
    "english",
    "japanese",
    "law",
    "economics",
    "sociology",
    "tourism industry"
  ]
},
// ...
]