Draw simple timeline with D3

Question

This is what I'm trying to accomplish:

Timeline

In this example, I have a starting date (1º Jun 2011), an ending date (1º Jul 2012) and multiple events between this range.

Each event is related to one day of the calendar (although it is possible to have many events on a single day).

This data is fetched from a MySQL DB.

Any help or suggestion will be highly appreciated.

score 53 · Accepted Answer · edited Jan 17 '14 at 18:29

53

I recently had to do something similar. I ended up writing a d3 plugin that could handle this case among a few others. https://github.com/jiahuang/d3-timeline

enter image description here

I'm pretty new to D3 as well, but I hope it's useful.

edited Jan 17 '14 at 18:29

VividD

10,456
6
64
111

answered Dec 27 '12 at 04:59

zhyfer

920
1
7
10

I had to make some changes in the code, but your plugin was exactly what I needed. Thanks and sorry for the late response, I was busy with another stuff. – azeós Feb 13 '13 at 16:15
2

@azeós could you share your modifications with the class? I am very curious. – randomblink Dec 19 '14 at 16:44
@randomblink It was for an old and dead project. I'll search through the files and see if I can find it. – azeós Dec 19 '14 at 20:35

score 9 · Answer 2 · answered Nov 07 '12 at 19:32

9

You should be able to accomplish this with a time scale and an axis

Scott Murray has a really good set of tutorials that culminates in one for axes

Just think of your time line as a 1-dimensional scatterplot with a time scale.

answered Nov 07 '12 at 19:32

Superboggly

5,804
2
24
27

7

Is there a tutorial for D3 tailored to 5 year olds? I need something like that. – randomblink May 02 '15 at 02:47

score 1 · Answer 3 · answered Jul 27 '17 at 07:54

1

I am going to develop similar visualization and found on Github timeknots component based on d3.js.

answered Jul 27 '17 at 07:54

Draw simple timeline with D3

3 Answers3

Linked