EventDrops
EventDrops is a time based / event series interactive visualization tool powered by D3.js.
If you want to pan and zoom on previous data on your own, here is the demo.
Installation
EventDrops is provided as an npm package. Grab it using the tool of your choice:
yarn add event-drops
npm install --save event-drops
Note you don't need this step if you don't use any module bundler.
Since version 1.0, event-drops follows semantic versionning. Hence, we recommend checking your package.json file and ensure that event-drops version is preceded by a carret:
{
"event-drops": "^1.0.0"
}
This way, you'll get all bug fixes and non breaking new features.
Usage
Without a Module Bundler
If you don't use any module bundler such as Webpack, we recommend using EventDrop script available on unpkg.com. Grabbing last versions of the library is as simple as:
<link href="https://unpkg.com/event-drops/dist/style.css" rel="stylesheet" />
<script src="https://unpkg.com/d3"></script>
<script src="https://unpkg.com/event-drops"></script>
Then, the code is similar to the one with module bundler (see next paragraph), except you are not forced to specify D3 configuration parameter.
With a Module Bundler
If you use a module bundler, you can import EventDrops the following way:
import * as d3 from 'd3/build/d3';
import eventDrops from 'event-drops';
const chart = eventDrops({ d3 });
const repositoriesData = [
{
name: 'admin-on-rest',
data: [{ date: new Date('2014/09/15 14:21:31') } /* ... */],
},
{
name: 'event-drops',
data: [{ date: new Date('2014/09/15 13:24:57') } /* ... */],
},
{
name: 'sedy',
data: [{ date: new Date('2014/09/15 13:25:12') } /* ... */],
},
];
d3
.select('#eventdrops-demo')
.data([repositoriesData])
.call(chart);
You can either use D3 as a specific import (specifying it in first argument of eventDrops call), or use the global one. By default, it fallbacks to a global defined d3.
Interface
eventDrops function takes as a single argument a configuration object, detailed in the:
In addition to this configuration object, it also exposes some public members allowing you to customize your application based on filtered data:
- scale() provides the horizontal scale, allowing you to retrieve bounding dates thanks to
.scale().domain(), - filteredData() returns an object with both
dataandfullDatakeys containing respectively bounds filtered data and full dataset. - draw(config, scale) redraws chart using given configuration and
d3.scaleTimescale - destroy() execute this function before to removing the chart from DOM. It prevents some memory leaks due to event listeners.
- currentBreakpointLabel returns current breakpoint (for instance
small) among a list of breakpoints.
Hence, if you want to display number of displayed data and time bounds as in the demo, you can use the following code:
const updateCommitsInformation = chart => {
const filteredData = chart
.filteredData()
.reduce((total, repo) => total.concat(repo.data), []);
numberCommitsContainer.textContent = filteredData.length;
zoomStart.textContent = humanizeDate(chart.scale().domain()[0]);
zoomEnd.textContent = humanizeDate(chart.scale().domain()[1]);
};
Contributing
If you want to contribute to EventDrops, first, thank you!
To launch the project locally, grab this repository, install its dependencies, and launch the demo:
git clone git@github.com:marmelab/EventDrops.git
cd EventDrops
make install
make run
Demo will then be available on http://localhost:8080. Source files are watched automatically. Changing one file would automagically reload your browser.
When you are satisfied with your changes, ensure you didn't break anything launching tests:
make test
Finally, if everything is fine, you can then create a pull request.
Feel free to ask some help on GitHub issue tracker. The core team would be glad to help you to contribute.
License
EventDrops is released under the MIT License, courtesy of marmelab and Canal Plus. It means you can use this tool without any restrictions.