React Milestones Visualization

• NPM: https://www.npmjs.com/package/react-milestones-vis
• Github: https://github.com/walterra/react-milestones-vis
• Storybook demos: https://walterra.github.io/react-milestones-vis

1import { Milestones } from 'react-milestones-vis';
2
3export const Vikings = () => <Milestones
4  aggregateBy="year"
5  data={[
6    {
7      title: 'Vikings begin attacks on England.',
8      year: 789
9    },
10    {
11      title: 'The Oseberg Viking longship buried',
12      year: 800
13    },
14    {
15      title: 'Vikings found Dublin in Ireland.',
16      year: 840
17    },
18    ...
19  ]}
20  mapping={{
21    text: 'title',
22    timestamp: 'year'
23  }}
24  parseTime="%Y"
25  optimize
26/>;

react-milestones-vis is based on the d3 based library d3-milestones: https://github.com/walterra/d3-milestones

Available Scripts

In the project directory, you can run:

yarn storybook

Runs storybook for development.
Open http://localhost:6006 to view it in the browser.

The page will reload if you make edits.
You will also see any lint errors in the console.

yarn test

Launches the test runner in the interactive watch mode.
See the section about running tests for more information.

yarn build

Builds the app for production to the build folder using rollup.