Línea de tiempo horizontal interactiva con D3. js y Moment. js-D3ITL

Vista prévia

Descripción

D3ITL es un plugin de JavaScript utilizado para generar una línea de tiempo horizontal interactiva usando D3. js y Moment. js.

Al hacer clic en los círculos de eventos, verá más detalles sobre el evento.

Funcionamiento

Incluya las bibliotecas de D3. js y Moment. js requeridas de CDN.

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

Incluya los archivos JavaScript y CSS D3ITL's.

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

Defina sus propios eventos en un archivo JSON.

// 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"

]
}
]

Cree un elemento contenedor para colocar la línea de tiempo.

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

No olvide cambiar la ruta de acceso al archivo JSON en el JS.

d3.json("data.json")