<commit_before>d3-timeline-event-horizon
==

![timelines](images/timelines-object-before.png)

The d3-timeline-event-horizon library is a Javascript library for creating an
interactive visualization depicting when an event occured relative to a
user-defined milestones and using those milestones as a bracketing
device. It piggybacks atop the mighty mighty [D3.js](http://d3js.org/) library.

The timeline's goal is to visualize — and to develop a visual language to represent — an individual event relative to the velocity
of major events that define the larger set of events. Wherever possible the
library will display both the start and end dates for an object represented as its own underlined
event span. If only the start date for an event is know it is indicated that using
a blue arrow.

There is also an `echo` date for an event that is indicated using a white
arrow. For example, the Cooper-Hewitt uses the `echo` date to denote the year in
which an object was acquired in to the permanent collection.

Example
--

First you need to load the necessary Javascript and CSS bits to draw the timeline:

	<link rel="stylesheet" type="text/css" href="css/d3.timeline.event-horizon.css" />
	<script type="text/javascript" src="javascript/d3.min.js"></script>
	<script type="text/javascript" src="javascript/d3.timeline.event-horizon.min.js"></script>

Then you need to add a `div` element that will contain the timeline. The height
and width of the timeline are derived from the corresponding properties of the
parent `div` element.

	<div id="timeline"></div>

The you'll need to define the context (a list of events) for the timeline and
optional event that will displayed in that context. Once you've done that simply
create a new `timeline` object and call its `draw` method.

	<script type="text/javascript"><commit_msg>More images<commit_after>d3-timeline-event-horizon
==

![span](images/timelines-object-span.png)

The d3-timeline-event-horizon library is a Javascript library for creating an
interactive visualization depicting when an event occured relative to a
user-defined milestones and using those milestones as a bracketing
device. It piggybacks atop the mighty mighty [D3.js](http://d3js.org/) library.

![before](images/timelines-object-before.png)

The timeline's goal is to visualize — and to develop a visual language to represent — an individual event relative to the velocity
of major events that define the larger set of events. Wherever possible the
library will display both the start and end dates for an object represented as its own underlined
event span. If only the start date for an event is know it is indicated that using
a blue arrow.

![span hover](images/timelines-object-span-hover.png)

There is also an `echo` date for an event that is indicated using a white
arrow. For example, the Cooper-Hewitt uses the `echo` date to denote the year in
which an object was acquired in to the permanent collection.

Example
--

First you need to load the necessary Javascript and CSS bits to draw the timeline:

	<link rel="stylesheet" type="text/css" href="css/d3.timeline.event-horizon.css" />
	<script type="text/javascript" src="javascript/d3.min.js"></script>
	<script type="text/javascript" src="javascript/d3.timeline.event-horizon.min.js"></script>

Then you need to add a `div` element that will contain the timeline. The height
and width of the timeline are derived from the corresponding properties of the
parent `div` element.

	<div id="timeline"></div>

The you'll need to define the context (a list of events) for the timeline and
optional event that will displayed in that context. Once you've done that simply
create a new `timeline` object and call its `draw` method.

	<script type="text/javascript">
{'fraction_non_alphanumeric': 0.07495332088556948, 'fraction_numerical': 0.0037343291544411844, 'mean_word_length': 4.699088145896656, 'pattern_counts': {'":': 0, '<': 19, '<?xml version=': 0, '>': 19, 'https://': 0, 'lorem ipsum': 0, 'www.': 0, 'xml': 0}, 'pii_count': 0, 'substrings_counts': 0, 'word_list_counts': {'cursed_substrings.json': 0, 'profanity_word_list.json': 0, 'sexual_word_list.json': 0, 'zh_pornsignals.json': 0}}
{'dir': 'git-commits-cleaned', 'id': '6085811', 'n_tokens_mistral': 1037, 'n_tokens_neox': 988, 'n_words': 505}