EventDrops - GitLite

KO | EN

gitlite — search

#javascript #python #typescript #golang #go #machine-learning #deep-learning #linux #macos #nodejs #windows #kubernetes #vue #security

EventDrops

(★ 1,252)

A time based / event series interactive visualization using d3.js

파일 탐색기

최종 버전 다운로드 (.zip)

- ISSUE_TEMPLATE.md
- - updateData.js
- data.json
- demo.css
- demo.js
- index.html
- md5.js
- utils.js
- configuration.md
- - drop.js
  - indicator.js
  - zoom.js
- axis.js
- axis.spec.js
- bounds.js
- bounds.spec.js
- breakpoint.js
- breakpoint.spec.js
- config.js
- drop.js
- drop.spec.js
- dropLine.js
- dropLine.spec.js
- index.js
- index.spec.js
- indicator.js
- indicator.spec.js
- isAfter.js
- isAfter.spec.js
- isBefore.js
- isBefore.spec.js
- metaballs.js
- metaballs.spec.js
- style.css
- withinRange.js
- withinRange.spec.js
- zoom.js
- zoom.spec.js
.babelrc
.eslintrc
.gitignore
.npmignore
.prettierrc
.travis.yml
bundle.map.json
CHANGELOG.md
jest.config.js
LICENSE
Makefile
MIGRATION-1.0.md
package-lock.json
package.json
README.md
rollup.config.js
testSetup.js
webpack.demo.js
yarn.lock

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# EventDrops

EventDrops is a time based / event series interactive visualization tool powered by D3.js.

![EventDrops example](https://cloud.githubusercontent.com/assets/688373/18343222/c0a897b2-75b2-11e6-96df-e72e4b02335a.gif)

If you want to pan and zoom on previous data on your own, here is the [demo](http://marmelab.com/EventDrops/).

## 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](https://semver.org/). Hence, we recommend checking your `package.json` file and ensure that `event-drops` version is preceded by a carret:

```js
{
    "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](https://unpkg.com/event-drops). Grabbing last versions of the library is as simple as:

```xml
<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:

```js
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:

**[Configuration Reference](./docs/configuration.md)**

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 `data` and `fullData` keys containing respectively bounds filtered data and full dataset.
*   **draw(config, scale)** redraws chart using given configuration and `d3.scaleTime` scale
*   **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](./docs/configuration.md#breakpoints).

Hence, if you want to display number of displayed data and time bounds as in the [demo](https://marmelab.com/EventDrops/), you can use the following code:

```js
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:

```sh
git clone git@github.com:marmelab/EventDrops.git
cd EventDrops
make install
make run
```

Demo will then be available on [http://localhost:8080](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:

```sh
make test
```

Finally, if everything is fine, you can then create a pull request.

Feel free to ask some help on [GitHub issue tracker](https://github.com/marmelab/EventDrops/issues). The core team would be glad to help you to contribute.

## License

EventDrops is released under the MIT License, courtesy of [marmelab](http://marmelab.com) and [Canal Plus](https://github.com/canalplus). It means you can use this tool without any restrictions.