Name: EventDrops
Owner: marmelab
Description: A time based / event series interactive visualization using d3.js
Created: 2014-09-16 08:14:58.0
Updated: 2018-01-17 15:26:46.0
Pushed: 2018-01-18 17:27:27.0
Homepage: http://marmelab.com/EventDrops/
Size: 2388
Language: JavaScript
GitHub Committers
| User | Most Recent Commit | # Commits |
|---|---|---|
| Chulki Lee | 2014-10-11 19:38:13.0 | 1 |
| Sam Lai | 2018-02-07 20:37:58.0 | 1 |
| Francois Zaninotto | 2018-02-05 17:54:25.0 | 47 |
| Korney Czukowski | 2017-03-30 13:59:56.0 | 1 |
| Ohad | 2017-03-14 08:13:04.0 | 17 |
| Jonathan Petitcolas | 2018-03-20 17:42:05.0 | 219 |
| Nathan Breit | 2016-10-27 06:26:03.0 | 1 |
| Simon Hartcher | 2016-09-01 07:20:54.0 | 1 |
| Julien Demangeon | 2018-03-20 08:38:16.0 | 8 |
| Gildas Garcia | 2018-03-15 20:17:33.0 | 16 |
| messense | 2015-12-04 09:03:31.0 | 1 |
| Kmaschta | 2018-03-19 17:12:16.0 | 27 |
| Emmanuel Quentin | 2014-09-23 14:08:25.0 | 1 |
| Chad Ramos | 2018-03-01 14:45:33.0 | 3 |
| Juliano Alves de Oliveira | 2017-05-16 13:48:36.0 | 2 |
| ThieryMichel | 2017-10-18 07:43:56.0 | 88 |
| Robin Bressan | 2016-02-23 20:23:38.0 | 12 |
| Tristan Newmann | 2016-09-08 13:49:46.0 | 7 |
| Christian Gass | 2018-03-02 14:49:15.0 | 1 |
| Joan Yin | 2015-06-25 15:15:32.0 | 1 |
| Mélodie Benmouffek | 2015-06-25 07:52:22.0 | 1 |
| marmelab-bot | 2016-09-07 12:22:29.0 | 1 |
| Sedy Bot | 2018-01-18 17:27:25.0 | 3 |
Other Committers
| User | Most Recent Commit | # Commits | |
|---|---|---|---|
| Joel Schlosser | joel.schlosser@gtri.gatech.edu | 2014-09-26 18:44:45.0 | 1 |
| Kurt Westerfeld | kurt@yellowbrick.io | 2016-11-17 18:38:45.0 | 1 |
| Mélodie Benmouffek | melodie.benmouffek@ensimag.imag.fr | 2015-09-18 15:08:43.0 | 14 |
| Niklas Aronsson | niklas.aronsson@ericsson.com | 2016-05-02 11:16:12.0 | 1 |
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.
EventDrops is provided as an npm package. Grab it using the tool of your choice:
add event-drops
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.
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:
k href="https://unpkg.com/event-drops/dist/style.css" rel="stylesheet" />
ipt src="https://unpkg.com/d3"></script>
ipt src="https://unpkg.com/event-drops/dist/index.js"></script>
If you use a module bundler, you can import EventDrops the following way:
rt * as d3 from 'd3/build/d3';
rt eventDrops from 'event-drops';
t chart = eventDrops({ d3 });
t 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') }, /* ... */] }
elect('#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.
eventDrops function takes as a single argument a configuration object, detailed in the:
In addition to this configuration object, it also exposes some public methods allowing you to customize your application based on filtered data:
.scale().domain(),data and fullData keys containing respectively bounds filtered data and full dataset.d3.scaleTime scaleHence, if you want to display number of displayed data and time bounds as in the demo, you can use the following code:
t 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]);
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:
clone git@github.com:marmelab/EventDrops.git
ventDrops
install
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:
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.
EventDrops is released under the MIT License, courtesy of marmelab and Canal Plus. It means you can use this tool without any restrictions.