Interactive Horizontal Timeline With D3.js And Moment.js – D3ITL

D3ITL is a JavaScript plugin used to generate an interactive horizontal timeline using d3.js and moment.js.

Clicking the event circles you will see more details about the event.

How to use it:

Include the required d3.js and moment.js libraries from CDN.

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

Include the D3ITL’s JavaScript and CSS files.

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

Define your own events in a JSON file.

// data.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"
  ]
},
{
  "id": 2,
  "name": "Master degree in Computer Science",
  "category": "Education",
  "placeName": "Université de Grenoble",
  "country": "France",
  "startDate": "2016-09",
  "endDate": "2018-07",
  "description": ["Algorithms",
  "Java",
  "Web Dev",
  "Systems & Networks",
  "DB (SQL)",
  "HCI",
  "AI"],
  "skills": [
    "java",
    "algorithms",
    "javascript",
    "php",
    ".NET",
    "SQL"
  ]
},
{
  "id": 3,
  "name": "Project Manager and Front-End Engineer",
  "category": "Work",
  "placeName": "Studio Umi",
  "country": "Japan",
  "startDate": "2015-02",
  "endDate": "2016-07",
  "description": ["Web project planning",
  "Budget prevision",
  "Team and deadlines management",
  "HTML",
  "CSS",
  "SCSS",
  "Sass",
  "Gulp",
  "jQuery",
  "GitLab",
  "Drupal(7)",
  "Events & Talks : CMS Summer Festival Osaka, Start Up Week End Nagahama Shiga, Drupal Cafe, Code for Shiga"],
  "skills": [
    "html",
    "css",
    "scss",
    "javascript",
    "jQuery",
    "php",
    "Drupal"
  ]
}
]

Create a container element to place the timeline.

<div id="timelineChart"></div>

Don’t forget to change the path to the JSON file in the JS.

d3.json("data.json")