New Powerful Machines

    event-drops

    1.3.0 • Public • Published

    EventDrops

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

    EventDrops example

    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:

    Configuration Reference

    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.

    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.

    Keywords

    none

    Install

    npm i event-drops

    DownloadsWeekly Downloads

    474

    Version

    1.3.0

    License

    MIT

    Unpacked Size

    328 kB

    Total Files

    8

    Last publish

    Collaborators

    • fzaninotto
    • jpetitcolas
    • thiery
    • zaninottof