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

import { Milestones } from 'react-milestones-vis';

export const Vikings = () => <Milestones
  aggregateBy="year"
  data={[
    {
      title: 'Vikings begin attacks on England.',
      year: 789
    },
    {
      title: 'The Oseberg Viking longship buried',
      year: 800
    },
    {
      title: 'Vikings found Dublin in Ireland.',
      year: 840
    },
    ...
  ]}
  mapping={{
    text: 'title',
    timestamp: 'year'
  }}
  parseTime="%Y"
  optimize
/>;

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.