Author: | c-c-l |
---|---|
Views Total: | 3,864 views |
Official Page: | Go to website |
Last Update: | March 23, 2019 |
License: | MIT |
Preview:

Description:
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")