d3plus / d3plus-timeline

An easy-to-use javascript timeline.

d3plus

D3plus is a JavaScript re-usable chart library that extends the popular D3.js to enable the easy creation of beautiful visualizations.

Installing

If using npm, npm install d3plus. Otherwise, you can download the latest release from GitHub or load from a CDN.

import modules from "d3plus";

d3plus can be loaded as a standalone library or bundled as part of D3plus. ES modules, AMD, CommonJS, and vanilla environments are supported. In vanilla, a d3plus global is exported:

<script src="https://cdn.jsdelivr.net/npm/d3plus@2"></script>
<script>
  console.log(d3plus);
</script>

Resources

Examples and documentation are published in a Storybook here. Each example has controls that are able to modified on the fly, documentation for each method used, and an example code output for the d3plus-react configurations.

Examples and Documentation

Modules

D3plus 2.0 is a collection of modules that are designed to work together; you can use the modules independently, or you can use them together as part of the default build. The source and documentation for each module is available in its repository. Follow the links below to learn more.

Core Packages

• d3plus-axis
• d3plus-color
• d3plus-common
• d3plus-export
• d3plus-format
• d3plus-geomap
• d3plus-hierarchy
• d3plus-legend
• d3plus-matrix
• d3plus-network
• d3plus-plot
• d3plus-priestley
• d3plus-shape
• d3plus-text
• d3plus-timeline
• d3plus-tooltip
• d3plus-viz

React Usage

• d3plus-react

Examples and Documentation

• d3plus-storybook

d3plus-timeline's Issues

add play button to cycle through all ticks

Timebrush.on last version

On the last version of this library the timeline.on('end', function() {}), is triggering everytime it hits a point after the first time i use it.
https://jsfiddle.net/fvxpb4g7/2/

timeline breaks with large number of monthly ticks

const months = ["01/01/2012", "02/01/2012", "03/01/2012", "04/01/2012", "05/01/2012", "06/01/2012", "07/01/2012", "08/01/2012", "09/01/2012", "10/01/2012", "11/01/2012", "12/01/2012", "01/01/2013", "02/01/2013", "03/01/2013", "04/01/2013", "05/01/2013", "06/01/2013", "07/01/2013", "08/01/2013", "09/01/2013", "10/01/2013", "11/01/2013", "12/01/2013", "01/01/2014", "02/01/2014", "03/01/2014", "04/01/2014", "05/01/2014", "07/01/2014", "08/01/2014", "09/01/2014", "11/01/2014", "12/01/2014", "01/01/2015", "02/01/2015", "03/01/2015", "04/01/2015", "06/01/2015", "07/01/2015", "08/01/2015", "09/01/2015", "10/01/2015", "11/01/2015", "12/01/2015", "01/01/2016", "02/01/2016", "03/01/2016", "04/01/2016", "05/01/2016", "06/01/2016", "07/01/2016", "08/01/2016", "09/01/2016", "10/01/2016", "11/01/2016", "01/01/2017", "02/01/2017", "03/01/2017", "04/01/2017"];

new d3plus.Timeline()
  .domain([months[0], months[months.length - 1]])
  .ticks(months)
  .render();

missing years in button timeline cause sizing error

Expected Behavior

When specifying ticks, the timeline should use an ordinal scale and only show the ticks specified.

Current Behavior

All ticks are displayed, and the button widths are incorrect.

Steps to Reproduce (for bugs)

http://jsfiddle.net/cfgyorpd/2/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS Mojave

define labels based on defined ticks

If the user has specific ticks for the timeline, use those for the labels as well.

if (this._ticks) this.labels(this._ticks);

support locale method for international time formatting

updating d3plus-axis to 0.3.50 adds weird spaces between buttons

I recently tried to upgrade from 0.3.41 to 0.3.50, and the timeline now looks like this:

An in-range update of d3plus-dev is breaking the build 🚨

Version 0.4.11 of d3plus-dev just got published.

Branch	Build failing 🚨
Dependency	d3plus-dev
Current Version	0.4.10
Type	devDependency

This version is covered by your current version range and after updating it in your project the build failed.

As d3plus-dev is “only” a devDependency of this project it might not break production or downstream projects, but “only” your build or test tools – preventing new deploys or publishes.

I recommend you give this issue a high priority. I’m sure you can resolve this 💪

Status Details

• ❌ continuous-integration/travis-ci/push The Travis CI build failed Details

---

Release Notes

v0.4.11

• updates documentation (1e49da9)
• fixes nested npm script output in release script (fc64fcc)
• fixes examples cd script (0bfa212)
• updates rollup bundle for zora tests (5335d22)
• updates documentation (88319b6)
• updates rollup moduleId (aaab4a1)
• updates documentation (b5063c4)
• updates documentation (0a937b3)
• updates documentation (459a36c)
• updates dev script styles (0d0367a)
• updates package-lock.json (68601bd)
• Merge branch 'master' of https://github.com/d3plus/d3plus-dev (8b4bc3b)
• updates package-lock.json (e3b57e2)
• fix(package): update rollup to version 0.45.2 (#38) (9e23752)
• Merge branch 'master' of https://github.com/d3plus/d3plus-dev (a274a31)
• fix(package): update chalk to version 2.0.1 (#37) (774a038)
• adds time front matter to examples (281f8cb)
• implements global website docs generation (60c5e5c)
• updates documentation (d3e42d3)
• updates documentation (24cabbc)
• updates documentation (3f86d9f)
• updates documentation (1f83564)
• updates documentation (f7c009c)
• updates documentation (bf5feb6)
• updates documentation (cb4a521)
• updates documentation (18e9dee)
• updates documentation (7a5cc98)
• removes scrolling from example embeds (fb0f73e)
• rebuilds package-lock.json (9a77d44)
• updates dependencies (7f79ca1)
• adds package-lock.json (c3816b1)
• fix(package): update rollup-watch to version 4.0.0 (#34) (86ae9cb)
• fix(package): update rollup to version 0.42.0 (#33) (2f580bf)
• fix(package): update i18next-parser to version 0.12.0 (#32) (a555c56)

Commits

The new version differs by 35 commits.

• 1e49da9 updates documentation
• fc64fcc fixes nested npm script output in release script
• 0bfa212 fixes examples cd script
• 5335d22 updates rollup bundle for zora tests
• 88319b6 updates documentation
• aaab4a1 updates rollup moduleId
• b5063c4 updates documentation
• 0a937b3 updates documentation
• 459a36c updates documentation
• 0d0367a updates dev script styles
• 68601bd updates package-lock.json
• 8b4bc3b Merge branch 'master' of https://github.com/d3plus/d3plus-dev
• e3b57e2 updates package-lock.json
• 9e23752 fix(package): update rollup to version 0.45.2 (#38)
• a274a31 Merge branch 'master' of https://github.com/d3plus/d3plus-dev

There are 35 commits in total.

See the full diff

Not sure how things should work exactly?

There is a collection of frequently asked questions and of course you may always ask my humans.

---

Your Greenkeeper Bot 🌴

improve performance timeline axis

I want to improve how to manipulate the timeline properties for projects with months / quarters / years, and too much labels in small sizes.

Some ideas:

• Set specific behaviors, like .timelineBehavior("Quarter") for quarters.
• Try to improve buttonBehavior

weird behavior in buttons

Expected Behavior

I would expect to have buttons with same widths and correct brushing between them.

Current Behavior

The width in buttons are differents and brushing is not working correctly.

Steps to Reproduce (for bugs)

http://jsfiddle.net/xs5p2ujh/3/

Your Environment

• Browser Name: Google Chrome
• Operating System and Version: MacOS High Sierra

An in-range update of d3plus-axis is breaking the build 🚨

The dependency d3plus-axis was updated from 0.4.3 to 0.4.4.

🚨 View failing branch.

This version is covered by your current version range and after updating it in your project the build failed.

d3plus-axis is a direct dependency of this project, and it is very likely causing it to break. If other packages depend on yours, this update is probably also breaking those in turn.

Status Details

• ❌ continuous-integration/travis-ci/push: The Travis CI build could not complete due to an error (Details).

---

Release Notes for v0.4.4

• updates documentation (c399a7c)
• updates minor d3plus dependencies (4d79df8)
• fixes bug where disabling labels would not draw Axis (d928f48)

Commits

The new version differs by 4 commits.

• c399a7c updates documentation
• 4d79df8 updates minor d3plus dependencies
• d928f48 fixes bug where disabling labels would not draw Axis
• 2d2c82a compiles v0.4.3

See the full diff

FAQ and help

There is a collection of frequently asked questions. If those don’t help, you can always ask the humans behind Greenkeeper.

---

Your Greenkeeper Bot 🌴

If year range is less than number of ticks, ticks are repeated

first click doesn't register

Selecting a DOM element fails to render correctly

https://jsfiddle.net/7sd60eb4/

The only portion of the figure that renders is the domain.

allow overriding "cursor" attr of brush overlay

defines custom intervals between dates

When you are using .domain(2001, 2004), d3Scale try to guess the best interval between dates. In some cases, when the domain is small, d3Scale completes with months.

Sometimes, you want continuous values in the ticks with specific time interval (years, months, days)

d3Scale: https://github.com/d3/d3-scale/blob/master/src/time.js

Problem with Timeline render

Weird rendering when dates comes from different year-months.

Expected Behavior

Behavior is ok. It renders 4 options (my 4 different dates) and on click the viz changes properly.
The problem is in presentation and formatting.

Current Behavior

Timelie is shown like this:

Why are they rotated? How can I format this strings in the timeline (I need to show quarters)?

Steps to Reproduce (for bugs)

1. See timeline here: https://jsfiddle.net/palamago/d46qae3v/

Your Environment

• Browser Name: Chrome
• Operating System and Version:

conditionally add classes to .d3plus-viz-timeline based on presentation type

For example:

<g class="d3plus-viz-timeline d3plus-viz-timeline-ticks">
<g class="d3plus-viz-timeline d3plus-viz-timeline-buttons">

button timeline does not work with Date objects

Expected Behavior

I would expect to be able to pass fully-validated JavaScript Date objects to the various methods.

Current Behavior

Setting the domain, ticks, in addition to the current selection causes bugs.

Steps to Reproduce (for bugs)

http://jsfiddle.net/xs5p2ujh/1/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS High Sierra

fix align behavior in button timeline

Expected Behavior

align should change the vertical alignment of the timeline, regardless of "buttons" or "ticks" behavior. Timelines should always be horizontally centered (for now)

Current Behavior

This one is my fault, I told you to make align change the horizontal alignment of the button timeline.

Steps to Reproduce (for bugs)

http://jsfiddle.net/cfgyorpd/1/

Your Environment

• Browser Name: Chrome
• Operating System and Version: macOS Mojave

alternate timeline view when all ticks can be displayed

The old d3plus had 2 different modes:

1. if all labels can be displayed, show them as buttons (seen here)
2. if all labels cannot be displayed, show the timeline as an axis with ticks (current behavior, visible here in DataViva)

We need to implement the first mode (the second mode is the current behavior).

Please disregard the play button in those old examples for now.