Draw simple timeline with D3

javascript html d3.js visualization timeline
azeós picture azeós · Nov 2, 2012 · Viewed 31.9k times · Source

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.

Answer

zhyfer picture zhyfer · Dec 27, 2012

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

enter image description here

enter image description here

enter image description here

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

Related questions

D3js take data from an array instead of a file

I have found this excellent d3js chart here. However in my case I want this chart to take value from an array instead of a tsv file. I want to make it to take values from a table []. How …

Read More
How do I check whether a checkbox is checked in jQuery?

I need to check the checked property of a checkbox and perform an action based on the checked property using jQuery. For example, if the age checkbox is checked, then I need to show a textbox to enter age, else …

Read More
How can I change an element's class with JavaScript?

How can I change the class of an HTML element in response to an onclick or any other events using JavaScript?

Read More