{"id":13439106,"url":"https://github.com/marmelab/EventDrops","last_synced_at":"2025-03-20T07:31:59.680Z","repository":{"id":20805723,"uuid":"24091171","full_name":"marmelab/EventDrops","owner":"marmelab","description":"A time based / event series interactive visualization using d3.js","archived":false,"fork":false,"pushed_at":"2024-08-19T15:26:06.000Z","size":3368,"stargazers_count":1242,"open_issues_count":35,"forks_count":238,"subscribers_count":52,"default_branch":"master","last_synced_at":"2024-10-19T20:56:33.568Z","etag":null,"topics":["d3","dataviz"],"latest_commit_sha":null,"homepage":"http://marmelab.com/EventDrops/","language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/marmelab.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":null,"license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2014-09-16T08:14:58.000Z","updated_at":"2024-10-13T20:59:30.000Z","dependencies_parsed_at":"2022-07-07T15:58:42.813Z","dependency_job_id":"ca98c4a0-e56c-435c-a30d-c2f9ca7cd98a","html_url":"https://github.com/marmelab/EventDrops","commit_stats":{"total_commits":418,"total_committers":32,"mean_commits":13.0625,"dds":0.5047846889952153,"last_synced_commit":"5181a5ed50e7817b00c0fd9e2f9992b7e9492400"},"previous_names":[],"tags_count":13,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2FEventDrops","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2FEventDrops/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2FEventDrops/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/marmelab%2FEventDrops/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/marmelab","download_url":"https://codeload.github.com/marmelab/EventDrops/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":221739656,"owners_count":16872767,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["d3","dataviz"],"created_at":"2024-07-31T03:01:11.185Z","updated_at":"2024-10-27T22:30:19.282Z","avatar_url":"https://github.com/marmelab.png","language":"JavaScript","readme":"# EventDrops\n\nEventDrops is a time based / event series interactive visualization tool powered by D3.js.\n\n![EventDrops example](https://cloud.githubusercontent.com/assets/688373/18343222/c0a897b2-75b2-11e6-96df-e72e4b02335a.gif)\n\nIf you want to pan and zoom on previous data on your own, here is the [demo](http://marmelab.com/EventDrops/).\n\n## Installation\n\nEventDrops is provided as an `npm` package. Grab it using the tool of your choice:\n\n```\nyarn add event-drops\nnpm install --save event-drops\n```\n\nNote you don't need this step if you don't use any module bundler.\n\nSince 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:\n\n```js\n{\n    \"event-drops\": \"^1.0.0\"\n}\n```\n\nThis way, you'll get all bug fixes and non breaking new features.\n\n## Usage\n\n### Without a Module Bundler\n\nIf 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:\n\n```xml\n\u003clink href=\"https://unpkg.com/event-drops/dist/style.css\" rel=\"stylesheet\" /\u003e\n\n\u003cscript src=\"https://unpkg.com/d3\"\u003e\u003c/script\u003e\n\u003cscript src=\"https://unpkg.com/event-drops\"\u003e\u003c/script\u003e\n```\n\nThen, the code is similar to the one with module bundler (see next paragraph), except you are not forced to specify D3 configuration parameter.\n\n### With a Module Bundler\n\nIf you use a module bundler, you can import EventDrops the following way:\n\n```js\nimport * as d3 from 'd3/build/d3';\n\nimport eventDrops from 'event-drops';\n\nconst chart = eventDrops({ d3 });\n\nconst repositoriesData = [\n    {\n        name: 'admin-on-rest',\n        data: [{ date: new Date('2014/09/15 14:21:31') } /* ... */],\n    },\n    {\n        name: 'event-drops',\n        data: [{ date: new Date('2014/09/15 13:24:57') } /* ... */],\n    },\n    {\n        name: 'sedy',\n        data: [{ date: new Date('2014/09/15 13:25:12') } /* ... */],\n    },\n];\n\nd3\n    .select('#eventdrops-demo')\n    .data([repositoriesData])\n    .call(chart);\n```\n\nYou 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`.\n\n## Interface\n\n`eventDrops` function takes as a single argument a configuration object, detailed in the:\n\n**[Configuration Reference](./docs/configuration.md)**\n\nIn addition to this configuration object, it also exposes some public members allowing you to customize your application based on filtered data:\n\n*   **scale()** provides the horizontal scale, allowing you to retrieve bounding dates thanks to `.scale().domain()`,\n*   **filteredData()** returns an object with both `data` and `fullData` keys containing respectively bounds filtered data and full dataset.\n*   **draw(config, scale)** redraws chart using given configuration and `d3.scaleTime` scale\n*   **destroy()** execute this function before to removing the chart from DOM. It prevents some memory leaks due to event listeners.\n*   **currentBreakpointLabel** returns current breakpoint (for instance `small`) among a [list of breakpoints](./docs/configuration.md#breakpoints).\n\nHence, 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:\n\n```js\nconst updateCommitsInformation = chart =\u003e {\n    const filteredData = chart\n        .filteredData()\n        .reduce((total, repo) =\u003e total.concat(repo.data), []);\n\n    numberCommitsContainer.textContent = filteredData.length;\n    zoomStart.textContent = humanizeDate(chart.scale().domain()[0]);\n    zoomEnd.textContent = humanizeDate(chart.scale().domain()[1]);\n};\n```\n\n## Contributing\n\nIf you want to contribute to EventDrops, first, thank you!\n\nTo launch the project locally, grab this repository, install its dependencies, and launch the demo:\n\n```sh\ngit clone git@github.com:marmelab/EventDrops.git\ncd EventDrops\nmake install\nmake run\n```\n\nDemo will then be available on [http://localhost:8080](http://localhost:8080). Source files are watched automatically. Changing one file would automagically reload your browser.\n\nWhen you are satisfied with your changes, ensure you didn't break anything launching tests:\n\n```sh\nmake test\n```\n\nFinally, if everything is fine, you can then create a pull request.\n\nFeel 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.\n\n## License\n\nEventDrops 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.\n","funding_links":[],"categories":["JavaScript","Charts","others"],"sub_categories":[],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarmelab%2FEventDrops","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fmarmelab%2FEventDrops","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fmarmelab%2FEventDrops/lists"}