Showing preview only (1,473K chars total). Download the full file or copy to clipboard to get everything.
Repository: uber/react-vis
Branch: master
Commit: 92e2af2eac82
Files: 393
Total size: 1.3 MB
Directory structure:
gitextract_5pxsgs97/
├── .editorconfig
├── .eslintrc
├── .gitattributes
├── .gitignore
├── .prettierrc
├── .stylelintrc
├── .travis.yml
├── CHANGELOG.md
├── CODE_OF_CONDUCT.md
├── CONTRIBUTING.md
├── DEPRECATED.md
├── LICENSE
├── README.md
├── ROADMAP.md
├── babel.config.json
├── docs/
│ ├── animation.md
│ ├── arc-series.md
│ ├── area-series.md
│ ├── axes.md
│ ├── bar-series.md
│ ├── borders.md
│ ├── chart-label.md
│ ├── clip.md
│ ├── colors.md
│ ├── contour-series.md
│ ├── crosshair.md
│ ├── custom-svg-series.md
│ ├── decorative-axis.md
│ ├── examples/
│ │ ├── building-things-other-than-charts.md
│ │ ├── extensibility.md
│ │ ├── iris-dashboard.md
│ │ ├── responsive-vis.md
│ │ ├── showcases/
│ │ │ ├── axes-showcase.md
│ │ │ ├── legends-showcase.md
│ │ │ ├── misc-showcase.md
│ │ │ ├── plots-showcase.md
│ │ │ ├── radar-chart-showcase.md
│ │ │ ├── radial-showcase.md
│ │ │ ├── sankeys-showcase.md
│ │ │ ├── sunburst-showcase.md
│ │ │ └── treemaps-showcase.md
│ │ └── stream-graph.md
│ ├── flexible-plots.md
│ ├── getting-started/
│ │ ├── getting-started.md
│ │ ├── installing-react-vis.md
│ │ ├── new-react-vis-project.md
│ │ ├── react-vis-in-codepen.md
│ │ └── your-first-chart.md
│ ├── gradients.md
│ ├── grids.md
│ ├── heatmap-series.md
│ ├── hexbin-series.md
│ ├── highlight.md
│ ├── hint.md
│ ├── interaction.md
│ ├── label-series.md
│ ├── legends.md
│ ├── line-mark-series.md
│ ├── line-series.md
│ ├── mark-series.md
│ ├── parallel-coordinates.md
│ ├── polygon-series.md
│ ├── presentation.md
│ ├── radar-chart.md
│ ├── radial-chart.md
│ ├── rect-series.md
│ ├── sankey.md
│ ├── scales-and-data.md
│ ├── series.md
│ ├── style.md
│ ├── sunburst.md
│ ├── treemap.md
│ ├── voronoi.md
│ ├── whisker-series.md
│ └── xy-plot.md
├── package.json
├── packages/
│ ├── react-vis/
│ │ ├── .babelrc.json
│ │ ├── build-browser.sh
│ │ ├── jest.config.js
│ │ ├── jest.setup.js
│ │ ├── jestBabelTransform.js
│ │ ├── package.json
│ │ ├── src/
│ │ │ ├── animation.js
│ │ │ ├── index.js
│ │ │ ├── legends/
│ │ │ │ ├── continuous-color-legend.js
│ │ │ │ ├── continuous-size-legend.js
│ │ │ │ ├── discrete-color-legend-item.js
│ │ │ │ ├── discrete-color-legend.js
│ │ │ │ └── searchable-discrete-color-legend.js
│ │ │ ├── main.scss
│ │ │ ├── make-vis-flexible.js
│ │ │ ├── parallel-coordinates/
│ │ │ │ └── index.js
│ │ │ ├── plot/
│ │ │ │ ├── axis/
│ │ │ │ │ ├── axis-line.js
│ │ │ │ │ ├── axis-ticks.js
│ │ │ │ │ ├── axis-title.js
│ │ │ │ │ ├── axis.js
│ │ │ │ │ ├── decorative-axis-ticks.js
│ │ │ │ │ ├── decorative-axis.js
│ │ │ │ │ ├── x-axis.js
│ │ │ │ │ └── y-axis.js
│ │ │ │ ├── borders.js
│ │ │ │ ├── chart-label.js
│ │ │ │ ├── circular-grid-lines.js
│ │ │ │ ├── content-clip-path.js
│ │ │ │ ├── crosshair.js
│ │ │ │ ├── gradient-defs.js
│ │ │ │ ├── grid-lines.js
│ │ │ │ ├── highlight.js
│ │ │ │ ├── hint.js
│ │ │ │ ├── horizontal-grid-lines.js
│ │ │ │ ├── series/
│ │ │ │ │ ├── abstract-series.js
│ │ │ │ │ ├── arc-series.js
│ │ │ │ │ ├── area-series.js
│ │ │ │ │ ├── bar-series-canvas.js
│ │ │ │ │ ├── bar-series.js
│ │ │ │ │ ├── canvas-wrapper.js
│ │ │ │ │ ├── contour-series.js
│ │ │ │ │ ├── custom-svg-series.js
│ │ │ │ │ ├── heatmap-series.js
│ │ │ │ │ ├── hexbin-series.js
│ │ │ │ │ ├── horizontal-bar-series-canvas.js
│ │ │ │ │ ├── horizontal-bar-series.js
│ │ │ │ │ ├── horizontal-rect-series-canvas.js
│ │ │ │ │ ├── horizontal-rect-series.js
│ │ │ │ │ ├── label-series.js
│ │ │ │ │ ├── line-mark-series-canvas.js
│ │ │ │ │ ├── line-mark-series.js
│ │ │ │ │ ├── line-series-canvas.js
│ │ │ │ │ ├── line-series.js
│ │ │ │ │ ├── mark-series-canvas.js
│ │ │ │ │ ├── mark-series.js
│ │ │ │ │ ├── polygon-series.js
│ │ │ │ │ ├── rect-series-canvas.js
│ │ │ │ │ ├── rect-series.js
│ │ │ │ │ ├── vertical-bar-series-canvas.js
│ │ │ │ │ ├── vertical-bar-series.js
│ │ │ │ │ ├── vertical-rect-series-canvas.js
│ │ │ │ │ ├── vertical-rect-series.js
│ │ │ │ │ └── whisker-series.js
│ │ │ │ ├── vertical-grid-lines.js
│ │ │ │ ├── voronoi.js
│ │ │ │ └── xy-plot.js
│ │ │ ├── radar-chart/
│ │ │ │ └── index.js
│ │ │ ├── radial-chart/
│ │ │ │ └── index.js
│ │ │ ├── sankey/
│ │ │ │ ├── index.js
│ │ │ │ └── sankey-link.js
│ │ │ ├── styles/
│ │ │ │ ├── examples.scss
│ │ │ │ ├── legends.scss
│ │ │ │ ├── plot.scss
│ │ │ │ ├── radial-chart.scss
│ │ │ │ └── treemap.scss
│ │ │ ├── sunburst/
│ │ │ │ └── index.js
│ │ │ ├── theme.js
│ │ │ ├── treemap/
│ │ │ │ ├── index.js
│ │ │ │ ├── treemap-dom.js
│ │ │ │ ├── treemap-leaf.js
│ │ │ │ └── treemap-svg.js
│ │ │ └── utils/
│ │ │ ├── axis-utils.js
│ │ │ ├── chart-utils.js
│ │ │ ├── data-utils.js
│ │ │ ├── react-utils.js
│ │ │ ├── scales-utils.js
│ │ │ ├── series-utils.js
│ │ │ └── styling-utils.js
│ │ └── tests/
│ │ ├── .eslintrc
│ │ ├── components/
│ │ │ ├── animation.test.js
│ │ │ ├── arc-series.test.js
│ │ │ ├── area-series.test.js
│ │ │ ├── axes.test.js
│ │ │ ├── axis-tick-format.test.js
│ │ │ ├── axis-title.test.js
│ │ │ ├── bar-series.test.js
│ │ │ ├── borders.test.js
│ │ │ ├── canvas-component.test.js
│ │ │ ├── circular-grid-lines.test.js
│ │ │ ├── color-article.test.js
│ │ │ ├── contour-series.test.js
│ │ │ ├── crosshair.test.js
│ │ │ ├── custom-svg-series.test.js
│ │ │ ├── data-article.test.js
│ │ │ ├── decorative-axis.test.js
│ │ │ ├── gradient.test.js
│ │ │ ├── grid-lines.test.js
│ │ │ ├── heatmap.test.js
│ │ │ ├── hexbin-series.test.js
│ │ │ ├── highlight.test.js
│ │ │ ├── hints.test.js
│ │ │ ├── interaction-article.test.js
│ │ │ ├── label-series.test.js
│ │ │ ├── legends.test.js
│ │ │ ├── line-series-canvas.test.js
│ │ │ ├── line-series.test.js
│ │ │ ├── make-vis-flexible.test.js
│ │ │ ├── mark-series.test.js
│ │ │ ├── parallel-coordinates.test.js
│ │ │ ├── polygon-series.test.js
│ │ │ ├── radar-chart.test.js
│ │ │ ├── radial.test.js
│ │ │ ├── rect-series.test.js
│ │ │ ├── sankey.test.js
│ │ │ ├── sunburst.test.js
│ │ │ ├── treemap.test.js
│ │ │ ├── voronoi.test.js
│ │ │ ├── whisker-series.test.js
│ │ │ └── xy-plot.test.js
│ │ ├── components.js
│ │ ├── index.js
│ │ ├── jsconfig.json
│ │ ├── plot/
│ │ │ ├── __snapshots__/
│ │ │ │ └── content-clip-path.test.js.snap
│ │ │ └── content-clip-path.test.js
│ │ ├── setup.js
│ │ ├── test-utils.js
│ │ └── utils/
│ │ ├── axis-utils.test.js
│ │ ├── chart-utils.test.js
│ │ ├── data-utils.test.js
│ │ ├── react-utils.test.js
│ │ ├── scales-utils.test.js
│ │ ├── series-utils.test.js
│ │ └── styling-utils.test.js
│ ├── showcase/
│ │ ├── .babelrc.json
│ │ ├── app.js
│ │ ├── axes/
│ │ │ ├── axis-on-0.js
│ │ │ ├── custom-axes-orientation.js
│ │ │ ├── custom-axes.js
│ │ │ ├── custom-axis-tick-element.js
│ │ │ ├── custom-axis-tick-format.js
│ │ │ ├── custom-axis.js
│ │ │ ├── decorative-axes-criss-cross.js
│ │ │ ├── dynamic-complex-edge-hints.js
│ │ │ ├── dynamic-crosshair-scatterplot.js
│ │ │ ├── dynamic-crosshair.js
│ │ │ ├── dynamic-hints.js
│ │ │ ├── dynamic-programmatic-rightedge-hints.js
│ │ │ ├── dynamic-simple-edge-hints.js
│ │ │ ├── dynamic-simple-topedge-hints.js
│ │ │ ├── empty-chart.js
│ │ │ ├── padded-axis.js
│ │ │ ├── parallel-coordinates-example.js
│ │ │ ├── static-crosshair.js
│ │ │ └── static-hints.js
│ │ ├── color/
│ │ │ ├── line-chart-many-colors.js
│ │ │ └── mini-color-examples.js
│ │ ├── data/
│ │ │ └── mini-data-examples.js
│ │ ├── datasets/
│ │ │ ├── car-data.json
│ │ │ ├── d3-flare-example.json
│ │ │ ├── energy.json
│ │ │ ├── iris.json
│ │ │ └── old-faithful.json
│ │ ├── examples/
│ │ │ ├── candlestick/
│ │ │ │ ├── candlestick-example.js
│ │ │ │ ├── candlestick.js
│ │ │ │ └── candlestick.scss
│ │ │ ├── force-directed-graph/
│ │ │ │ ├── force-directed-example.js
│ │ │ │ ├── force-directed-graph.js
│ │ │ │ ├── force-directed.scss
│ │ │ │ └── les-mis-data.json
│ │ │ ├── iris-dashboard/
│ │ │ │ ├── iris-dashboard.js
│ │ │ │ └── iris-dashboard.scss
│ │ │ ├── responsive-vis/
│ │ │ │ ├── responsive-bar-chart.js
│ │ │ │ ├── responsive-scatterplot.js
│ │ │ │ ├── responsive-vis-example.js
│ │ │ │ ├── responsive-vis-utils.js
│ │ │ │ └── responsive-vis.scss
│ │ │ └── streamgraph/
│ │ │ ├── streamgraph-example.js
│ │ │ └── streamgraph-example.scss
│ │ ├── flexible/
│ │ │ └── flexible-examples.js
│ │ ├── index.html
│ │ ├── index.js
│ │ ├── interaction/
│ │ │ └── interaction-examples.js
│ │ ├── legends/
│ │ │ ├── continuous-color.js
│ │ │ ├── continuous-size.js
│ │ │ ├── horizontal-discrete-color.js
│ │ │ ├── horizontal-discrete-custom-palette.js
│ │ │ ├── searchable-discrete-color-hover.js
│ │ │ ├── searchable-discrete-color.js
│ │ │ └── vertical-discrete-color.js
│ │ ├── misc/
│ │ │ ├── 2d-dragable-plot.js
│ │ │ ├── animation-example.js
│ │ │ ├── clip-example.js
│ │ │ ├── dragable-chart-example.js
│ │ │ ├── gradient-example.js
│ │ │ ├── label-series-example.js
│ │ │ ├── null-data-example.js
│ │ │ ├── selection-plot-example.js
│ │ │ ├── synced-charts.js
│ │ │ ├── time-chart.js
│ │ │ ├── triangle-example.js
│ │ │ ├── voronoi-line-chart.js
│ │ │ └── zoomable-chart-example.js
│ │ ├── package.json
│ │ ├── parallel-coordinates/
│ │ │ ├── animated-parallel-coordinates.js
│ │ │ ├── basic-parallel-coordinates.js
│ │ │ └── brushed-parallel-coordinates.js
│ │ ├── plot/
│ │ │ ├── area-chart-elevated.js
│ │ │ ├── area-chart.js
│ │ │ ├── axis-with-turned-labels.js
│ │ │ ├── bar-chart.js
│ │ │ ├── big-base-bar-chart.js
│ │ │ ├── clustered-stacked-bar-chart.js
│ │ │ ├── complex-chart.js
│ │ │ ├── contour-series-example.js
│ │ │ ├── custom-scales.js
│ │ │ ├── custom-svg-all-the-marks.js
│ │ │ ├── custom-svg-example.js
│ │ │ ├── custom-svg-root-level.js
│ │ │ ├── difference-chart.js
│ │ │ ├── faux-radial-scatterplot.js
│ │ │ ├── grid.js
│ │ │ ├── heatmap-chart.js
│ │ │ ├── hex-heatmap.js
│ │ │ ├── hexbin-size-example.js
│ │ │ ├── histogram.js
│ │ │ ├── labeled-heatmap.js
│ │ │ ├── labeled-stacked-vertical-bar-chart.js
│ │ │ ├── line-chart-canvas.js
│ │ │ ├── line-chart-with-style.js
│ │ │ ├── line-chart.js
│ │ │ ├── line-series-canvas-nearest-xy-example.js
│ │ │ ├── linemark-chart.js
│ │ │ ├── mixed-stacked-chart.js
│ │ │ ├── scatterplot-canvas.js
│ │ │ ├── scatterplot.js
│ │ │ ├── stacked-histogram.js
│ │ │ ├── stacked-horizontal-bar-chart.js
│ │ │ ├── stacked-vertical-bar-chart.js
│ │ │ ├── whisker-chart.js
│ │ │ └── width-height-margin.js
│ │ ├── radar-chart/
│ │ │ ├── animated-radar-chart.js
│ │ │ ├── basic-radar-chart.js
│ │ │ ├── four-quadrant-radar-chart.js
│ │ │ ├── radar-chart-series-tooltips.js
│ │ │ └── radar-chart-with-tooltips.js
│ │ ├── radial-chart/
│ │ │ ├── arc-series-example.js
│ │ │ ├── custom-radius-radial-chart.js
│ │ │ ├── donut-chart.js
│ │ │ ├── gradient-pie.js
│ │ │ └── simple-radial-chart.js
│ │ ├── sankey/
│ │ │ ├── basic.js
│ │ │ ├── energy-sankey.js
│ │ │ ├── link-event.js
│ │ │ ├── link-hint.js
│ │ │ └── voronoi.js
│ │ ├── showcase-app.js
│ │ ├── showcase-components/
│ │ │ ├── showcase-button.js
│ │ │ ├── showcase-dropdown.js
│ │ │ ├── showcase-utils.js
│ │ │ └── source-linker.js
│ │ ├── showcase-index.js
│ │ ├── showcase-links.js
│ │ ├── showcase-sections/
│ │ │ ├── axes-showcase.js
│ │ │ ├── legends-showcase.js
│ │ │ ├── misc-showcase.js
│ │ │ ├── parallel-coordinates-showcase.js
│ │ │ ├── plots-showcase.js
│ │ │ ├── radar-showcase.js
│ │ │ ├── radial-showcase.js
│ │ │ ├── sankeys-showcase.js
│ │ │ ├── sunburst-showcase.js
│ │ │ └── treemap-showcase.js
│ │ ├── showcase-utils.js
│ │ ├── sunbursts/
│ │ │ ├── animated-sunburst.js
│ │ │ ├── basic-sunburst.js
│ │ │ ├── clock-example.js
│ │ │ └── sunburst-with-tooltips.js
│ │ ├── treemap/
│ │ │ ├── dynamic-treemap.js
│ │ │ └── simple-treemap.js
│ │ └── webpack.config.js
│ └── website/
│ ├── .storybook/
│ │ ├── addons.js
│ │ ├── config.js
│ │ └── storybook.css
│ ├── html.config.js
│ ├── package.json
│ ├── src/
│ │ ├── components/
│ │ │ └── Hero.js
│ │ ├── config.js
│ │ ├── demos.js
│ │ ├── mdRoutes.js
│ │ └── styles/
│ │ ├── _variables.scss
│ │ └── index.scss
│ ├── static/
│ │ └── .gitkeep
│ ├── storybook/
│ │ ├── areaseries-story.js
│ │ ├── axis-story.js
│ │ ├── barseries-story.js
│ │ ├── index.js
│ │ ├── legend-story.js
│ │ ├── lineseries-story.js
│ │ ├── markseries-story.js
│ │ ├── misc-story.js
│ │ ├── radial-story.js
│ │ ├── storybook-data.js
│ │ └── storybook-utils.js
│ └── webpack.config.js
├── publish-docs.sh
├── publish.sh
└── remove-refs-to-unpm.pl
================================================
FILE CONTENTS
================================================
================================================
FILE: .editorconfig
================================================
# EditorConfig: http://editorconfig.org
root = true
[*]
indent_style = space
indent_size = 2
end_of_line = lf
charset = utf-8
trim_trailing_whitespace = true
insert_final_newline = true
================================================
FILE: .eslintrc
================================================
{
"extends": [
"eslint:recommended",
"plugin:react/recommended",
"plugin:react-hooks/recommended",
"plugin:jest/recommended",
"prettier",
"prettier/react"
],
"parser": "babel-eslint",
"plugins": [
"react",
"react-hooks",
"prettier",
"babel",
"jest"
],
"ignorePatterns": [
"node_modules",
"bundle.js",
"**/dist/",
"**/es/"
],
"settings":{
"react":{
"version": "detect"
}
},
"env": {
"es6": true,
"browser": true,
"jest": true
},
"rules": {
"consistent-return": 0,
"max-len": [1, 110, 4],
"max-params": ["error", 6],
"object-curly-spacing": 0,
"babel/object-curly-spacing": 2,
"jest/require-top-level-describe":"error",
"react/prop-types": "off",
"prettier/prettier": "warn"
}
}
================================================
FILE: .gitattributes
================================================
yarn.lock -diff
================================================
FILE: .gitignore
================================================
node_modules/
.sass-cache/
.nyc_output/
coverage/
dist/
es/
npm-debug.log*
yarn-error.log*
.DS_Store
.idea/
public/
.vscode/
bundle.js
bundle.css
packages/showcase/app.css
/index.html
================================================
FILE: .prettierrc
================================================
{
"singleQuote": true,
"trailingComma": "none",
"bracketSpacing": false,
"jsxBracketSameLine": false,
"semi": true,
"parser": "babel"
}
================================================
FILE: .stylelintrc
================================================
{
"extends": "stylelint-config-standard",
"rules": {
"selector-list-comma-newline-after": "always"
}
}
================================================
FILE: .travis.yml
================================================
language: node_js
node_js:
- '10'
script:
- npm run lint
- cd packages/react-vis
- npm run cover
after_success:
- npm install -g coveralls
- cat coverage/lcov.info | coveralls
================================================
FILE: CHANGELOG.md
================================================
## v1.12.0
- Upgraded all d3 dependencies
- The layout of Sankey and Contour chart are changed due to the d3 upgrade
- Build fixes
- Revert #1358 (note that this PR was not included in 1.11.7)
---
## v1.9.2
- we removed the check-stylesheets warnings.
- it's now possible to pass better styling options for radial charts labels. It's also possible to position axis titles along the axis.
- react-motion and react minimal versions have been updated.
## v1.0.0 Breaking changes
We recently made a major jump to version v1, which naturally includes some breaking changes. Specifically these include
*Table is deprecated*: There are other substantially better tables in the ecosystem, so we decided to stick to what we do best, charts and plots.
*Stylesheet has been moved*: the stylesheet for react-vis can now be found within the dist folder, so simply modify your style import to be:
```
@import './node_modules/react-vis/dist/main';
```
*Default Opacity*: The default opacity behavior has been modified. Previously, react-vis asserted you had a linear scale with range [0.1, 1] and place your value within that range. Now react-vis presents a literal-scale by default. Check your opacities to make sure they are correct.
*tickSizeInner & tickSizeOuter have been reversed*: the names of these props on the axes component have been switched. We feel this arrangement offers a more natural way to interact with the plot.
*ALIGN.TOP_RIGHT was removed from hint.js*: this case did not match the orientation scheme followed by this component so was removed.
### v0.10.1
In this release we release a new chart type, a large repo refactor, address a variety of bugs, and a host of additional features!
- **New Chart**: Type: Sankey Diagram: this chart type allows users visualize data flows and transfers. We are initially releasing this chart in alpha, so that we can gather feedback, and iterate to make the best chart that we can! Check out the docs here here!
- **Bug Fix**: Fix numerous bugs on the radial plot, including mouse interaction issues, incorrect domains, and props falling out of sync
- **Refactor**: We reorganized the way that we are keeping/organizing our repo, installed yarn, added webpack for the examples. (Pro tip, if you are having trouble running the examples after upgrading rm -rf your dist)
- **Feature**: Allow custom crosshair orientation
- **Feature**: Added interaction listeners for the tree map
### v0.9.0
This release addresses a couple of bugs and improves our dep tree. The only psuedo-breaking change is to the layout of radial plot. The way that it now works is that the pie is centered within the given width/height and then allowed to grow to an innerWidth/innerHeight that is computed from the margins and the width/height.
- Bug: Modify margin system for radial chart
- Improvement: Support for classname on legends
- Chore: Remove duplicated styles
- Bug: Add default props to classname for axis
- Chore: Update deps, fix lint errors
### v0.8.0
This release adds two new props (and set of illustrative examples) to Hint component: ```align``` and ```getAlignStyle```. ```align``` (replacing ```orientation``` prop) is an object with two props — ```horizontal``` and ```vertical``` — and set of values that support existing and new hint placement:
a) around a data point in one of four quadrants (imagine the point bisected by two axes — vertical, horizontal — creating 4 quadrants around a data point).
b) **New**: pin to an edge of chart/plot area and position along that edge using data point's other dimension value.
Developers wanting total control can use the ```getAlignStyle(align, x, y)``` function that returns an inline style object with one or more of the following props (```left, right, top, bottom```).
The ```orientation``` prop is supported for backwards compatibility but will be deprecated in future release.
See the following figure explaining the two props (```horizontal, vertical```) for the ```align``` prop object.
### v0.7.0
This release adds a new series: rectSeries. Rect series operates similarly to barSeries: they consist of a series of rectangles of various size that be stacked, but with one key difference. Where the bar series operates on the assumption of an ordinal axis, rect series operates on an assumption of a continuous one. This allows users to specify the positions of the edges of their rectangles!
Rect series are great for histograms, as they allow you to exactly specify the bounds of buckets. They can be accessed via VerticalRectSeries and HorizontalRectSeries. Check out the examples for more details. This is non breaking change, and can be dropped in immediately.
### v0.6.8
- Feature: Export Abstract series and the rest of the functions in scale utils.
- Feature: Add specific class names to x and y axes
### v0.6.6
- Improvement: added line smoothing via d3-shape curve functions ([#185](https://github.com/uber/react-vis/pull/185)).
- Improvement: Expose GridLines, AxisLines, and ScaleUtils to export
- Improvement: Add className prop to all series
- Documentation: Expand tree map example
- Documentation: Add elevated area chart example
### 0.6.4
- Bugfix: Fixed the issue with numeric titles in legends ([#154](https://github.com/uber/react-vis/pull/154)).
### 0.6.3
- Bugfix: fix the broken event listeners for radial charts ([#150](https://github.com/uber/react-vis/issues/150));
- Bugfix: compatibility fix: do not treat `null` and `undefined` in scale props as existing values ([#149](https://github.com/uber/react-vis/issues/149)).
### 0.6.2
* Feature: added a new `tickLabelAngle` property that rotates the tick label ([see the documentation](docs/xy-plot.md#ticklabelangle-optional) for details).
* Improvement: added a little bit of examples for the axes.
* Bugfix: fixed misplaced axis title when orientation is set to `'top'` or `'right'` ([#146](https://github.com/uber/react-vis/issues/146)).
### 0.6.1
* Bugfix: axis is misplaced when `orientation` is set to `'right'`([#143](https://github.com/uber/react-vis/issues/143)).
### 0.6
#### TL;DR
New legends (sic!), new animations, faster rendering of components, no d3 in actual rendering process, new examples and more.
#### Breaking changes
* `animation` property works differently: duration is removed in favor of stiffness, damping and precision. Please refer to the documentation for the latest changes.
* `undefined` and `null` values of important scale-related attributes for domains and ranges are now treated as real values (and not ignored anymore).
#### Non-breaking changes
* Feature: added the first version of legends (discrete and continuous color legends, continuous size legend). Please refer to the [docs for legends](docs/legends.md) for more details.
* Improvement: got rid of assigning properties with d3 after rendering, currently all attributes and event listeners are attached using React (and it is faster).
* Improvement: eliminated the use of `d3-selection` and `d3-transition` modules and made the source code smaller.
* Improvement: added some structure into the examples and simplified their source code ([check them out](http://uber.github.com/react-vis)).
* Bugfix: fixed crashing on animation (#114).
* Improvement: `onNearestX` event now returns the index of the selected data point as an attribute (more details [here](docs/xy-plot.md#onnearestx-optional))
* Bugfix: added the donut chart to the list of examples ([#83](https://github.com/uber/react-vis/issues/83)).
* Bugfix: fixed failing bar charts when the number of segments was changed ([#55](https://github.com/uber/react-vis/issues/55)).
### 0.5
#### TL;DR
Upgraded to modular d3, compiled code became smaller, changed the API for axes and grids, fixed several bugs.
#### Breaking changes
* d3-axis is no longer used, the rendering of axes and grids is made by react (and works faster).
* The API of axes (`XAxis` and `YAxis`) was significantly changed:
* [the API of axes](docs/xy-plot.md#axes) is now (almost) compatible to the API of 'd3-axis'.
* `labelFormat` and `labelValues` attributes for the axes are **removed**: similar results can be done achieved when `tickFormat` and `tickValues` attributes are used (see the [the updated documentation for axes](docs/xy-plot.md#axes) for more details).
* `tickFormat` function is now gets only **one (value) argument instead of two (value and index)**.
* The API of grids (`VerticalGridLines` and `HorizontalGridLines`) was significantly changed: it partially replicates the API of the axes. Please refer to [the updated documentation ](docs/xy-plot.md#grids) for more detail.
#### Non-breaking changes
* Bugfix: `margin` for the radial and ortogonal chart is now able to receive partial objects (e. g.`<XYPlot margin={{left: 20}}>` instead of margins for each side) and numbers (e.g. `<XYPlot margin={20}>`)
* Bugfix: `makeVisFlexible` doesn't fail anymore (see [#118](https://github.com/uber-common/react-vis/issues/118)).
* Minor bugfixes and improvements.
Please find [full change log here](https://github.com/uber/react-vis/releases).
================================================
FILE: CODE_OF_CONDUCT.md
================================================
# Contributor Covenant Code of Conduct
## Our Pledge
In the interest of fostering an open and welcoming environment, we as
contributors and maintainers pledge to making participation in our project and
our community a harassment-free experience for everyone, regardless of age,
body size, disability, ethnicity, gender identity and expression, level of
experience, nationality, personal appearance, race, religion, or sexual
identity and orientation.
## Our Standards
Examples of behavior that contributes to creating a positive environment
include:
* Using welcoming and inclusive language
* Being respectful of differing viewpoints and experiences
* Gracefully accepting constructive criticism
* Focusing on what is best for the community
* Showing empathy towards other community members
Examples of unacceptable behavior by participants include:
* The use of sexualized language or imagery and unwelcome sexual attention or
advances
* Trolling, insulting/derogatory comments, and personal or political attacks
* Public or private harassment
* Publishing others' private information, such as a physical or electronic
address, without explicit permission
* Other conduct which could reasonably be considered inappropriate in a
professional setting
## Our Responsibilities
Project maintainers are responsible for clarifying the standards of acceptable
behavior and are expected to take appropriate and fair corrective action in
response to any instances of unacceptable behavior.
Project maintainers have the right and responsibility to remove, edit, or
reject comments, commits, code, wiki edits, issues, and other contributions
that are not aligned to this Code of Conduct, or to ban temporarily or
permanently any contributor for other behaviors that they deem inappropriate,
threatening, offensive, or harmful.
## Scope
This Code of Conduct applies both within project spaces and in public spaces
when an individual is representing the project or its community. Examples of
representing a project or community include using an official project email
address, posting via an official social media account, or acting as an
appointed representative at an online or offline event. Representation of a
project may be further defined and clarified by project maintainers.
## Enforcement
Instances of abusive, harassing, or otherwise unacceptable behavior may be
reported by contacting the project team at oss-conduct@uber.com. The project
team will review and investigate all complaints, and will respond in a way
that it deems appropriate to the circumstances. The project team is obligated
to maintain confidentiality with regard to the reporter of an incident.
Further details of specific enforcement policies may be posted separately.
Project maintainers who do not follow or enforce the Code of Conduct in good
faith may face temporary or permanent repercussions as determined by other
members of the project's leadership.
## Attribution
This Code of Conduct is adapted from the [Contributor Covenant][homepage],
version 1.4, available at
[http://contributor-covenant.org/version/1/4][version].
[homepage]: http://contributor-covenant.org
[version]: http://contributor-covenant.org/version/1/4/
================================================
FILE: CONTRIBUTING.md
================================================
# Want to contribute?
Great! That's why this is an open source project. We use this project in our infrastructure at Uber, and we hope that it's useful to others as well.
Before you get started, here are some suggestions:
- Check open issues for what you want.
- If there is an open issue, comment on it. Otherwise open an issue describing your bug or feature with use cases.
- Before undertaking a major change, please discuss this on the issue. We'd hate to see you spend a lot of time working on something that conflicts with other goals or requirements that might not be obvious.
- Write code to fix the problem, then open a pull request with tests and documentation.
- The pull requests gets reviewed and then merged assuming there are no problems.
- A new release version gets cut.
## Hints
Want to make sure your PR gets a speedy review and a quick merge? Here are some tips:
- Add Tests
- Add documentation about the feature you added
- Make sure you have a clear description of what your PR is about
- Include screenshots
- Add Tests
## Releases
Declaring formal releases requires peer review.
- A reviewer of a pull request should recommend a new version number (patch, minor or major).
- Once your change is merged feel free to bump the version as recommended by the reviewer.
- A new version number should not be cut without peer review unless done by the project maintainer.
### Cutting a new version
- Get your branch merged on master
- Run `npm version major` or `npm version minor` or `npm version patch`
- `git push origin master --tags`
- If you are a project owner, then `npm publish`
================================================
FILE: DEPRECATED.md
================================================
# Deprecated
Unfortunately, `react-vis` currently has no active maintainers. As such, we have
decided to deprecate the library. This deprecation means that `react-vis` won't
receive any patches or new features. If you're interested to take on ownership,
please discuss on #1303. Anyone is welcome to fork this library.
We're working on a new charting library that we'll introduce in 2020. We will
keep you folks updated on this repo on the new library!
================================================
FILE: LICENSE
================================================
Copyright (c) 2016 Uber Technologies, Inc.
Permission is hereby granted, free of charge, to any person obtaining a copy
of this software and associated documentation files (the "Software"), to deal
in the Software without restriction, including without limitation the rights
to use, copy, modify, merge, publish, distribute, sublicense, and/or sell
copies of the Software, and to permit persons to whom the Software is
furnished to do so, subject to the following conditions:
The above copyright notice and this permission notice shall be included in
all copies or substantial portions of the Software.
THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR
IMPLIED, INCLUDING BUT NOT LIMITED TO THE WARRANTIES OF MERCHANTABILITY,
FITNESS FOR A PARTICULAR PURPOSE AND NONINFRINGEMENT. IN NO EVENT SHALL THE
AUTHORS OR COPYRIGHT HOLDERS BE LIABLE FOR ANY CLAIM, DAMAGES OR OTHER
LIABILITY, WHETHER IN AN ACTION OF CONTRACT, TORT OR OTHERWISE, ARISING FROM,
OUT OF OR IN CONNECTION WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN
THE SOFTWARE.
================================================
FILE: README.md
================================================
<p align="right">
<a href="./DEPRECATED.md">
<img src="https://img.shields.io/maintenance/no/2020?style=flat-square" alt="deprecated" />
</a>
<a href="https://npmjs.org/package/react-vis">
<img src="https://img.shields.io/npm/v/react-vis.svg?style=flat-square" alt="version" />
</a>
<a href="https://travis-ci.org/uber/react-vis">
<img src="https://img.shields.io/travis/uber/react-vis/master.svg?style=flat-square" alt="build" />
</a>
<a href="https://coveralls.io/github/uber/react-vis">
<img src="https://img.shields.io/coveralls/uber/react-vis.svg?style=flat-square" alt="build" />
</a>
<a href="https://npmjs.org/package/react-vis">
<img src="https://img.shields.io/npm/dm/react-vis.svg?style=flat-square" alt="downloads" />
</a>
</p>
<h1 align="center">react-vis | <a href="http://uber.github.io/react-vis/examples/showcases/axes">Demos</a> | <a href="http://uber.github.io/react-vis/documentation/getting-started/creating-a-new-react-vis-project">Docs</a></h1>
<h5 align="center">A COMPOSABLE VISUALIZATION SYSTEM</h5>
> **_NOTE:_** This repository is now under new management. Please reach out to the new administrators if you have any questions.
## Overview
A collection of react components to render common data visualization charts, such as **line/area/bar charts**, **heat maps**, **scatterplots**, **contour plots**, **hexagon heatmaps**, **pie and donut charts**, **sunbursts**, **radar charts**, **parallel coordinates**, and **tree maps**.
Some notable features:
- Simplicity. `react-vis` doesn't require any deep knowledge of data visualization libraries to start building your first visualizations.
- Flexibility. `react-vis` provides a set of basic building blocks for different charts. For instance, separate X and Y axis components. This provides a high level of control of chart layout for applications that need it.
- Ease of use. The library provides a set of defaults which can be overridden by the custom user's settings.
- Integration with React. `react-vis` supports the React's lifecycle and doesn't create unnecessary nodes.
## Usage
Install react-vis via npm.
npm install react-vis --save
Include the built main CSS file in your HTML page or via SASS:
```scss
@import "~react-vis/dist/style";
```
You can also select only the styles you want to use. This helps minimize the size of the outputted CSS. Here's an example of importing only the legends styles:
```scss
@import "~react-vis/dist/styles/legends";
```
Import the necessary components from the library...
```jsx
import {XYPlot, XAxis, YAxis, HorizontalGridLines, LineSeries} from 'react-vis';
```
… and add the following code to your `render` function:
```jsx
<XYPlot
width={300}
height={300}>
<HorizontalGridLines />
<LineSeries
data={[
{x: 1, y: 10},
{x: 2, y: 5},
{x: 3, y: 15}
]}/>
<XAxis />
<YAxis />
</XYPlot>
```
If you're working in a non-node environment, you can also directly include the bundle and compiled style using basic html tags.
```html
<link rel="stylesheet" href="https://unpkg.com/react-vis/dist/style.css">
<script type="text/javascript" src="https://unpkg.com/react-vis/dist/dist.min.js"></script>
```
The global `reactVis` object will now be available for you to play around.
You can checkout these example CodePens:
[#1](https://codepen.io/Apercu/pen/mmLOpY?editors=0010),
[#2](https://codepen.io/jckr/pen/oWZPJe?editors=0010),
[#3](https://codepen.io/jckr/pen/BRpReQ?editors=0010) or
[#4](https://codepen.io/jckr/pen/aWmRGx?editors=0010)
## More information
Take a look at the [folder with examples](docs/examples) or check out some docs:
- Common concepts:
* [Scales and Data](docs/scales-and-data.md) about how the attributes can be adjusted.
* [Animations](docs/animation.md) about how to tweak animations in the library.
- Components:
* [XYPlot](docs/xy-plot.md) about orthogonal charts.
* [RadialChart](docs/radial-chart.md) about radial charts.
* [Treemap](docs/treemap.md) about making tree maps.
* [Sankey](docs/sankey.md) about making sankey diagrams.
* [Radar Chart](docs/radar-chart.md) about making radar charts.
* [Parallel Coordinates](docs/parallel-coordinates.md) about making parallel coordinate charts.
* [Sunbursts](docs/sunburst.md) about making sunburst diagrams.
* [Legends](docs/legends.md) about the legends.
## Development
Make sure you are using the correct version of `node` and `yarn`. To do so, check `package.json` and find the entry "volta", e.g.
```
"volta": {
"node": "14.18.0",
"yarn": "1.22.4"
}
```
It's recommanded to install [volta](https://volta.sh/) to manage node and yarn.
To develop on react-vis, navigate to `packages/react-vis`, and install the dependencies and then build and watch the static files:
yarn && yarn start
Once complete, you can view the component's example in your browser (will open automatically).
Any changes you make to the example code will run the compiler to build the files again.
To run the tests, and create code coverage reports:
yarn cover
## Requirements
react-vis makes use of ES6 array methods such as [`Array.prototype.find`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array/find). If you make use of react-vis, in an environment without these methods, you'll see errors like `TypeError: Server rendering error: Object x,y,radius,angle,color,fill,stroke,opacity,size has no method 'find'`. You can use [`babel-polyfill`](https://babeljs.io/docs/usage/polyfill/) to polyfill these methods.
================================================
FILE: ROADMAP.md
================================================
# Roadmap
This document will be updated with the middle-term ambition for React-vis.
## Current priority
Right now the priority is to get React-Vis healthy and bug free while addressing as many open issues as possible.
These efforts are essentially focused towards what we consider the core of react-vis: AbstractSeries, ArcSeries, AreaSeries, AxisUtils, ContinuousColorLegend, ContinuousSizeLegend, Crosshair, DiscreteColorLegend, GridLines, Hint, HorizontalBarSeries, HorizontalGridLines, LabelSeries, LineSeries, MarkSeries, RadialChart, ScaleUtils, SearchableDiscreteColorLegend, VerticalBarSeries, VerticalGridLines, XAxis, XYPlot and YAxis.
================================================
FILE: babel.config.json
================================================
{
"babelrcRoots": [
".",
"./packages/*"
],
"env": {
"production": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator"
]
},
"development": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator"
]
},
"es": {
"presets": [
[
"@babel/preset-env",
{
"modules": false
}
],
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator"
]
},
"browser": {
"presets": [
"@babel/preset-env",
"@babel/preset-react"
],
"plugins": [
"@babel/plugin-proposal-class-properties",
"@babel/plugin-proposal-export-default-from",
"@babel/plugin-proposal-optional-chaining",
"@babel/plugin-proposal-nullish-coalescing-operator",
["@babel/plugin-transform-runtime",
{
"regenerator": true
}
]
]
}
}
}
================================================
FILE: docs/animation.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Animation
Animation makes your charts feel physical, it makes them feel alive, shoot it makes them feel l33t. `react-vis` offers a simple portal into the [react-motion](https://github.com/chenglou/react-motion) animation system by exposing a simple animation prop on most components! This prop accepts three types of values:
*Booleans*: if true is present then `react-vis` will use the `no-wobble` preset (see below)
*Strings*: react-motion offers several different motion presets that cover most use cases. To access them set your animation prop to one of [noWobble, gentle, wobbly, stiff].
<!-- INJECT:"AnimationExampleWithLink" -->
*Objects*: react-motion expects an object formatting like `{damping: NUMBER, stiffness: NUMBER}`, and if you want to give us an object like that, we will hand it direct to react-motion. You can also pass an object with `{nonAnimatedProps: ['foo', 'bar']}` to prevent those props from being interpolated by d3-interpolator.
<!-- INJECT:"TreemapExampleWithLink" -->
The above example has `animation: {damping: 9, stiffness: 300}`!
**NOTE** In Jsx the presence of the animation prop is enough to trigger an animation, eg
```javascript
<MarkSeries
data={nodes}
animation
colorType={'category'}
stroke={'#ddd'}
strokeWidth={2}
colorRange={colors}
/>
```
Will be treated as true. If you want to include the animation prop but not have animation be engaged, you need to use animation={null}!
================================================
FILE: docs/arc-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## ArcSeries:
<!-- INJECT:"ArcSeriesExampleWithLink" -->
The arc series allows users to specify arbitrary arcs in the plane! This is useful for making pie charts, sunbursts, and anything else circular.
```javascript
<XYPlot
xDomain={[-5, 5]}
yDomain={[-5, 5]}
width={300}
height={300}>
<ArcSeries
animation
radiusType={'literal'}
center={{x: -2, y: 2}}
data={myData}
colorType={'literal'}/>
</XYPlot>
```
A key point: XYPlot infers the necessary x and y domains by converting the angular coordinates to cartesian. If you want to guarantee a centered plot it is advisable to set the x and y domain's yourself, as above.
## Data format Reference
Arc series works a little bit different than other series. The most natural language to describe arcs is using polar coordinates, so we allow
users to write just that:
```javascript
const myData = [
{angle0: 0, angle: Math.PI / 4, opacity: 0.2, radius: 2, radius0: 1},
{angle0: PI / 4, angle: 2 * PI / 4, radius: 3, radius0: 0},
{angle0: 2 * PI / 4, angle: 3 * PI / 4, radius: 2, radius0: 0},
{angle0: 3 * PI / 4, angle: 4 * PI / 4, radius: 2, radius0: 0},
{angle0: 4 * PI / 4, angle: 5 * PI / 4, radius: 2, radius0: 0},
{angle0: 0, angle: 5 * PI / 4, radius: 1.1, radius0: 0.8}
]
```
angle0 describes the start of the arc in radians, and angle describes the end of the arc, again in radians. radius0 describes the inner distance from the origin, while radius describes the outer distance to the origin. It is recommended to provide all four of these quantities to format your arcs well.
#### angle0
Type: `number`
The start position of the arc in radians. This quantity is returned literally by default.
#### angle
Type: `number`
The end position of the arc in radians. This quantity is returned literally by default.
#### radius0
Type: `number`
The distance between the origin and the inside of the arc. This values is scaled linearly by default
#### radius
Type: `number`
The distance between the origin and the outside of the arc. This values is scaled linearly by default
#### radiusDomain
Type: `array of numbers`
The domain over which the radius is scaled. This can be an essential element in getting your arcs to look right, the automatic inference for the prop tends to be somewhat inaccurate, so it is highly encourage that you set it for your self as appropriate. For example: [0, 3]. See the code for ArcSeriesExample for more.
#### color (optional)
Type: `string|number`
The color of an arc in the series. By default, the color is interpreted as number to be scaled to a color range. This can be over-ridden by providing the prop colorType="literal" to the series itself. This property can also be defined on the series level. See [colors](colors.md)
#### fill (optional)
Type: `string|number`
The inner color of an arc in the series. If `fill` and `color` are provided, `fill` will override `color`. By default, the color is interpreted as number to be scaled to a color range. This can be over-ridden by providing the prop fillType="literal" to the series itself. This property can also be defined on the series level. See [colors](colors.md)
#### stroke (optional)
Type: `string|number`
The outer color of an arc in the series (i.e. its outline). If `stroke` and `color` are provided, `stroke` will override `color`. By default, the color is interpreted as number to be scaled to a color range. This can be over-ridden by providing the prop strokeType="literal" to the series itself. This property can also be defined on the series level. See [colors](colors.md)
#### opacity (optional)
Type: `string|number`
Default: 1
The opacity of an arc in the series, from 0 (transparent) to 1 (opaque).
#### padAngle (optional)
Type: `number|function`
The padding to be applied between arcs.
<!-- INJECT:"ClockExampleWithLink" -->
## Series API Reference
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### center
Type: `Object` of the form `{x, y}`, where x and y are in coordinates
This allows users to specify the origin of their arcs.
#### color
Type: `string|number`
The color for all elements in the series, this property will be over-ridden by color specified in the data attribute.
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### data
Type: `Array<Object>`
Array of data for the series. See above data format reference.
#### fill
Type: `string|number`
The inner color for all elements in the series, this property will be over-ridden by color specified in the data attribute.
#### opacity
Type: `string|number`
The opacity for all elements in the series, this property will be over-ridden by color specified in the data attribute.
#### stroke
Type: `string|number`
The outer color for all elements in the series, this property will be over-ridden by color specified in the data attribute.
#### style (optional)
Type: `object`
SVG paths (which is what the arc series is made up of) have numerous manipulable properties, so rather than trying to prescribe all of them as props we offer a port to let you style it for yourself.
## Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onSeriesClick
Type: `function`
Default: none
This handler fires when the user clicks somewhere on a series, and provides the corresponding event. Unlike onClick, it doesn't pass a specific datapoint.
```jsx
<ArcSeries
...
onSeriesClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onSeriesMouseOut
Type: `function`
Default: none
This handler fires when the user's mouse cursor leaves a series, and provides the corresponding event. Unlike onValueMouseOut, it doesn't pass a specific datapoint.
```jsx
<ArcSeries
...
onSeriesMouseOut={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesMouseOver
Type: `function`
Default: none
This handler fires when the user mouses over a series, and provides the corresponding event. Unlike onValueMouseOver, it doesn't pass a specific datapoint.
```jsx
<ArcSeries
...
onSeriesMouseOver={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesRightClick
Type: `function`
Default: none
This handler fires when the user right-clicks somewhere on a series, and provides the corresponding event. Unlike onClick, it doesn't pass a specific datapoint.
```jsx
<ArcSeries
...
onSeriesRightClick={(event)=>{
// does something on right click
// you can access the value of the event
}}
```
#### onValueClick
Type: `function`
Default: none
This handler is triggered either when the user clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<ArcSeries
...
onValueClick={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOut
Type: `function`
Default: none
This handler is triggered either when the user's mouse leaves a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<ArcSeries
...
onValueMouseOut={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOver
Type: `function`
Default: none
This handler is triggered either when the user's mouse enters a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<ArcSeries
...
onValueMouseOver={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueRightClick
Type: `function`
Default: none
This handler is triggered either when the user right-clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<ArcSeries
...
onValueRightClick={(datapoint, event)=>{
// does something on right click
// you can access the value of the event
}}
```
================================================
FILE: docs/area-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
# AreaSeries
<!-- INJECT:"AreaChartWithLink" -->
In addition to the LineSeries, react-vis offers a similar chart type for area charts.
Like LineSeries, AreaSeries:
- are styled at the series level, not at the mark level.
- can have a curve property for a different interpolation between points.
Unlike LineSeries, AreaSeries:
- have a fill property. By default, the color property affects both the fill color and the outline color of the area charts. However, these two can be set independently,
- don't have an API to style the stroke beyond color. It's still possible to use the style property, though.
- can be stacked,
- do not have a canvas equivalent.
The stroke property of an AreaChart creates an outline around the whole shape of the chart (including to its left, right and bottom.) To create a chart that has a fill, no distinct lines to the left, right or bottom, but a different line style at the top, you may create an area chart with a line chart on top.
## Data format reference
#### x
Type: `number`
Left-to-right position of marks in the series.
#### y
Type: `number`
Top-to-bottom position of the top edge of the series.
#### y0
Type: `number`
Default: `0`
Top-to-bottom position of the bottom edge of the series.
## API Reference
#### color (optional)
Type: `string|number`
Default: see [colors](colors.md)
A color for both the fill and the outline of the area series. Will be overridden by both the fill and the stroke property, if provided.
#### curve (optional)
Type: `string|function`
Default: `null`
Apply the provided or named curve function from the D3 shape library to smooth the line series plot, see [the D3 documentation](https://github.com/d3/d3-shape#curves) for function names and instructions. Providing the function, not the name, will require importing the d3-shape package in order to configure it:
```javascript
// Setting up with only a name
const stringCurveProp = <AreaSeries data={data} curve={'curveMonotoneX'} .../>;
const configuredCurve = d3Shape.curveCatmullRom.alpha(0.5);
const funcCurveProp = <AreaSeries data={data} curve={configuredCurve} .../>;
```
#### data
Type: `Array<Object>`
Array of data for the series. See above data format reference.
#### fill (optional)
Type: `string|number`
Default: see [colors](colors.md)
A color for the fill of the area series. Will override the color property if both are provided.
#### getNull (optional)
Type: `function`
Default: `null`
A function that will be invoked for each data element that will return a boolean that specifies if the data point should be drawn or not. For more information see [the D3 documentation](https://github.com/d3/d3-shape#area_defined).
```javascript
// Only draw datapoints where the y value is not equal to null
<AreaSeries getNull={(d) => d.y !== null} data={data} />
```
#### opacity (optional)
Type: `number`
Default: `1`
Opacity of the area chart from 0 (transparent) to 1 (opaque).
#### stroke (optional)
Type: `string|number`
Default: see [colors](colors.md)
A color for the outline of the area series. Will override the color property if both are provided.
#### style (optional)
Type: `object`
An object which holds CSS properties that will be applied to the SVG element(s) rendered by the series. This allows you to style series beyond the other explicitly defined properties and without having to use CSS classnames and stylesheets. See [style](style.md)
```jsx
<AreaSeries
data={data}
style={{strokeDasharray: "2 2"}}
/>
```
### Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
```jsx
<AreaSeries
...
onNearestX={(datapoint, event)=>{
// does something on mouseover
// you can access the value of the event
}}
```
#### onSeriesClick
Type: `function`
Default: none
This handler fires when the user clicks somewhere on an AreaSeries, and provides the corresponding event. See [interaction](interaction.md)
```jsx
<AreaSeries
...
onSeriesClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onSeriesMouseOut
Type: `function`
Default: none
This handler fires when the user's mouse cursor leaves an AreaSeries, and provides the corresponding event. See [interaction](interaction.md)
```jsx
<AreaSeries
...
onSeriesMouseOut={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesMouseOver
Type: `function`
Default: none
This handler fires when the user mouses over an AreaSeries, and provides the corresponding event. See [interaction](interaction.md)
```jsx
<AreaSeries
...
onSeriesMouseOver={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
================================================
FILE: docs/axes.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Axes
<!-- INJECT:"CustomAxesOrientationWithLink" -->
`XAxis` and `YAxis` shows are responsible for the axis in the chart. They can be used simply
```javascript
<XYPlot
width={300}
height={300}>
<XAxis />
<YAxis />
<MarkSeries data={myData}/>
</XYPlot>
```
Which will automatically interpolate across the relevant domains of the data (ie it will present reasonable values for x and y). It can also be used to create more complex axes
<!-- INJECT:"CustomAxesWithLink" -->
Which is produced via
```javascript
<XYPlot width={300} height={300}>
<XAxis top={0} hideLine tickValues={[0, 1, 3, 4, 5]} title="X"/>
<XAxis tickFormat={v => `Value is ${v}`} tickLabelAngle={-90} />
<YAxis hideTicks/>
<YAxis left={50} tickFormat={v => v * v}/>
<YAxis hideLine left={150} tickFormat={v => WORDS[v]}/>
<MarkSeries data={[{x: 0, y: 0}, {x: 5, y: 5}]} opacity={0} opacityType="linear"/>
</XYPlot>
```
For greater control over the specific styling and placement of the axis label, please see [ChartLabel](chart-label.md).
## API Reference
#### title (optional)
Type: `string`
Shows the title for the axis.
#### orientation (optional)
Type: `'top'|'left'|'bottom'|'right'`
The position of the axis inside the chart.
By default **it is already set** to `'bottom'` for `XAxis` and to `'left'` for `YAxis`. Similar to how the axis are oriented in d3-axis.
#### position (optional)
Type: `'end'|'middle'|'start'`
The position of the title relative to the axis. This value is set to `'end'` by default (i.e. towards the left of a horizontal axis, towards the top of a vertical axis.)
#### tickTotal (optional)
Type: `number`
Total number of ticks on the axis. Already set by default. Similar to the `tickTotal()` method of d3-axis.
#### tickValues (optional)
Type: `Array<*>`
An array of values (not coordinates!) that where the ticks should be shown. Similar to the `tickValues()` method of d3-axis.
#### tickFormat (optional)
Type: `function(value, index, scale, tickTotal)`
Format function for the tick label. Similar to the `tickFormat()` method of d3-axis. Typically the value that is returned is a string or a number, however this function also supports rendering SVG React elements. To wit, I could have formatting function like
```javascript
function myFormatter(t, i) {
return (<tspan>
<tspan x="0" dy="1em">MY VALUE</tspan>
<tspan x="0" dy="1em">{t}</tspan>
</tspan>);
}
```
Or you can customize the tick formatting by calling the `tickFormat()` function on the d3-scale by yourself and pass additional formatting parameters (e.g s for SI-prefix).
```javascript
function mySIPrefixFormatter(value, index, scale, tickTotal) {
return `${scale.tickFormat(tickTotal, 's')(value)}Wh`;// -> e.g. 1.2kWh
}
```
**Note!** The return value will be wrapped with a `<text>` node if it's a string, `<tspan>`, or `<textPath>`. In all other cases the returned element will replace the `<text>` node. In case it's a custom React element it will also receive two additional props: `containerWidth` and `tickCount`. This way you can e.g. render a `<div>` to truncate long labels:
```javascript
const MyLabel = props => (
<foreignObject>
<div
xmlns="http://www.w3.org/1999/xhtml"
style={{
width: props.containerWidth / props.tickCount, overflow: 'hidden',
whiteSpace: 'nowrap'
}}
>
{props.children}
</div>
</foreignObject>
);
function myFormatter(value) {
return <MyLabel>{value}</MyLabel>;
}
<XAxis tickFormat={myFormatter} />
```
<!-- INJECT:"CustomAxisTickElement" -->
#### tickSize (optional)
Type: `number`
Default: `6`
Tick size for the axis. Sets both inner and outer sizes of the tick line. Similar to the `tickSize()` method of d3-axis.
#### tickSizeOuter (optional)
Type: `number`
Default: `null`
Tick size for the axis. Sets the outer size of the tick line. Similar to the `tickSizeOuter()` method of d3-axis.
NOTE: 1.0.0 and onwards now properly draws outer tick using this value. Previously, this value affected the drawing of inner tick.
#### tickSizeInner (optional)
Type: `number`
Default: `null`
Tick size for the axis. Sets the inner size of the tick line. Similar to the `tickSizeInner()` method of d3-axis.
NOTE: v1.0.0+ properly draws inner tick using this value. Previously, this value affected the drawing of outer tick.
#### tickPadding (optional)
Type: `number`
Default: `2`
Distance between the tick and the text of the tick in pixels. Similar to the `tickPadding()` method of d3-axis.
#### tickLabelAngle (optional)
Type: `number`
Default: `0`
The angle of the tick label. Can be used to fit the long labels of the axis without truncation.
#### left (optional)
Type: `number`
Horizontal position of the axis in pixels. **Already set by default**, but can be overridden by the user.
#### top (optional)
Type: `number`
Vertical position of the axis in pixels. **Already set by default**, but can be overridden by the user.
#### width (optional)
Type: `number`
Width of the axis in pixels. **Already set by default**, but can be overridden by the user.
#### height (optional)
Type: `number`
Height of the axis in pixels. **Already set by default**, but can be overridden by the user.
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### style (optional)
Type: `object`
An object that contains CSS properties with which the axis component can be entirely re-styled.
As the Axis component is composite, it is possible to style its different parts individually. See [style](style.md)
The various parts of the axis can be styled by passing an object to the `line`, `ticks`, `text` and `title` properties:
```jsx
<XAxis title="X Axis" style={{
line: {stroke: '#ADDDE1'},
ticks: {stroke: '#ADDDE1'},
text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
}}/>
```
================================================
FILE: docs/bar-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
# Bar Series
**TLDR**: use bar series to make bar charts, but not histograms.
Bar series allows users to construct charts that contain rectangles that are oriented either left-right or top-bottom. This type: of series is generally used to visualize mappings of categorical data to quantitative data. For instance if you had counts of pigeon sightings by season, that would be a perfect bar series (`[{x: 'winter', y: 10}, {x: 'spring', y: 100}, {x: 'summer', y: 10000}, {x: 'fall', y: 10}]`), while if that data was represented as the individual records of your sightings of pigeons (`[{x: May 1st 2pm}, {x: May 12th 1am}]`) you might either want a mark-series (to make a scatterplot) or a rect-series (to make a histogram).
<!-- INJECT:"BarChartWithLink" -->
Bar series come in two flavors, `HorizontalBarSeries` and `VerticalBarSeries`. VerticalBarSeries have vertical bars, HorizontalBarSeries have horizontal bars, plain and simple!
<!-- INJECT:"StackedHorizontalBarChartWithLink" -->
## Data format Reference
Like other series, it is required that the data be an array of objects, formatted like so:
```javascript
const myData = [
{x: 'A', y: 10},
{x: 'B', y: 5},
{x: 'C', y: 15}
]
```
Where x and y are required quantities and additional properties may be stapled on.
#### x
Type: (VerticalBarSeries): `string|number`
Type: (HorizontalBarSeries): `number`
The x position in coordinates of the box to be used. This quantity is treated as a category (at least in VerticalBarSeries) and so considers the exact left-right positioning to be not that important (which is something to watch out for if you are providing exact numbers, in such a case it is better to the rect-series).
#### y
Type: (VerticalBarSeries): `number`
Type: (HorizontalBarSeries): `string|number`
The y position in coordinates of the box to be used. For VerticalBarSeries this value is considered a number, and is scaled against it's domain into pixels.
<!-- INJECT:"DifferenceChartWithLink" -->
#### y0
(Optional)
Type: (VerticalBarSeries): `number`
Type: (HorizontalBarSeries): `string|number`
The y0 position in coordinates of the box to be used, this is where the bottom of the bar is placed, defaults to zero. Use is not recommended with stacked bars. For VerticalBarSeries this value is considered a number, and is scaled against it's domain into pixels.
#### color (optional)
Type: `string|number`
The color of a bar in the series. By default the color is interpreted as number to be scaled to a color range. This can be over-ridden by providing the prop colorType="literal" to the series itself. This property can also be defined on the series level.
#### opacity (optional)
Type: `number|Object`
Opacity of the individual box to be rendered. By default opacity is scaled by `literal`, so the exact value provided will be used. This property can also be defined on the series level.
#### stroke (optional)
Type: `number|Object`
The color of the outline of the box to be rendered. When this value is not provided the color attribute is used instead. This property can also be defined on the series level.
#### fill (optional)
Type: `number|Object`
The color of the inside of the box to be rendered. When this value is not provided the color attribute is used instead. This property can also be defined on the series level.
## Series API Reference
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### color
Type: `string|number`
The color for all elements in the series, this property will be over-ridden by color specified in the data attribute. See [colors](colors.md)
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### cluster
Supply a clustering key for this series.
When used with the `stackBy` attribute, creates a clustered stacked bar chart. Returning to our pigeon example from earlier, if you had multiple years of pigeon sightings by season and you wanted to compare the season, clustering would be a great way to do that.
<!-- INJECT:"ClusteredStackedVerticalBarChartWithLink" -->
#### data
Type: `Array<Object>`
Array of data for the series. See above data format reference.
#### fill
Type: `string|number`
The inner color for all elements in the series, this property will be over-ridden by fill specified in the data attribute. See [colors](colors.md)
#### opacity
Type: `string|number`
The opacity for all elements in the series, this property will be over-ridden by color specified in the data attribute.)
#### stroke
Type: `string|number`
The outer color for all elements in the series, this property will be over-ridden by stroke specified in the data attribute. See [colors](colors.md)
#### style
Type: `object`
A list of CSS properties to style the series outside of the explicitly set properties. Note that it will override all other properties (ie fill, stroke, opacity, color). See [style](style.md)
#### barWidth
Type: `Number`
The percentage for which each bar fills the designated bucket. 1.0 means that the bar fills the whole bucket (no padding between bars), while a
smaller percentage means more whitespace between the bars.
## Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onSeriesClick
Type: `function`
Default: none
This handler fires when the user clicks somewhere on a series, and provides the corresponding event. Unlike onClick, it doesn't pass a specific datapoint.
```jsx
<BarSeries
...
onSeriesClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onSeriesMouseOut
Type: `function`
Default: none
This handler fires when the user's mouse cursor leaves a series, and provides the corresponding event. Unlike onValueMouseOut, it doesn't pass a specific datapoint.
```jsx
<BarSeries
...
onSeriesMouseOut={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesMouseOver
Type: `function`
Default: none
This handler fires when the user mouses over a series, and provides the corresponding event. Unlike onValueMouseOver, it doesn't pass a specific datapoint.
```jsx
<BarSeries
...
onSeriesMouseOver={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesRightClick
Type: `function`
Default: none
This handler fires when the user right-clicks somewhere on a series, and provides the corresponding event. Unlike onClick, it doesn't pass a specific datapoint.
```jsx
<BarSeries
...
onSeriesRightClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueClick
Type: `function`
Default: none
This handler is triggered either when the user clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<BarSeries
...
onValueClick={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOut
Type: `function`
Default: none
This handler is triggered either when the user's mouse leaves a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<BarSeries
...
onValueMouseOut={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOver
Type: `function`
Default: none
This handler is triggered either when the user's mouse enters a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<BarSeries
...
onValueMouseOver={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueRightClick
Type: `function`
Default: none
This handler is triggered either when the user right-clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<BarSeries
...
onValueClick={(datapoint, event)=>{
// does something on right click
// you can access the value of the event
}}
```
================================================
FILE: docs/borders.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Borders
Sometimes when modifying the domain of the XYPlot it can be useful to enforce a border, so that some components appear, and others do not. One way to do this is to use the `Borders` component. It is a simple component that creates rectangles the directly correspond to the margins of the plot.
<!-- INJECT:"GradientExampleWithLink" -->
For example, a set up like this:
```jsx
<XYPlot xDomain={[1.2, 3]} yDomain={[11, 26]} width={300} height={300}>
<AreaSeries
data={[
{x: 1, y: 10, y0: 1},
{x: 2, y: 25, y0: 5},
{x: 3, y: 15, y0: 3}
]}/>
<Borders style={{
bottom: {fill: '#fff'},
left: {fill: '#fff'},
right: {fill: '#fff'},
top: {fill: '#fff'}
}}/>
<XAxis />
<YAxis />
<AreaSeries
data={[
{x: 1, y: 5, y0: 6},
{x: 2, y: 20, y0: 11},
{x: 3, y: 10, y0: 9}
]}/>
</XYPlot>
```
would cause the first area series to be truncated underneath the borders, while the second one would not be! This level of granular border control can be useful if you are using multiple kinds of series, for instance if you have a mark series that you wish to show the entire mark for, and a line series that you are alright with truncating at the border.
## API Reference
#### className (optional)
Type: `String`
A class name to apply to each of the borders, as well as the root border container. It will be enumerates on top the borders using suffixes, eg if className={"my-cool-class"} the top rectangle will have a class name "my-cool-class-top".
#### style (optional)
Type: `Object`
You can pass a style object to your Hint component to apply your own styles. See [style](style.md)
```jsx
<Borders style={{
bottom: {fill: '#fff'},
left: {fill: '#fff'},
right: {fill: '#fff'},
top: {fill: '#fff'}
}}/>
```
Because border its made up of four individual rectangular components (there being four borders on an XYPlot) it is advisable to specify styles for all four rectangles. This can be done using either the style object or css-classes. Alternatively, if all the borders should be treated the same, this can be achieved by supplying an all object to style. This can be then over-ridden:
```jsx
<Borders style={{
all: {fill: '#fff'}
bottom: {fill: '#0f0'}
}}/>
```
================================================
FILE: docs/chart-label.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## ChartLabel
When you are styling your chart sometimes you just want to take complete control of label placements. Maybe you want to annotate something, or maybe you just want to place your axis labels in a very specific place, ChartLabel allows you to do just that. Let's look at an example:
```jsx
<XYPlot width={300} height={300}>
<HorizontalGridLines />
<VerticalGridLines />
<XAxis />
<YAxis />
<ChartLabel
text="X Axis"
className="alt-x-label"
includeMargin={false}
xPercent={0.025}
yPercent={1.01}
/>
<ChartLabel
text="Y Axis"
className="alt-y-label"
includeMargin={false}
xPercent={0.06}
yPercent={0.06}
style={{
transform: 'rotate(-90)',
textAnchor: 'end'
}}
/>
<Line data={[{x: 1, y: 3}, {x: 2, y: 5}, {x: 3, y: 15}, {x: 4, y: 12}]} />
</XYPlot>
```
This usage is the same as using title on the XAxis or YAxis, however it allows us greatly flexibility in terms of styles and placement. It is significantly more verbose than using the basic methods on Axis, but the it allows you to do whatever you want. You could place your axis label in the center! You could make them diagonal or a really big. The world is your oyster.
This element is different then the [LabelSeries](label-series.md) because the elements that it describes ARE NOT data carrying. This element will not affect the computed domain or range. It'll just go where you place it and it won't affect anything else.
## API Reference
#### text
Type: `string`
The content of the label
#### className (optional)
Type: `string`
Provide an additional class name the label.
#### includeMargin (optional)
Type: `Boolean`
Defaults to true
Whether or not to use compute the percentage placement with the margins or not.
#### xPercent
Type: `Number` (between 0 and 1)
Where to place the label on the charts width, expressed as percentage (of the width). If the includeMargin flag is included, then this percentage is of the total width, if not then it is of just the inner chart area.
#### yPercent
Type: `Number` (between 0 and 1)
Where to place the label on the charts height, expressed as percentage (of the height). If the includeMargin flag is included, then this percentage is of the total height, if not then it is of just the inner chart area.
#### style
Type: `object`
The specific styles to apply to the text element of the label. These styles are applied directly to the dom object and are interpreted as SVG styles (as opposed to CSS styles).
================================================
FILE: docs/clip.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Clip
Depending on the data and domain, sometimes the series in the plot will extend into the axis. This can either be solved with a [Border](border.md), or the elements can be clipped.
To have the rendered series, clipped you will need to set up a `clipPath` (see [MDN](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/clipPath)) and tell the series to use it.
As seen below, the `clipPath` can be created with the `ContentClipArea` component, and its `id` can be referenced by the components that want to be clipped.
```jsx
<XYPlot>
<ContentClipArea id="clip" />
<LineSeries style={{clipPath: 'url(#clip)'}} />
</XYPlot>
```
## API Reference
#### id (optional)
Type: `String`
The id to assign to the `clipArea`. If not provided, this will default to `content-area`
================================================
FILE: docs/colors.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Color
Color can be set and affected in many ways in React-vis.
The main principles are:
* sensible defaults - your chart should look good even if you don't do anything;
* respect of specificity - you can change things at a high level (ie <XYPlot /> component) but override this at the series level and, when relevant, at the mark level.
* flexibility - everything down to the humble tick can be colored and recolored.
### Setup
In this document, let's look at how different color choices affect 3 different mini charts.
Each chart in the doc is made of 3 series with x going from 0 to 9 and random values of y between 0 and 10. The left-most chart is made of VerticalBarSeries, the middle one is made of 3 LineSeries, and the right-most one is made of MarkSeries.
So it goes like this:
```jsx
<XYPlot height={200} width={200}>
<VerticalBarSeries data={series1}/>
<VerticalBarSeries data={series2}/>
<VerticalBarSeries data={series3}/>
</XYPlot>
<XYPlot height={200} width={200}>
<LineSeries data={series1}/>
<LineSeries data={series2}/>
<LineSeries data={series3}/>
</XYPlot>
<XYPlot height={200} width={200}>
<MarkSeries data={series1}/>
<MarkSeries data={series2}/>
<MarkSeries data={series3}/>
</XYPlot>
```
### Cases
We do nothing:
<!-- INJECT:"SensibleDefaultsWithLink" -->
With no color instruction, colors are automatically set by series according to the default react-vis palette, which is:
<!-- INJECT:"ReactVis5WithLink" -->
We specify color in XYPlot
```jsx
<XYPlot height={200} width={200} color="red">
<VerticalBarSeries data={series1}/>
<VerticalBarSeries data={series2}/>
<VerticalBarSeries data={series3}/>
</XYPlot>
<XYPlot height={200} width={200} stroke="red">
<LineSeries data={series1}/>
<LineSeries data={series2}/>
<LineSeries data={series3}/>
</XYPlot>
<XYPlot height={200} width={200} color="red">
<MarkSeries data={series1}/>
<MarkSeries data={series2}/>
<MarkSeries data={series3}/>
</XYPlot>
```
<!-- INJECT:"ColorInXYPlotWithLink" -->
Without any further instruction, all the series are red. Note that in the case of LineSeries, we have to use stroke instead of color for this effect to work.
We specify color by series
The next step is passing colors to by series. When we do that, we add a color prop to each series component:
```jsx
<LineSeries data={series1} color="1" />
<LineSeries data={series2} color="red" />
```
How this color information is going to be treated depends on a number of factors.
Color scales
Once it's passed through series, color works like a [scale](scales-and-data.md); in other words, it transforms data into a visual representation.
There are several types of scales.
A linear scale works with a range of numerical values on one hand ("domain"), and two colors on the other hand ("range"). If given a numerical value in the domain, it transforms it into a color in the range depending on how far into the domain that value was. If given the minimum value of the domain, the scale will return the first color of the range. If given the maximum value of the domain, it will return the second color of the range. And if given a value in between, it will return an interpolation between these two colors - the closer that value is from the minimum, the more it will look like the first color, and the closer it is to the maximum, the more it will look like the second. Else, it's a proportional mix of the two.
For example, if a domain is [0, 1] and the range is ['black', 'white'], 0 will become 'black', 1 will become 'white', and 0.2 will become '#333333' (20% between black and white)
The linear scale can be extended to work with multi-point domains and range. If you pass 3 (ordered) values to the domain, and 3 values to the range, when given a data point, the scale will figure out which segment of the domain this data point corresponds to, and will match it with the corresponding segment of the range.
If our domain is [0, 1, 2] and our range is now ['black', 'white', 'blue'], 0.2 will still be '#333333' (20% between the first 2 values), but 1.5 will become '#8080ff' (halfway between white and blue)
A categorical color scale associates a discrete number of values (also called domain) to a discrete number of colors (also called range). One big difference is that the values can be number or strings.
For instance, if a categorical color scale has the domain: ['yes', 'maybe', 'no'] and the range ['blue', 'yellow', 'red'], it will transform 'yes' into 'blue' and 'no' into 'red'. There will be no interpolation. If it finds a value which is not in its domain, it will return undefined (which will be represented in black).
Finally, the literal color scale just returns whatever is provided as is. With a literal color scale, we can have color names in the dataset, and they will be used without transformation.
Categorical colors at series level
<!-- INJECT:"CategoryColorAtSeriesLevelWithLink" -->
For this example, the XYPlot props are:
```jsx
<XYPlot height={200} width={200}
colorType="category"
colorDomain={[0, 1, 2]}
colorRange={myPalette}
>
<VerticalBarSeries data={series1} color={0} />
<VerticalBarSeries data={series2} color={1} />
<VerticalBarSeries data={series3} color={2} />
</XYPlot>
<XYPlot height={200} width={200}
colorType="category"
colorDomain={[0, 1, 2]}
colorRange={myPalette}
>
<LineSeries data={series1} color={0} />
<LineSeries data={series2} color={1} />
<LineSeries data={series3} color={2} />
</XYPlot>
<XYPlot height={200} width={200}
colorType="category"
colorDomain={[0, 1, 2]}
colorRange={myPalette}
>
<MarkSeries data={series1} color={0} />
<MarkSeries data={series2} color={1} />
<MarkSeries data={series3} color={2} />
</XYPlot>
```
As you can see, __using categorical color at the series level doesn't work for bar charts or scatterplots__. It does for line charts though.
Linear colors at series level
<!-- INJECT:"LinearColorAtSeriesLevelWithLink" -->
```jsx
<XYPlot height={200} width={200}
colorType="linear"
colorDomain={[0, 1, 2]}
colorRange={myPalette}
>
<VerticalBarSeries data={series1} color={0} />
<VerticalBarSeries data={series2} color={1} />
<VerticalBarSeries data={series3} color={2} />
</XYPlot>
<XYPlot height={200} width={200}
colorType="linear"
colorDomain={[0, 1, 2]}
colorRange={myPalette}
>
<LineSeries data={series1} color={0} />
<LineSeries data={series2} color={1} />
<LineSeries data={series3} color={2} />
</XYPlot>
<XYPlot height={200} width={200}
colorType="linear"
colorDomain={[0, 1, 2]}
colorRange={myPalette}
>
<MarkSeries data={series1} color={0} />
<MarkSeries data={series2} color={1} />
<MarkSeries data={series3} color={2} />
</XYPlot>
```
Likewise, __using linear color at the series level only works for line charts__.
Literal colors at series level
<!-- INJECT:"LiteralColorAtSeriesLevelWithLink" -->
```jsx
<XYPlot height={200} width={200}>
<VerticalBarSeries data={series1} color="#cd3b54" />
<VerticalBarSeries data={series2} color="#59b953" />
<VerticalBarSeries data={series3} color="#ba4fb9" />
</XYPlot>
<XYPlot height={200} width={200}>
<LineSeries data={series1} color="#cd3b54" />
<LineSeries data={series2} color="#59b953" />
<LineSeries data={series3} color="#ba4fb9" />
</XYPlot>
<XYPlot height={200} width={200}>
<LineSeries data={series1} color="#cd3b54" />
<LineSeries data={series2} color="#59b953" />
<LineSeries data={series3} color="#ba4fb9" />
</XYPlot>
```
However, setting color at the series level works for all kinds of charts. It's not even necessary to specify a color type, a domain or a range.
We specify color information at mark level
For this second series of charts, we are going to specify color information inside of our dataset (ie the series which will be passed to the props "data").
Previously, our datasets only included x and y information:
```js
const series1 = [
{x: 0, y: 2},
{x: 1, y: 6},
...
];
```
Now, they will have a color information as well.
* For our categorical examples, that color value will be a random integer between 0 and 10.
* For our linear examples, that color value will be a random number between 0 and 10 (not necessarily an integer).
* Finally, for our literal example, the color information will be the name of a color in hex format.
Categorical colors at mark level
<!-- INJECT:"CategoryColorAtMarkLevelWithLink" -->
```jsx
<XYPlot height={200} width={200} colorType="category">
<VerticalBarSeries data={seriesWithColor1} />
<VerticalBarSeries data={seriesWithColor2} />
<VerticalBarSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorType="category">
<LineSeries data={seriesWithColor1} />
<LineSeries data={seriesWithColor2} />
<LineSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorType="category">
<MarkSeries data={seriesWithColor1} />
<MarkSeries data={seriesWithColor2} />
<MarkSeries data={seriesWithColor3} />
</XYPlot>
```
So what happens here?
For line charts, __nothing!__ They ignore colors at mark level. So they behave just like the default case (as if we passed no color information at all)
For the 2 other charts, marks are colored according to the default extended palette:
<!-- INJECT:"ReactVis20WithLink" -->
Here, I have specified the colorType prop at the XYPlot level. I could have done so at the series level, inside of each series component (it cascades down). However, I haven't specified a colorRange or a colorDomain.
It's going to use the default extended palette as the color range. We'll override this in the next example. As for domain, it's going to associate the first color value it finds in the dataset with the first color of the palette, the second distinct color it finds with the second color of the palette, and so on and so forth.
With this syntax, we'll render marks which have different color information in different colors, but we don't control which color. If we want to control which color a specific value is going to be associated with, we have to pass a colorDomain.
Categorical colors at mark level, custom palette
<!-- INJECT:"CategoryColorAtMarkLevelCustomPaletteWithLink" -->
```jsx
<XYPlot height={200} width={200} colorType="category" colorRange={myPalette}>
<VerticalBarSeries data={seriesWithColor1} />
<VerticalBarSeries data={seriesWithColor2} />
<VerticalBarSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorType="category" colorRange={myPalette}>
<LineSeries data={seriesWithColor1} />
<LineSeries data={seriesWithColor2} />
<LineSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorType="category" colorRange={myPalette}>
<MarkSeries data={seriesWithColor1} />
<MarkSeries data={seriesWithColor2} />
<MarkSeries data={seriesWithColor3} />
</XYPlot>
```
This time, I'm passing a custom palette:
<!-- INJECT:"CustomPaletteWithLink" -->
Behavior for line chart is still identical, but the colors are different for our bar charts and scatterplots. As I'm not passing a color domain, I still don't control which value will be associated with which color - not super important since my color values are random numbers. But if order matters, a colorDomain is required.
Linear colors at mark level, default palette
<!-- INJECT:"LinearColorAtMarkLevelNoPaletteWithLink" -->
```jsx
<XYPlot height={200} width={200}>
<VerticalBarSeries data={seriesWithColor1} />
<VerticalBarSeries data={seriesWithColor2} />
<VerticalBarSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200}>
<LineSeries data={seriesWithColor1} />
<LineSeries data={seriesWithColor2} />
<LineSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200}>
<MarkSeries data={seriesWithColor1} />
<MarkSeries data={seriesWithColor2} />
<MarkSeries data={seriesWithColor3} />
</XYPlot>
```
The linear color scale is the default color scale. So, to get that behavior, we don't need to specify this colorType in XYPlot. Its associated color range was conceived by someone who really likes orange:
<!-- INJECT:"ContinuousWithLink" -->
I haven't specified the color range either. React-Vis will compute it by looking at the minimum and maximum value associated with color in all the series of a given XYPlot, and use that as the domain.
The line charts are still unaffected.
Linear colors at mark level, custom palette
<!-- INJECT:"LinearColorAtMarkLevelWithLink" -->
```jsx
<XYPlot height={200} width={200} colorRange={['#c7e9c0', '#00441b']}>
<VerticalBarSeries data={seriesWithColor1} />
<VerticalBarSeries data={seriesWithColor2} />
<VerticalBarSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorRange={['#c7e9c0', '#00441b']}>
<LineSeries data={seriesWithColor1} />
<LineSeries data={seriesWithColor2} />
<LineSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorRange={['#c7e9c0', '#00441b']}>
<MarkSeries data={seriesWithColor1} />
<MarkSeries data={seriesWithColor2} />
<MarkSeries data={seriesWithColor3} />
</XYPlot>
```
Here's the same code, but we define the color range. This green palette comes from ColorBrewer.
Literal colors at mark level, default palette
<!-- INJECT:"LiteralColorAtMarkLevelWithLink" -->
```jsx
<XYPlot height={200} width={200} colorType="literal"}>
<VerticalBarSeries data={seriesWithColor1} />
<VerticalBarSeries data={seriesWithColor2} />
<VerticalBarSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorType="literal"}>
<LineSeries data={seriesWithColor1} />
<LineSeries data={seriesWithColor2} />
<LineSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorType="literal"}>
<MarkSeries data={seriesWithColor1} />
<MarkSeries data={seriesWithColor2} />
<MarkSeries data={seriesWithColor3} />
</XYPlot>
```
Finally, we can pass literal color names in our dataset from our custom palette. The line charts are still not affected.
### Going beyond
Independently control fill and stroke
The line chart series (LineSeries) is only a line, but most other series (AreaSeries, ArcSeries, BarSeries, HeatmapSeries, HexbinSeries, MarkSeries, RectSeries and their derivatives, including LineMarkSeries) involve 2D shapes that have both a fill color and a stroke color.
In SVG, those correspond to the fill and the stroke css properties (fillStyle and strokeStyle in canvas).
When we pass color information, we set both the fill and stroke. However, we can set them independently by using "fill" or "stroke" instead of color.
As of this writing, ContourSeries and PolygonSeries don't follow this model and their color can only be controlled by "color".
<!-- INJECT:"CategoryColorAtMarkLevelFixedStrokeWithLink" -->
```jsx
<XYPlot height={200} width={200} colorType="category" stroke="#f70">
<VerticalBarSeries data={seriesWithColor1} />
<VerticalBarSeries data={seriesWithColor2} />
<VerticalBarSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorType="category" stroke="#f70">
<LineSeries data={seriesWithColor1} />
<LineSeries data={seriesWithColor2} />
<LineSeries data={seriesWithColor3} />
</XYPlot>
<XYPlot height={200} width={200} colorType="category" stroke="#f70">
<LineSeries data={seriesWithColor1} />
<LineSeries data={seriesWithColor2} />
<LineSeries data={seriesWithColor3} />
</XYPlot>
```
Here, we set a stroke value at the XYPlot level for all of our charts. What happens?
The bar chart outerbox is now of that color,
The line series are now represented in that color - this takes over the default behavior,
The scatterplot dots are also now surrounded with that color.
Note that in the case of a LineMarkSeries (a combination of a LineSeries and a MarkSeries) the stroke property will control both the color of the line and the stroke of the marks. If you want a different color, you can just instead create a LineSeries and a MarkSeries with the same data:
<!-- INJECT:"LineSeriesMarkSeriesWithLink" -->
```jsx
<XYPlot height={200} width={600}>
<LineSeries data={series1} color={myPalette[0]} />
<MarkSeries data={series1} color={myPalette[0]} stroke="white" />
<LineSeries data={series2} color={myPalette[1]} />
<MarkSeries data={series2} color={myPalette[1]} stroke="white" />
<LineSeries data={series3} color={myPalette[2]} />
<MarkSeries data={series3} color={myPalette[2]} stroke="white" />
</XYPlot>
```
Here, I want my dots to have a white outline.
Why did I specify the color of each of my series? You might have to scroll all the way to the top for the answer! If I had done nothing all the colors of my series would have been taken from the default palette for each new series. So the first line series would have had the first color, then the first mark series would have had the _second_ color... and so on and so forth. By specifying a color, we are guaranteeing that the dots and the lines have the same color.
Using styles
We can pass style information to anything - XYPlot, series, mark - and override the look and feel of that element. Styles don't have to be static objects - they can be computed at run time. Styles are a different way to control colors. While using the color prop, or a color property in a dataset, can be much more concise, everything can be affected by styles - including non-mark elements such as ticks or gridlines. See [style](style.md) for more info.
Using specificity
We've seen that we can set color information at the plot level, at the series level and at the mark level. But what happens when we do it at several levels at the same time? The most specific wins.
If you need to color one element (say, one mark) differently from all the others, you can specify color at a higher level (say, the series or the plot) and only pass color information to the exception, rather than pass color information to all elements.
<!-- INJECT:"ColorSpecificityWithLink" -->
```jsx
<XYPlot {...defaultXYPlotProps} color="#12939A" colorType="literal">
<VerticalBarSeries data={seriesWithOneElementColored} />
</XYPlot>
<XYPlot {...defaultXYPlotProps} stroke="#e5e5e5" strokeType="literal">
<LineSeries data={series1} />
<LineSeries data={series2} />
<LineSeries data={series3} stroke="#FF9833"/>
</XYPlot>
<XYPlot {...defaultXYPlotProps} color="#12939A" colorType="literal" stroke="white" >
<MarkSeries data={series1} />
<MarkSeries data={series2} />
<MarkSeries data={seriesWithOneElementColored} color="#4fb79b"/>
</XYPlot>
```
Notes:
* For the line series, which behave differently than other series, you must use stroke instead of color for this to work.
* For the scatterplot series, I'm using specificity twice: there's a color at the plot level, overridden by a color at the first series level, overridden by a color on the 7th mark of the series.
Using gradients
Why use a boring solid color when you can use gradients? We're not sure either! Once you define gradients (see [gradients](gradients.md)) you can use them instead of color (or fill, or stroke) at the series level.
<!-- INJECT:"GradientChartsWithLink" -->
```jsx
const gradient = (<GradientDefs>
<linearGradient
id="myGradient"
gradientUnits="userSpaceOnUse"
x1="0" y1="0" x2="200" y2="200">
<stop offset="10%" stopColor="#c6e48b" />
<stop offset="33%" stopColor="#7bc96f" />
<stop offset="66%" stopColor="#239a3b" />
<stop offset="90%" stopColor="#196127" />
</linearGradient>
</GradientDefs>);
return (<div style={{display: 'flex'}}>
<XYPlot height={200} width={200}>
{gradient}
<VerticalBarSeries data={series1} color={'url(#myGradient)'} />
</XYPlot>
<XYPlot height={200} width={200}>
{gradient}
<LineSeries data={series1} color={'url(#myGradient)'} />
</XYPlot>
<XYPlot height={200} width={200}>
{gradient}
<MarkSeries data={series1} color={'url(#myGradient)'} />
</XYPlot>
</div>)
```
Note that I'm using the userSpaceOnUse gradient unit, so the colors are set independently of the size of the object. I'm borrowing the colors of the gradient from the ones used on the activity sparklines in GitHub.
================================================
FILE: docs/contour-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## ContourSeries
The contour series allows for the easy creation of contour density plots. These can be more effective for visualizing heat map data than a rectangular heat map! Given a number of points in a space the relative contour lines are computed, so as to simplify the output into a more legible format!
<!-- INJECT:"ContourSeriesExampleWithLink" -->
The ContourSeries expects a similar data input as would be fed to either the MarkSeries or the HeatmapSeries. It can be as easy as just providing a well formatted data prop (an array of object containing numerically valued x and y keys), or more complex such as below:
```javascript
<XYPlot
xDomain={[40, 100]}
yDomain={[1.5, 8]}
width={600}
height={300}>
<ContourSeries
animation
className="contour-series-example"
style={{
stroke: '#125C77',
strokeLinejoin: 'round'
}}
colorRange={[
'#79C7E3',
'#FF9833'
]}
data={data}/>
</XYPlot>
```
## API reference
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### bandwidth (optional)
A parameter that directly maps into d3-contour's bandwidth parameter. See the [docs for more](https://github.com/d3/d3-contour#density_bandwidth)
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### data
Type: `Array<Object>`
Array of data for the series. Follows the usual pattern of an array of objects formatted with x and y coordinates, [{x: 0, y: 0}, ...].
#### style
Type: `object`
A list of CSS properties to style the series outside of the explicitly set properties. Note that it will override all other properties (ie fill, stroke, opacity, color). See [style](style.md)
## Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
================================================
FILE: docs/crosshair.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Crosshair
<!-- INJECT:"DynamicCrosshairWithLink" -->
`Crosshair` is a tooltip for multiple values at the same time. Its purpose is to combine several values with the similar X coordinate in one tooltip. Crosshair is automatically aligned by the x coordinate depending on what values are passed.
In case if custom representation of crosshair is needed, the component is able to wrap the user's JSX. In this case no CSS is applied to that. Here's a short example:
```jsx
<Crosshair values={myValues}>
<div style={{background: 'black'}}>
<h3>Values of crosshair:</h3>
<p>Series 1: {myValues[0].x}</p>
<p>Series 2: {myValues[1].x}</p>
</div>
</Crosshair>
```
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### itemsFormat (optional)
Type: `function`
The function that formats the list of items for the crosshair. Receives the list of data points, should return an array of objects containing `title` and `value` properties.
_Note: please pass custom contents in case if you need different look for the crosshair._
#### style (optional)
Type: `object`
An object that contains objects of CSS properties with which the component can be entirely re-styled.
As the Crosshair is composed of several elements, it is possible to provide style objects for any and all parts of the tree. See [style](style.md)
Most generally, there are three top level keys: `line`, `title`, and `box`. These in turn lead to their corresponding style objects.
#### titleFormat (optional)
Type: `function`
The function that formats the title for the crosshair. Receives the list of data points, should return an object containing `title` and `value` properties.
_Note: please pass custom contents in case if you need different look for the crosshair._
#### values
Type: `Array<Object>`
The array of data points to show the crosshair at. Crosshair will automatically align to the horizontal position of the points passed there.
================================================
FILE: docs/custom-svg-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## CustomSVGSeries
When creating visualizations, it is sometimes necessary to get your hands dirty and completely take control over what SVG components will be shown. This could be necessary in situations where you have predefined SVG code that you just want to appear the way you drew it in Sketch (but positioned using coordinates), or maybe you have multiline text annotations that you want to formatted in a particular way, or you just want to use an alternative type of mark instead of the usual scatterplot mark to differentiate series in a set. To serve these and many other tasks, we use the CustomSVGSeries.
<!-- INJECT:"CustomSVGExampleWithLink" -->
The premise of the series is that it simply puts a `<g>` element at a desired x,y location, and the offers you a variety of ways to fill in the contents of that `<g>` element. Here's an example of the data format:
```javascript
const myData = [
{x: 1, y: 10, customComponent: 'circle', size: 10},
{x: 1.7, y: 12, size: 20, style: {stroke: 'red', fill: 'orange'}},
{x: 2, y: 5},
{x: 3, y: 15},
{x: 2.5, y: 7, customComponent: (row, positionInPixels) => {
return (
<g className="inner-inner-component">
<circle cx="0" cy="0" r={10} fill="green"/>
<text x={0} y={0}>
<tspan x="0" y="0">{`x: ${positionInPixels.x}`}</tspan>
<tspan x="0" y="1em">{`y: ${positionInPixels.y}`}</tspan>
</text>
</g>
);
}}
]
```
Just like other series, x and y are used to position the group. The customComponent key word is used to determine how to fill in the svg (see below), and then size is used modify the size of the contents when using a string. Used in context of the series:
```javascript
<XYPlot width={300} height={300}>
<CustomSVGSeries customComponent="square" data={myData} />
</XYPlot>
```
### Defining your marks
The type of custom svg marks can be determined in one of several ways:
- As a string on a series level
- As a function on a series level
- As a string on row level
- As a function on a row level
There are currently four types of string accessible custom marks: **star**, **square**, **circle**, and **diamond**. If using a string, it can be useful to specify a size for the mark. This is done on a row level (see above data api example), with the size prop. Size is expressed in pixels, and is NOT scaled with the normal react-vis size keyword. They look like this:
<!-- INJECT:"CustomSVGAllTheMarksWithLink" -->
If using a function to defined your mark, it is important to note that the function receives three arguments (customComponent, positionInPixels, globalStyle), where customComponent is the row of data as you have defined it. Thus if you are defining a function for the series as a whole you can make modifications based on the individual row as you go!
## API reference
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### customComponent (optional)
Type: `string|function`
Provides the mark type for the entire series. Defaults to a 'circle'. See `Defining You Marks` above.
#### data
Type: `Array<Object>`
Array of data for the series. See above data format reference.
#### style
Type: `object`
A list of CSS properties to style the series outside of the explicitly set properties. Note that it will override all other properties (ie fill, stroke, opacity, color). See [style](style.md)
## Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onValueMouseOver (optional)
Type: `function(d, {event})`
`mouseover` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
#### onValueMouseOut (optional)
Type: `function(d, {event})`
`mouseout` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
================================================
FILE: docs/decorative-axis.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## DecorativeAxis
<!-- INJECT:"ParallelCoordinatesExampleWithLink" -->
In react-vis we try to express all of our components in terms of x and y coordinates. This is splendid and allows to separate a lot of our rendering logic from components! However, sometimes it is necessary to create labels that don't necessarily correspond to the underlying coordinates. For instance in cases of parallel coordinates (above) we want to mark up space in a series of discrete channels to show change across many different variables. To fill this need we use the ```DecorativeAxis``` component!
```javascript
<XYPlot
xDomain={[0, 1]}
yDomain={[0, 1]}
width={300}
height={300}>
<DecorativeAxis
axisStart={{x: 0, y: 0}}
axisEnd={{x: 1, y: 1}}
axisDomain={[-10, 100]}
/>
</XYPlot>
```
In the above example we start be setting our domain on the XYPlot (though this would be accomplished automatically if any of it's children had a data prop), and then specified where in the XY space we want our Axis to be (axisStart/axisEnd). Finally we specify the domain that we wish to show across that axis.
<!-- INJECT:"DecorativeAxisCrissCrossWithLink" -->
**WHAT IS THIS FOR** Labeling sections of XY space when we wish the viewer to interpret space in a different way. This could be as part of a Radar chart or radial chart! Or even, the inherently bad Dual Y Axis chart.
**WHAT IS NOT THIS FOR** Using in place of XAxis or YAxis, which should cover most of use cases in which space is being used normally. This type of axis allows for a lot of freedom in it's usage, however that can be dangerous. Most of the time, if you can't get XAxis and YAxis to do what you want, you maybe don't need axes. Be careful!
## API Reference
#### axisStart
Type: `Object`
Specify a start point for the decorativeAxis. It should be expressed in terms of coordinates (not pixels!) as a object like ```{x: 10, y: 1}```
#### axisEnd
Type: `Object`
Specify a start point for the decorativeAxis. It should be expressed in terms of coordinates (not pixels!) as a object like ```{x: 10, y: 1}```
#### axisDomain
Type: `Array`
This array of numbers allows the user to specify the values that will be interpolated across on the axis.
#### tickTotal (optional)
Type: `number`
Total number of ticks on the axis. Already set by default. Similar to the `tickTotal()` method of d3-axis.
#### tickSize (optional)
Type: `number`
Default: `5`
Tick size for the axis. Sets both inner and outer sizes of the tick line. Similar to the `tickSize()` method of d3-axis.
#### tickValue (optional)
Type: `function(*)`
Format function for the tick label. Similar to the `tickFormat()` method of d3-axis.
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### style (optional)
Type: `object`
An object that contains CSS properties with which the axis component can be entirely re-styled.
As the Axis component is composite, it is possible to style its different parts individually. See [style](style.md)
The various parts of the axis can be styled by passing an object to the `line`, `ticks`, `text` and `title` properties:
```jsx
<DecorativeAxis style={{
line: {stroke: '#ADDDE1'},
ticks: {stroke: '#ADDDE1'},
text: {stroke: 'none', fill: '#6b6b76', fontWeight: 600}
}}/>
```
================================================
FILE: docs/examples/building-things-other-than-charts.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"ForceDirectedGraph" -->
[Source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/force-directed-graph/force-directed-graph.js)
================================================
FILE: docs/examples/extensibility.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"Candlestick" -->
## Extensibility
react-vis is easily extensible! If we don't have what you want it's easy to make! For instance, the above chart
was made by simply extending abstract series and adding a little sugar.
[Source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/candlestick/candlestick.js)
================================================
FILE: docs/examples/iris-dashboard.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- STYLETYPE:"example-page" -->
<!-- INJECT:"IrisDashboard" -->
Click and drag on the charts!
The iris data set is a well beloved data set for getting to know various technical topics.
Here we use it to show how to make a small multiples dashboard with react vis.
You can find out more about it at it's [wikipedia page](https://en.wikipedia.org/wiki/Iris_flower_data_set)
[Source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/iris-dashboard/iris-dashboard.js)
================================================
FILE: docs/examples/responsive-vis.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- STYLETYPE:"example-page" -->
<!-- INJECT:"ResponsiveVis" -->
This demo explores the concept of "Responsive Data Visualization" (As coined by Nick Rabinowitz). The basic notion is lifted from responsive design: some features work for some screen resolutions, while others do not. Responsive design determines whether or not to use a given feature by consulting an aspect ratio (width by height). Through this notation we are able to create beautiful web experiences that work seamlessly between phones, tablets, and computers. Taking this idea on step farther we introduce a third element into the fray: data size.
In data visualization, we often need to create applications that work with enormous ranges of sizes of data. Sometimes the data might be small (10 - 100 rows), or it might be gigantic (100k-1M+ row): throughout the entire range it just needs to work. Again, following our cues from responsive design, we note that maybe labels on scatterplots look great when you have under 50 data points, but bad when you have 2000. Checkout Nicks [original demo](http://nrabinowitz.github.io/rdv/) for more details on the theory, as well to see his rad implementation in raw d3.
[Scatterplot source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/responsive-vis/responsive-scatterplot.js)
[Barchart source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/responsive-vis/responsive-bar-chart.js)
================================================
FILE: docs/examples/showcases/axes-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"AxesShowcase" -->
================================================
FILE: docs/examples/showcases/legends-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"LegendsShowcase" -->
================================================
FILE: docs/examples/showcases/misc-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"MiscShowcase" -->
================================================
FILE: docs/examples/showcases/plots-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"PlotsShowcase" -->
================================================
FILE: docs/examples/showcases/radar-chart-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"RadarShowcase" -->
================================================
FILE: docs/examples/showcases/radial-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"RadialShowcase" -->
================================================
FILE: docs/examples/showcases/sankeys-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"SankeysShowcase" -->
================================================
FILE: docs/examples/showcases/sunburst-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"SunburstSection" -->
================================================
FILE: docs/examples/showcases/treemaps-showcase.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- INJECT:"TreemapShowcase" -->
================================================
FILE: docs/examples/stream-graph.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
<!-- STYLETYPE:"example-page" -->
<!-- INJECT:"StreamgraphExample" -->
[Source code](https://github.com/uber/react-vis/blob/master/packages/showcase/examples/streamgraph/streamgraph-example.js)
================================================
FILE: docs/flexible-plots.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Flexible plots
By default, XYPlot requires a width and a height. There are times, however, when you'd like your chart to take all the space it can.
For these cases, React-vis provides three different types of `XYPlot` with different flexible dimensions:
- FlexibleWidthXYPlot
- FlexibleHeightXYPlot
- FlexibleXYPlot
and the associated helper functions that have been used to create these flexible components.
<!-- INJECT:"FlexibleChartsWithLink" -->
```jsx
import {
FlexibleXYPlot,
FlexibleWidthXYPlot,
FlexibleHeightXYPlot
} from 'react-vis';
```
`FlexibleWidthXYPlot` modifies `XYPlot` so that it no longer requires a width, since it will take all the with in its container div.
Likewise, `FlexibleHeightXYPlot` modifies `XYPlot` so that is no longer requires a height, and its height will be that of its container div.
Finally, `FlexibleXYPlot` modifies `XYPlot` so that it no longer requires either a width and a height, its dimensions will be that of its container.
These components can be used exactly as `XYPlot`:
```jsx
<FlexibleWidthXYPlot height={100}>
<VerticalBarSeries data={data} />
</FlexibleWidthXYPlot>
<FlexibleHeightXYPlot width={100}>
<VerticalBarSeries data={data} />
</FlexibleHeightXYPlot>
<FlexibleXYPlot>
<VerticalBarSeries data={data} />
</FlexibleXYPlot>
```
### No worries about resizing
A flexible plot is useful when you don't know for sure the size of the container where the chart will go.
On top of that, flexible plots resize themselves when the window size changes. You can try that by changing the size of this window.
### Size of parent container is not the same as "all the available space"
Flexible plots will inherit dimensions from their container. This is not the same thing as taking all the available space; if there are other elements in that container, a flexible plot won't deduce their dimensions from its own.
For best results, a flexible plot should be the only child of its container.
### Responsive visualizations
We can go one step beyond and not simply adjust the dimensions of the chart of the available space, but change how a dataset is being represented.
See the example [responsive visualizations](#/examples/charts/responsive-vis)
### Custom flexible components
By using the provided flexible helpers, you can use them to make your own components flexible, like we did to create `XYPlot` flexible alternatives:
```jsx
import {
XYPlot,
makeVisFlexible,
makeWidthFlexible,
makeHeightFlexible,
} from 'react-vis';
const FlexibleXYPlot = makeVisFlexible(XYPlot);
const FlexibleWidthXYPlot = makeWidthFlexible(XYPlot);
const FlexibleHeightXYPlot = makeHeightFlexible(XYPlot);
```
================================================
FILE: docs/getting-started/getting-started.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
### Getting started
#### Jump right in on codepen!
You can use react-vis directly on [codepen](https://codepen.io/ubervisualization/pen/BZOeZB) (or equivalent).
Each published version of react-vis is accessible via [unpkg.com](https://unpkg.com).
Add react files, and a link to the latest react-vis version - such as https://unpkg.com/react-vis@1.6.7/dist/dist.min.js.
But you can simply just use that [pen](https://codepen.io/ubervisualization/pen/BZOeZB) and take it from there.
#### Install the react-vis module
If you want to use react-vis in your project, add it from the command line:
```
npm install react-vis
```
(or yarn add react-vis - the following will assume that you use npm for concision's sake but you can substitute yarn if installed)
#### Create a new project with react-vis
Let's create a new vis app from scratch.
To do this, let's use [create-react-app](https://github.com/facebookincubator/create-react-app), the popular Facebook scaffold.
If you haven't installed yet, do so:
```
npm install -g create-react-app
```
And now:
```
create-react-app my-awesome-vis-app
cd my-awesome-vis-app
npm install react-vis
```
That's it! you are now ready to create amazing charts.
Let's edit create-react-app's default App.js:
```jsx
import React, { Component } from 'react';
import './App.css';
import '../node_modules/react-vis/dist/style.css';
import {XYPlot, LineSeries} from 'react-vis';
class App extends Component {
render() {
const data = [
{x: 0, y: 8},
{x: 1, y: 5},
{x: 2, y: 4},
{x: 3, y: 9},
{x: 4, y: 1},
{x: 5, y: 7},
{x: 6, y: 6},
{x: 7, y: 3},
{x: 8, y: 2},
{x: 9, y: 0}
];
return (
<div className="App">
<XYPlot height={300} width={300}>
<LineSeries data={data} />
</XYPlot>
</div>
);
}
}
export default App;
```
and then on the command line interface:
```
npm run start
```
and your chart is in the browser.
Note that on line 3, I have imported the react-vis stylesheet. There are many ways to do that, and it is actually optional. But apps made with create-react-app will let you import stylesheets directly, so that's a simple way to do so.
#### Your first chart
We tried to make react-vis syntax as close to the traditional react syntax. You have components which have props and possibly children.
Every react-vis chart is inside a component called XYPlot, for which a height and a width must be specified:
```jsx
<XYPlot height={300} width = {300} />
```
And all the elements of a chart - series, axes, gridlines, etc. are other components, which will be children of XYPlot.
```jsx
<XYPlot height={300} width= {300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeries data={data} />
</XYPlot>
```
And like in traditional react, order matters as components are drawn in order. In the previous example, the gridlines are drawn below the line series, but in this next example, they will be drawn above it.
```jsx
<XYPlot height={300} width= {300}>
<LineSeries data={data} />
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
</XYPlot>
```
================================================
FILE: docs/getting-started/installing-react-vis.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
### Install the react-vis module
If you want to use react-vis in your project, add it from the command line:
```
npm install react-vis
```
(or yarn add react-vis - the following will assume that you use npm for concision's sake but you can substitute yarn if installed)
================================================
FILE: docs/getting-started/new-react-vis-project.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
### Create a new project with react-vis
Let's create a new vis app from scratch.
To do this, let's use [create-react-app](https://github.com/facebookincubator/create-react-app), the popular Facebook scaffold.
If you haven't installed yet, do so:
```
npm install -g create-react-app
```
And now:
```
create-react-app my-awesome-vis-app
cd my-awesome-vis-app
npm install react-vis
```
That's it! you are now ready to create amazing charts.
Let's edit create-react-app's default App.js:
```jsx
import React, { Component } from 'react';
import './App.css';
import '../node_modules/react-vis/dist/style.css';
import {XYPlot, LineSeries} from 'react-vis';
class App extends Component {
render() {
const data = [
{x: 0, y: 8},
{x: 1, y: 5},
{x: 2, y: 4},
{x: 3, y: 9},
{x: 4, y: 1},
{x: 5, y: 7},
{x: 6, y: 6},
{x: 7, y: 3},
{x: 8, y: 2},
{x: 9, y: 0}
];
return (
<div className="App">
<XYPlot height={300} width={300}>
<LineSeries data={data} />
</XYPlot>
</div>
);
}
}
export default App;
```
and then on the command line interface:
```
npm run start
```
and your chart is in the browser.
Note that on line 3, I have imported the react-vis stylesheet. There are many ways to do that, and it is actually optional. But apps made with create-react-app will let you import stylesheets directly, so that's a simple way to do so.
================================================
FILE: docs/getting-started/react-vis-in-codepen.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
### Jump right in on codepen!
You can use react-vis directly on [codepen](https://codepen.io/ubervisualization/pen/BZOeZB) (or equivalent).
Each published version of react-vis is accessible via [unpkg.com](https://unpkg.com).
Add react files, and a link to the latest react-vis version - such as https://unpkg.com/react-vis@1.6.7/dist/dist.min.js.
But you can simply just use that [pen](https://codepen.io/ubervisualization/pen/BZOeZB) and take it from there.
================================================
FILE: docs/getting-started/your-first-chart.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
### Your first chart
We tried to make react-vis syntax as close to the traditional react syntax. You have components which have props and possibly children.
Every react-vis chart is inside a component called XYPlot, for which a height and a width must be specified:
```js
<XYPlot height={300} width = {300} />
```
And all the elements of a chart - series, axes, gridlines, etc. are other components, which will be children of XYPlot.
```js
const data = [
{x: 0, y: 8},
{x: 1, y: 5},
{x: 2, y: 4},
{x: 3, y: 9},
{x: 4, y: 1},
{x: 5, y: 7},
{x: 6, y: 6},
{x: 7, y: 3},
{x: 8, y: 2},
{x: 9, y: 0}
];
<XYPlot height={300} width= {300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeries data={data} />
</XYPlot>
```
And like in traditional react, order matters as components are drawn in order. In the previous example, the gridlines are drawn below the line series, but in this next example, they will be drawn above it.
```js
<XYPlot height={300} width= {300}>
<LineSeries data={data} />
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
</XYPlot>
```
================================================
FILE: docs/gradients.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Gradient
Sometimes it is useful to style our svg components using gradients. The way that this is done in React-vis is by making use of the GradientDefs component, which is a simple wrapper on the svg <defs> tag.
<!-- INJECT:"GradientExampleWithLink" -->
<!-- INJECT:"GradientPieWithLink" -->
Simply write gradient commands as you would normally as children of the GradientDefs component, and reference them from your series!
```javascript
<XYPlot width={300} height={300}>
<GradientDefs>
<linearGradient id="CoolGradient" x1="0" x2="0" y1="0" y2="1">
<stop offset="0%" stopColor="red" stopOpacity={0.4}/>
<stop offset="100%" stopColor="blue" stopOpacity={0.3} />
</linearGradient>
</GradientDefs>
<AreaSeries
color={'url(#CoolGradient)'}
data={[
{x: 1, y: 10, y0: 1},
{x: 2, y: 25, y0: 5},
{x: 3, y: 15, y0: 3}
]}/>
</XYPlot>
```
This approach works with both types of gradients (Linear and circular gradients)! The biggest gotcha is that react doesn't play nice the style prop that is normally specified on the gradientTags, so it is best to specify each property directly on the component as above.
<!-- INJECT:"TriangleExampleWithLink" -->
## Component API Reference
#### className (optional)
Type: `string`
Provide an additional class name for the series.
================================================
FILE: docs/grids.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Cartesian Grids
<!-- INJECT:"CustomAxisChartWithLink" -->
`VerticalGridLines` and `HorizontalGridLines` show a grid inside the chart. Here is a short example:
```jsx
<XYPlot
width={300}
height={300}>
<VerticalGridLines />
<HorizontalGridLines />
</XYPlot>
```
Currently both components have following properties:
#### tickTotal (optional)
Type: `number`
Total number of lines on the grid. Already set by default, depends on the size of the grid. Similar to the `tickTotal()` method of d3-axis.
#### tickValues (optional)
Type: `Array<*>`
An array of values (not coordinates!) that where the lines should be shown. Similar to the `tickValues()` method of d3-axis.
#### left (optional)
Type: `number`
Horizontal position of the grid lines in pixels. **Already set by default**, but can be overridden by the user.
#### top (optional)
Type: `number`
Vertical position of the grid lines in pixels. **Already set by default**, but can be overridden by the user.
#### width (optional)
Type: `number`
Width of the grid lines in pixels. **Already set by default**, but can be overridden by the user.
#### height (optional)
Type: `number`
Height of the grid lines in pixels. **Already set by default**, but can be overridden by the user.
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### className (optional)
Type: `String`
A class name to apply to the gridlines.
#### style (optional)
Type: `object`
An CSS object that will style these gridlines.
## Polar Grids
<!-- INJECT:"FauxScatterplotChartWithLink" -->
`CircularGridLines` allows you to draw circular grid lines. This might be useful for a polar scatterplot, as shown above, or a radar chart or any of a wide host of additional contexts. Usage example
```
<XYPlot
margin={margin}
xDomain={[-3, 3]}
yDomain={[-3, 3]}
width={WIDTH}
height={HEIGHT}>
<CircularGridLines />
<XAxis top={(HEIGHT - margin.top) / 2}/>
<YAxis left={(WIDTH - margin.left - margin.right) / 2}/>
<MarkSeries
strokeWidth={2}
sizeRange={[5, 15]}
data={data.map(row => ({
...row,
x: Math.cos(row.theta) * row.r,
y: Math.sin(row.theta) * row.r
}))}/>
</XYPlot>
```
It can often be useful to specify the x and y domains on the surrounding XYPLot. CircularGridLines accepts all of the same props as the cartesian grids, but also accepts two more:
#### centerX (optional)
Type: `number`
The left-right value in coordinates of where the circles should be centered.
#### centerY (optional)
Type: `number`
The top-bottom value in coordinates of where the circles should be centered.
#### rRange (optional)
Type:[`number`, `number`]
This allows users to specify the exact pixel range over which they wish their rings to appear.
#### style (optional)
Type: `object`
An CSS object that will style these gridlines. See [style](style.md)
================================================
FILE: docs/heatmap-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## HeatmapSeries:
<!-- INJECT:"HeatmapChartWithLink" -->
The heatmap series enables users to create a 2d binning of the plane. These series often come in useful in situations when you might be using a scatterplot, but have too many rows of data for the reader to easily understand what is going on. So arises HeatmapSeries!
```javascript
<XYPlot
width={300}
height={300}>
<XAxis />
<YAxis />
<HeatmapSeries
className="heatmap-series-example"
data={myData}/>
</XYPlot>
```
Another way to think of the heatmap, is as a 2D histogram, where each cell is colored by it's value rather than height-ed or width-ed.
#### Color in heatmaps
<!-- INJECT:"LabeledHeatmap" -->
The Heatmap's color can be manipulated in two data driven ways, first by setting the setting colorRange on the series
```javascript
<HeatmapSeries
className="heatmap-series-example"
colorRange={["red", "blue"]}
data={myData}/>
```
Which assumes that each row of data has a number specifying it's color attribute. Alternatively you can change the scale type of color to allow yourself to specify color of the cell directly:
```javascript
<HeatmapSeries
colorType="literal"
data={[
{x: 1, y: 0, color: "#f00"},
{x: 1, y: 5, color: "#f00"},
{x: 1, y: 10, color: "#0f0"}
]}/>
```
The color can also usefully be set using a color accessor,
```javascript
<HeatmapSeries
colorType="literal"
getColor={d => d.color === 'bad' ? '#f00' : '#0f0'}
data={[
{x: 1, y: 0, color: 'bad'},
{x: 1, y: 5, color: 'bad'},
{x: 1, y: 10, color: 'good'}
]}/>
```
Finally, the color could also be specified on the series itself, however that would probably not be the best use of a heatmap as it would color every cell in the series the same color.
## Data format Reference
Like other series, it is required that the data be an array of objects, formatted like so:
```javascript
const myData = [
{x: 1, y: 0, color: 10},
{x: 1, y: 5, color: 10},
{x: 1, y: 10, color: 6},
{x: 1, y: 15, color: 7},
{x: 2, y: 0, color: 12},
{x: 2, y: 5, color: 2},
{x: 2, y: 10, color: 1},
{x: 2, y: 15, color: 12},
{x: 3, y: 0, color: 9},
{x: 3, y: 5, color: 2},
{x: 3, y: 10, color: 6},
{x: 3, y: 15, color: 12}
]
```
Where x and y are required quantities and additional properties may be stapled on.
#### x
Type: `number`
The x position in coordinates of the box to be used.
#### y
Type: `number`
The y position in coordinates of the box to be used.
#### color (optional)
Type: `string|number`
The color of a box in the series. By default the color is interpreted as number to be scaled to a color range. This can be over-ridden by providing the prop colorType="literal" to the series itself. This property can also be defined on the series level.
## Series API Reference
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### color
Type: `string|number`
The color for all elements in the series, this property will be over-ridden by color specified in the data attribute. See [colors](colors.md)
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### data
Type: `Array<Object>`
Array of data for the series. See above data format reference.
#### fill
Type: `string|number`
The inner color for all elements in the series, this property will be over-ridden by color specified in the data attribute. See [colors](colors.md)
#### opacity
Type: `string|number`
The opacity for all elements in the series, this property will be over-ridden by color specified in the data attribute.
#### stroke
Type: `string|number`
The outer color for all elements in the series, this property will be over-ridden by color specified in the data attribute. See [colors](colors.md)
#### style
Type: `object`
A list of CSS properties to style the series outside of the explicitly set properties. Note that it will override all other properties (ie fill, stroke, opacity, color). See [style](style.md)
## Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onValueClick (optional)
Type: `function(d, {event})`
`click` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
#### onValueMouseOver (optional)
Type: `function(d, {event})`
`mouseover` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
#### onValueMouseOut (optional)
Type: `function(d, {event})`
`mouseout` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
#### onValueRightClick (optional)
Type: `function(d, {event})`
`right-click` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
================================================
FILE: docs/hexbin-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## HexbinSeries
The hexbin series enables the easy creation of aggregated and binned data. This can be useful if you have a lot of overlapping data or if you simply want to provide a courser representation of data to your user. Unlike many other series this one performs the aggregation computation, simply provide a scatterplot like collection of data (points in linear x and y space) and your off!
<!-- INJECT:"HexbinSizeExampleWithLink" -->
Points are binned into hexagonal containers, which are then rendered as svg paths. These svg hexes can encode their counts through color and size! It can be particularly effective to pair this series with a [border](borders.md) element.
```javascript
<XYPlot
xDomain={[40, 100]}
yDomain={[1.5, 8]}
width={300}
getX={d => d.waiting}
getY={d => d.eruptions}
onMouseLeave={() => this.setState({hoveredNode: null})}
height={300}>
<HexbinSeries
animation
className="hexbin-example"
style={{
stroke: '#125C77',
strokeLinejoin: 'round'
}}
onValueMouseOver={d => this.setState({hoveredNode: d})}
colorRange={['white', 'black']}
radius={radius}
data={data}/>
</XYPlot>
```
<!-- INJECT:"HexHeatmapWithLink" -->
## API reference
#### animation (optional)
Type: `Boolean`
See the [Animation](animation.md)'s `animation` section for more information.
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### countDomain (optional)
Type: `Array of two numbers`
Provide the specific counts to the hexagon binning between. If not provided defaults to [0, <max number of cells in a binning>].
#### colorRange (optional)
Type: `Array of two strings`
Provide the colors for hexagons to interpolate between.
#### data
Type: `Array<Object>`
Array of data for the series. Follows the usual pattern of an array of objects formatted with x and y coordinates, [{x: 0, y: 0}, ...].
#### radius
Type: `Number`
The maximum size of the hexagon, specified in pixels.
#### style
Type: `object`
A list of CSS properties to style the series outside of the explicitly set properties. These style elements are applied directly to each individual hexagon. Note that it will override all other properties (ie fill, stroke, opacity, color). See [style](style.md) for more information.
#### sizeHexagonsWithCount
Type: `Boolean`
Size the hexagons based on the number of values in side of the hexagon. Ranges between [0, <radius prop>].
#### xOffset (optional)
Type: `Number`
Default: `0`
Size of aggregation offset form base value, this enables fine tuning along the x axis.
#### yOffset (optional)
Type: `Number`
Default: `0`
Size of aggregation offset form base value, this enables fine tuning along the y axis.
## Interaction handlers
#### onValueClick
Type: `function`
Default: none
This handler is triggered either when the user clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<HexbinSeries
...
onValueClick={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
It is very important to note that data point is specified in pixels NOT in data coordinates. This can have serious consequences for how interactivity works. See the HexHeatmap example above for a worked example.
#### onValueMouseOut
Type: `function`
Default: none
This handler is triggered either when the user's mouse leaves a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<HexbinSeries
...
onValueMouseOut={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
It is very important to note that data point is specified in pixels NOT in data coordinates. This can have serious consequences for how interactivity works. See the HexHeatmap example above for a worked example.
#### onValueMouseOver
Type: `function`
Default: none
This handler is triggered either when the user's mouse enters a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<HexbinSeries
...
onValueMouseOver={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
It is very important to note that data point is specified in pixels NOT in data coordinates. This can have serious consequences for how interactivity works. See the HexHeatmap example above for a worked example.
#### onValueRightClick
Type: `function`
Default: none
This handler is triggered either when the user right-clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<HexbinSeries
...
onValueRightClick={(datapoint, event)=>{
// does something on right click
// you can access the value of the event
}}
```
It is very important to note that data point is specified in pixels NOT in data coordinates. This can have serious consequences for how interactivity works. See the HexHeatmap example above for a worked example.
================================================
FILE: docs/highlight.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Highlight
The highlight component enables use interaction via direct manipulation of chart through dragging and brushing. This component is stateful and can maintain a notion of a dragged box. It can be applied either in two directions or in one!
<!-- INJECT:"ZoomableChartExampleWithLink" -->
It is quite easy to drop this functionality into an existing chart, for example:
```jsx
<XYPlot
width={300}
height={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<MarkSeries
className="mark-series-example"
strokeWidth={2}
opacity="0.8"
sizeRange={[5, 15]}
colorType="literal"
getColor={d => highlightPoint(d) ? '#EF5D28' : '#12939A'}
data={data}/>
<Highlight
drag
enableX={false}
onBrush={area => this.setState({filter: area})}
onDrag={area => this.setState({filter: area})}/>
</XYPlot>
```
An important point to notice here is that direction responsiveness (the thing that makes calling on brush and on drag return meaningful values) is OPT OUT. VERY IMPORTANT! See examples for more details.
<!-- INJECT:"DragableChartExampleWithLink" -->
In drag mode (activated by including the prop drag) you are able to drag a selection box around in the chart space. When putting this shape you first execute a drag action to define the size of the box and then are able to move it around. See above and below for examples.
<!-- INJECT:"BidirectionDragChartWithLink" -->
When designing your listeners it is important to be mindful the lifecycle of this component as there are a lot of edge cases. To wit, if you NOT using drag mode then the life cycle will always be brushStart > brush > brushEnd. While if you are in drag mode it will be brushStart > brush > brushEnd when you are making the box and then dragStart > drag > dragEnd while dragging the box.
The biggest gotchas revolve around click to clear type events. In order to implement this, make sure to include an on End listener to set update your state. In click events there isn't a middle state between start and end because your user does not move the mouse. Be aware! See the code for the examples for more details.
It is important to note that brushing over non-continuous scales is not supported! Specifically this means that you can not brush over category or ordinal scales.
## API Reference
<!-- INJECT:"SelectionPlotExampleWithLink" -->
#### className (optional)
Type: `String`
Add css class to Voronoi container
#### drag (optional)
Type: `Boolean`
Enable dragging interactions
#### enableX (optional)
Type: `Boolean`
Defaults to `true`
Enable brushing and dragging in the x direction
#### enableY (optional)
Type: `Boolean`
Defaults to `true`
Enable brushing and dragging in the y direction
#### highlightX (optional)
Type: `String or Number`
Defaults to left edge
Position in x coordinate space to place the left edge of the highlight bar.
#### highlightY (optional)
Type: `String or Number`
Defaults to top edge
Position in y coordinate space to place the top edge of the highlight bar.
#### highlightHeight (optional)
Type: `Number`
Defaults to full height
The height of highlight bar in pixels.
#### highlightWidth (optional)
Type: `Number`
Defaults to full width
The width of highlight bar in pixels.
#### onBrushStart (optional)
Type: `Function`
Function called on the start of brushing.
#### onBrush (optional)
Type: `Function`
Function called on the start of brushing.
#### onBrushEnd (optional)
Type: `Function`
Function called on the start of brushing.
#### onDragStart (optional)
Type: `Function`
Function called on the start of dragging.
#### onDrag (optional)
Type: `Function`
Function called on the start of dragging.
#### onDragEnd (optional)
Type: `Function`
Function called on the start of dragging.
================================================
FILE: docs/hint.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Hint
<!-- INJECT:"DynamicComplexEdgeHintsWithLink" -->
`Hint` is a simple component that shows tooltips inside the chart. `Hint` places itself to the place which is set by your data. In case a custom representation is needed, the component is also able to wrap custom JSX. Here is a short example:
```jsx
<Hint value={myValue}>
<div style={{background: 'black'}}>
<h3>Value of hint</h3>
<p>{myValue.x}</p>
</div>
</Hint>
```
<!-- INJECT:"DynamicHintsWithLink" -->
<!-- INJECT:"DynamicSimpleEdgeHintsWithLink" -->
Hints can be placed in two ways
a) around a data point in one of four quadrants (imagine the point bisected
by two axes -vertical, horizontal- creating 4 quadrants around a data
point).
b) Pin to an edge of chart/plot area and position along that edge
using data point's other dimension value.
<!-- INJECT:"StaticHintsWithLink" -->
#### value
Type: `Object`
The data point to show the value at. Hint component will automatically find the place where the data point is and put the hint there.
#### format (optional)
Type: `function`
Format function for a tooltip. Receives the data point, should return an array of objects containing `title` and `value` properties. Each item of an array is shown on a separate line by default.
_Note: please pass custom contents in case if you need different look for the hint._
#### align (optional)
Type: `Object`
Default: `{horizontal: 'auto', vertical: 'auto'}`
The way to align the hint inside the chart. Within the object, specify the horizontal alignment `(auto|left|right)` and the vertical alignment `(auto|top|bottom)`. For example, to see a "conventional" hint alignment: `{vertical: 'top', horizontal: 'left'}`.
<!-- INJECT:"DynamicSimpleTopEdgeHintsWithLink" -->
#### className (optional)
Type: `String`
A class name to apply to the hint container.
#### style (optional)
Type: `Object`
You can pass a style object to your Hint component to apply your own styles. See [style](style.md)
```jsx
<Hint value={value} style={{fontSize: 14}}/>
```
Style is a composite component, and individual parts of it can receive different parts.
The different parts are: content, row, title, value. To style a specific part, you can pass an object to the property with that name.
```jsx
<Hint value={value} style={{
fontSize: 14,
text: {
display: 'none'
},
value: {
color: 'red'
}
}}/>
```
<!-- INJECT:"DynamicProgrammaticRightEdgeHintsWithLink" -->
================================================
FILE: docs/interaction.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Interaction
Interaction in react-vis happens through _event handlers_ which are triggered by certain interactive events, such as mouse movement or clicks.
These events can be implemented either at the XYPlot level or at the plot level:
* At the plot level: this is for events that affect the whole chart. The mouse events that can be captured are: down, enter, leave, move. For instance, you can use `onMouseLeave` to reset the visualization when the user's mouse cursor is no longer on it.
* At the series level, there are three kind of handlers.
* Some series (arc, bar, heatmap, label, mark, rect) support interaction at the individual mark level. These series have onValueClick, onValueMouseOut and onValueMouseOver, which, in addition to passing the event, also pass the datapoint corresponding to the mark with which the user interacted.
* The above series, and some others (area, line, polygon) support interaction at the series level. These series have handlers like onSeriesClick, onSeriesMouseOut, onSeriesMouseOver. Those handlers only pass the mouseevent that triggered them.
* Finally, all series support onNearestX and onNearestXY. These two special handlers are triggered when the user moves their mouse on the plot area, and can access the datapoint of the nearest mark, in addition to the mouse event.
* You can also interact with your plot through specialized components, such as the [highlight](highlight.md) for brushing and dragging or the [voronoi](voronoi.md) for mouse overs.
### What handlers are implemented by series type
| Series | Proximity handlers (onNearestX, onNearestY) | series level handlers (onSeriesClick, onSeriesRightClick, onSeriesMouseOver, onSeriesMouseOut) | mark-level handlers (onValueClick, onValueRightClick, onValueMouseOver, onValueMouseOut) |
|---------------------------------------|---------------------------------------------|------------------------------------------------------------------------------------------------|------------------------------------------------------------------------------------------|
| [ArcSeries](arc-series.md) | ✔︎ | ✔︎ | ✔︎ |
| [AreaSeries](area-series.md) | ✔︎ | ✔︎ | |
| [BarSeries](bar-series.md) | ✔︎ | ✔︎ | ✔︎ |
| [ContourSeries](contour-series.md) | ✔︎ | | |
| [HeatmapSeries](heatmap-series.md) | ✔︎ | ✔︎ | ✔︎ |
| [HexbinSeries](hexbin-series.md) | ✔︎ | ✔︎ | ✔︎ |
| [LabelSeries](label-series.md) | ✔︎ | ✔︎ | ✔︎ |
| [LineSeries](line-series.md) | ✔︎ | ✔︎ | |
| [LineMarkSeries](line-mark-series.md) | ✔︎ | ✔︎ | ✔︎ |
| [MarkSeries](mark-series.md) | ✔︎ | ✔︎ | ✔︎ |
| [PolygonSeries](polygon-series.md) | ✔︎ | ✔︎ | |
| [RectSeries](rect-series.md) | ✔︎ | ✔︎ | ✔︎ |
| [WhiskerSeries](whisker-series.md) | ✔︎ | ✔︎ | ✔︎ |
How to read this table:
For some series types (Arc, Bar, Rect, Label, Mark) - onValueClick, onValueMouseOut and onValueMouseOver handlers will work at the mark type. When the user clicks on the series, or moves their mouse on our out of it, an event handler will be fired and will pass the datapoint corresponding to the mark that the user interacted with.
The other series types (area, line, polygon) have an onSeriesClick, onSeriesMouseOut and onSeriesMouseOver respectively. These event handler will work at the series level and will not pass a specific datapoint.
In all cases, onNearestX and onNearestXY can be implemented at the series level, but when fired, they will also pass a specific datapoint.
### Note
- the contour series doesn't support interaction other than onNearestX or onNearestXY
- whenever the datapoint-level handlers are supported, they can also catch all the events happening at the series level.
## API
### XYPlot event handlers
#### onMouseDown
Type: `function`
Default: none
This event handler is triggered whenever the mousebutton of the user is down while their mouse cursor is in the plot area. It passes a mouse event.
#### onMouseUp
Type: `function`
Default: none
This event handler is triggered whenever the user release the mouse button while their mouse cursor is in the plot area. It passes a mouse event.
#### onMouseEnter
Type: `function`
Default: none
This event handler is triggered whenever the mouse of the user enters the plot area. It passes a mouse event.
#### onMouseLeave
Type: `function`
Default: none
This event handler is triggered whenever the mouse of the user exits the plot area. It passes a mouse event.
#### onMouseMove
Type: `function`
Default: none
This event handler is triggered whenever the mouse of the user moves while in the plot area. It passes a mouse event.
#### onTouchStart
Type: `function`
The event handler is triggered whenever the finger of the user first touches the plot area. It passes a touch event.
#### onTouchMove
Type: `function`
This event handler is triggered whenever the finger of the user moves while in the plot area. It passes a touch event.
#### onTouchEnd
Type: `function`
This event handler is triggered when a touch point of the user lifts off the plot area. It passes a touch event.
#### onTouchCancel
Type: `function`
This event handler is triggered when a touch point of the user has been disrupted in an implementation-specific manner
### Series event handlers
#### onNearestX
Type: `function`
Default: none
This handler fires when the user moves their mouse somewhere on the plot. The handler fires a function that takes two argument: the datapoint with the x value closest to the cursor or touch point, and a second object containing: the `innerX` value (x coordinates of the cursor relative to the left of the plot), `index` (position of this datapoint in the dataset, where 0 is the first datapoint, 1 is the second, etc) plus the actual event as `event`.
onNearestX is at the series level, not at the plot level. If you attach onNearestX to several series, each time the user moves their mouse or touch point, each onNearestX handler will be triggered once with the closest mark of each series.
```jsx
<LineSeries
...
onNearestX={(datapoint, event)=>{
// does something on mouseover
// you can access the value of the event
}}
```
#### onNearestXY
Type: `function`
Default: none
This handler is nearly identical to `onNearestX`. The difference is that it will return datapoint corresponding to the mark closest to the cursor or touch point, not just the one with the closest x coordinate.
onNearestXY will supersede onNearestX, so if both exist for the same series, only onNearestXY will be fired.
This handler fires when the user moves their mouse or touch point somewhere on the plot. The handler fires a function that takes two argument: the datapoint which is closest to the cursor or touch point, and a second object containing: the `innerX` and `innerY` value (x, y coordinates of the cursor or touch point relative to the top left of the plot), `index` (position of this datapoint in the dataset, where 0 is the first datapoint, 1 is the second, etc) plus the actual event as `event`.
onNearestXY is at the series level, not at the plot level. If you attach onNearestX to several series, each time the user moves their mouse or touch point, each onNearestX handler will be triggered once with the closest mark of each series.
```jsx
<LineSeries
...
onNearestX={(datapoint, event)=>{
// does something on mouseover
// you can access the value of the event
}}
```
#### onSeriesClick
Type: `function`
Default: none
This handler fires when the user clicks somewhere on a series, and provides the corresponding event. Unlike onValueClick, it doesn't pass a specific datapoint.
```jsx
<AreaSeries
...
onSeriesClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onSeriesRightClick
Type: `function`
Default: none
This handler fires when the user right-clicks somewhere on a series, and provides the corresponding event. Unlike onValueRightClick, it doesn't pass a specific datapoint.
```jsx
<AreaSeries
...
onSeriesRightClick={(event)=>{
// does something on right click
// you can access the value of the event
}}
```
#### onSeriesMouseOut
Type: `function`
Default: none
This handler fires when the user's mouse cursor leaves a series, and provides the corresponding event. Unlike onValueMouseOut, it doesn't pass a specific datapoint.
```jsx
<AreaSeries
...
onSeriesMouseOut={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesMouseOver
Type: `function`
Default: none
This handler fires when the user mouses over a series, and provides the corresponding event. Unlike onMouseOver, it doesn't pass a specific datapoint.
```jsx
<AreaSeries
...
onSeriesMouseOver={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onValueClick
Type: `function`
Default: none
This handler is triggered either when the user clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<MarkSeries
...
onValueClick={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueRightClick
Type: `function`
Default: none
This handler is triggered either when the user right-clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<MarkSeries
...
onValueRightClick={(datapoint, event)=>{
// does something on right click
// you can access the value of the event
}}
```
#### onValueMouseOut
Type: `function`
Default: none
This handler is triggered either when the user's mouse leaves a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<MarkSeries
...
onValueMouseOut={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOver
Type: `function`
Default: none
This handler is triggered either when the user's mouse enters a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<MarkSeries
...
onValueMouseOver={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
## Interaction strategies and examples
### Interaction and hints or crosshairs
This was the first use case we built for interaction. We have one line chart on a plot, we want to show the value of the nearest mark to the cursor, without requiring the user to actually be over the plot proper.
<!-- INJECT:"DynamicCrosshairWithLink" -->
```jsx
const DATA = [
[
{x: 1, y: 10},
{x: 2, y: 7},
{x: 3, y: 15}
],
[
{x: 1, y: 20},
{x: 2, y: 5},
{x: 3, y: 15}
]
];
export default class DynamicCrosshair extends React.Component {
constructor(props) {
super(props);
this.state = {
crosshairValues: []
};
}
render() {
return (
<XYPlot
onMouseLeave={() => this.setState({crosshairValues: []})}
width={300}
height={300}>
<VerticalGridLines />
<HorizontalGridLines />
<XAxis />
<YAxis />
<LineSeries
onNearestX={(value, {index}) =>
this.setState({crosshairValues: DATA.map(d => d[index])})}
data={DATA[0]}/>
<LineSeries
data={DATA[1]}/>
<Crosshair values={this.state.crosshairValues}/>
</XYPlot>
);
}
}
```
A few notes:
- here, we are using the state to record the position of the crosshair. So, we're using the class syntax vs the React functional API.
- We use onMouseLeave, at the plot level, to reset the visualization if the user's mouse cursor leaves the plot area.
- There are 2 LineSeries components, but we only outfit one of them with a onNearestX handler.
- In that handler, we get the datapoint value as first argument, and the index part of the object as 2nd argument. Actually, we only care about that index value. We're using it to generate values for the crosshair.
- Having the handler on the 2nd LineSeries would have the exact same effect. We would change the state twice, to the same value. This is why it's not useful to call it several times.
### Mousing over near scatterplot marks
<!-- INJECT:"ScatterPlotOnNearestXYWithLink" -->
```jsx
class ScatterPlotOnNearestXY extends Component {
constructor() {
super();
this.state = {index: null};
}
render() {
const {index} = this.state;
const data = scatterPlotData.map((d, i) => ({...d, color: i === index ? 1 : 0}));
return <XYPlot
colorDomain={[0, 1]}
onMouseLeave={() => this.setState({index: null})}
>
<MarkSeries
data={data}
stroke="white"
onNearestXY={(datapoint, {index}) => this.setState({index})}
/>
</XYPlot>
}
}
```
Notes:
- Here, we could have used the onMouseOver prop but that would require the user to move their mouse on each dot. But those dots are small! it would be more comfortable to select whichever dot is the nearest from the cursor.
- Again, we're going to use the state for interaction, so we use the class syntax.
- Each time we're rendering this component, we're going to regenerate a dataset that takes the state into account. The selected datapoint will have its color property set to 1, for others it will be 0.
- the colorDomain of XYPlot will be set to [0, 1]. This is because else, when no point is selected, the colorDomain would be [0, 0] and all dots would have the color of the higher bound (light orange).
- As above, when the mouse leaves the plot, the state of the visualization is reset.
- As above, in the onNearestXY handler, we're actually only interested in the index part of the second argument.
### Mousing over series - the 2nd series group option
<!-- INJECT:"LineChartMouseOverSeriesWithLink" -->
```jsx
class LineChartMouseOverSeries extends Component {
constructor() {
super();
this.state = {index: null};
}
render() {
const {index} = this.state;
return <XYPlot {...defaultProps}
onMouseLeave={() => this.setState({index: null})}
>
{lineData.map((d, i) => (<LineSeries
data={d} key={`${i}`} stroke={i === index ? "orange" : undefined}
/>))}
{lineData.map((d, i) => (<LineSeries
data={d} key={`${i}-mouseover`}
onSeriesMouseOut={() => this.setState({index: null})}
onSeriesMouseOver={() => this.setState({index: i})}
strokeWidth={10} stroke="transparent"}
/>))}
</XYPlot>
}
}
```
Here, we are going to explore 2 strategies to handle highlighting one line series among several on screen.
We could do that with a simple onSeriesMouseOver but, again, that would require mousing over exactly on a line series, which are notoriously narrow.
Instead, we create a second set of LineSeries whose only purpose is to handle interaction. That second set of LineSeries is thicker (here, the stroke width is set at a generous 10px) and is also transparent. In the embedded example, I'm highlighting each lineSeries as it is moused over, but I'm not reflecting this on the snippet of code.
Here, lineData is an array of arrays. The LineSeries are created by mapping over that array, which is quite common.
When creating the LineSeries for mouseover, I write:
```jsx
{lineData.map((d, i) => (<LineSeries
...
onSeriesMouseOver={() => this.setState({index: i})}
```
In the onSeriesMouseOver handler, I don't pass any argument in the handler proper, but I'm using the index of the array from the mapping method. So, for the first LineSeries, that value is 0, then 1, then 2.
### Mousing over series - the extra scatterplot option
<!-- INJECT:"LineChartMouseOverXYWithLink" -->
```jsx
const allData = lineData.reduce((prev, curr, i) => {
return [...prev, ...curr.map((d) => ({...d, index: i}))]
}, []);
class LineChartMouseOverXY extends Component {
constructor() {
super();
this.state = {index: null};
}
render() {
const {index} = this.state;
return <XYPlot {...defaultProps}
onMouseLeave={() => this.setState({
highlightedSeries: null,
pointUsed: null
})}
>
{lineData.map((d, i) => (<LineSeries
data={d} key={`${i}`} stroke={i === index ? "orange" : undefined}
/>))}
<MarkSeries
data={allData}
color="transparent"
size={10}
onNearestXY={({index}) => this.setState({index})}
/>
</XYPlot>
}
}
```
Here's a slightly different strategy to obtain a similar effect.
Prior to rendering this component, I've created an "allData" dataset which is a flat array of all the datapoints in the 3 lineSeries' datasets, only we've added to each of these datapoints an extra property, index, which will be 0, 1 or 2 depending from which of the 3 dataset each datapoint comes.
So allData will be an array of objects of the form: {x: ..., y: ..., index: ...}. Index, the last property, will be ignored by scales and won't affect the rendering in any way.
Then, on top of our 3 lineSeries, we're adding a MarkSeries with an onNearestXY handler, just as 2 examples above.
The first argument of the onNearestXY handler is the datapoint proper. So again: an object of the form: {x:... ,y:..., index:...}. While the index property was not taken into account for rendering, it is definitely part of the first argument. Actually, it's the only part that we care about, so we just write ({index}) =>.
In the embedded version of this example, I'm highlighting the mark that triggers onNearestXY, however I haven't added this in the snippet of code above.
### Linked Charts
<!-- INJECT:"LinkedChartsWithLink" -->
```jsx
class LinkedCharts extends Component {
constructor() {
super();
this.state = {index: null};
this.handleMouseOver = this.handleMouseOver.bind(this);
}
handleMouseOver(index) {
this.setState({index});
}
render() {
const {index} = this.state;
return (<div style={{display: 'flex'}}>
{lineData.map((d, i) => (<div key={i}>
<LineChart
data={d}
index={index}
handleMouseOver={this.handleMouseOver} />
</div>))}
</div>);
}
}
function LineChart({data, index, handleMouseOver}) {
return (<XYPlot
yDomain={[0, 10]}
onMouseLeave={() => handleMouseOver(null)}
>
<LineSeries
data={data}
onNearestX={(datapoint, {index}) => handleMouseOver(index)} />
{index === null ? null : <LineSeries
data={[{x: index, y: 0}, {x: index, y: 10}]}
opacity={0.5} />
}
{index === null ? null : <MarkSeries
data={[data[index]}]}
stroke="white" />
}
</XYPlot>);
}
```
More often than not, you want to be able to handle an action that happened in one of the charts and reflect it in different parts of your app, i.e. outside the chart.
This is a common React problem, and we're going to deal with it in a proven React way - with a container that has a state, and which will pass this state and actions to presentation components.
These presentation components will be represented according to the state of that container, and will be able to fire actions that will impact it.
Our container is a simple class. We create this method, handleMouseOver, that we'll have to bind to the container because we're going to pass it down. When we're doing that, we'll want that method to affect the state of the container.
Our container will create three "LineChart" components, to which it will pass the dataset of a line (i.e. an array of {x, y} objects, the contents of the state - which is simply an index value, if there has been a mouseOver action, or null if there hasn't been - and our handleMouseOver method.
Inside the LineChart components, we'll use onMouseLeave and onNearestX to trigger the handler, as in the examples above. So, if the user mouses over any of these line charts, this changes the state of the container above, which will trickle down to all 3 components again.
Finally, we create a dynamic line and dot gizmo to represent where the user is mousing over. We can easily generate a dataset for that, since index is the x value of where both the line and the dot should be.
================================================
FILE: docs/label-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## LabelSeries:
<!-- INJECT:"LabelSeriesExampleWithLink" -->
Sometimes you just need to write on your data, and labelSeries has your back. This simple series has a similar API as the markSeries except it adds a label property to each of the rows. This label is then rendered as part of the svg tree.
```javascript
<XYPlot width={300} height={300}>
<LabelSeries
animation
allowOffsetToBeReversed
data={data} />
</XYPlot>
```
This can be useful for annotating points, as above, or in labeling wedges as (as in the radial chart).
## Data format Reference
Like other series the `labelSeries` requires the data be formatted as an array of objects with several required keys and several options ones. Here's an example
```javascript
const myData = [
{x: 0, y: 0, label: 'woah!', style: {fontSize: 10}},
{x: 1, y: 0, label: 'dope city', yOffset: 5},
{x: 0, y: 1, label: 'cool Dog friend', xOffset: 5, rotation: 34}
]
```
The above would render three points with labels as suggested!
#### x
Type: `number`
The x position in coordinates of the label.
#### y
Type: `number`
The y position in coordinates of the label.
#### label
Type: `string`
The actual text to be offered.
#### xOffset
Type: `number`
A number in pixels for the label to be offset from the x position specified on the row.
#### yOffset
Type: `number`
A number in pixels for the label to be offset from the y position specified on the row.
#### rotation
Type: `number`
Number in degrees for the text to be rotated about its xy point.
## Series API Reference
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### allowOffsetToBeReversed (optional)
The allows the offset specified on the data rows to flipped if the label is too close to an edge. This allows you to make sure your labels never get randomly clipped by going offscreen.
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### data
Type: `Array<Object>`
Array of data for the series. See above data format reference.
#### style
Type: `object`
SVG text objects (which is what the labelSeries is made up of) accept a ton of different styles, so rather than prescribe every single one we just accept a general grab bag pf the styles. check out the [mozilla](https://developer.mozilla.org/en-US/docs/Web/SVG/Element/text) page for more details.
#### labelAnchorX
Type: `string`
This attribute is used to align (start-, middle- or end-alignment) the label text horizontally relative to the data point. (Sets the text-anchor attribute for the element https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/text-anchor)
#### labelAnchorY
Type: `string`
This attribute is used to align the label text vertically relative to the datapoint. (Sets the dominant-baseline attribute for the element https://developer.mozilla.org/en-US/docs/Web/SVG/Attribute/dominant-baseline)
## Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onValueClick (optional)
Type: `function(d, {event})`
`click` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
#### onValueMouseOver (optional)
Type: `function(d, {event})`
`mouseover` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
#### onValueMouseOut (optional)
Type: `function(d, {event})`
`mouseout` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
#### onValueRightClick (optional)
Type: `function(d, {event})`
`right-click` event handler for the elements corresponding separate data points. First argument received is, `d`, the relevant data point, and second an object with the only `event` property.
================================================
FILE: docs/legends.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## Legends
<!-- INJECT:"HorizontalDiscreteColorLegendExampleWithLink" -->
Currently following types of legends are supported:
- for colors:
* DiscreteColorLegend (for a fixed number of colors, good for series);
* SearchableDiscreteColorLegend) (same as DiscreteColorLegend, but with search on top);
* ContinuousColorLegend (for gradually changing colors);
- for sizes:
* ContinuousSizeLegend (for gradually changing size).
## Color legends
### DiscreteColorLegend
<!-- INJECT:"VerticalDiscreteColorLegendExampleWithLink" -->
#### items (required)
Type: `Array<string|{title: string|react element, color: String, strokeDasharray: string, strokeStyle: string, strokeWidth: number, disabled: boolean}|react element>`
Array of items that should be shown on the legend. The array should consist from either objects (`title`, optional `color`, optional `strokeDasharray`, optional `strokeStyle`, optional `strokeWidth`, and optional `disabled` flag) or strings (treated as titles). The stroke properties should match those in your series (see [line series](line-mark-series.md))
#### orientation (optional)
Type: `(vertical|horizontal)`
Default: `'vertical'`
String either `horizontal` or `vertical` representing which direction the legend elements are rendered.
#### onItemClick
Type: `function(Object, number): void`
Default: noop
Click callback for the item in the list. Gets the clicked item and its index as parameters.
#### onItemMouseEnter
Type: `function`
Default: noop
This handler is triggered either when the user's mouse enters a legend item.
The handler passes three arguments, the corresponding item, legend index and the actual event.
```jsx
<DiscreteColorLegend
...
onItemMouseEnter={(item, index, event) => {
// does something on mouse enter
// you can access the value of the event
}}
```
#### onItemMouseLeave
Type: `function`
Default: noop
This handler is triggered either when the user's mouse leaves a legend item.
The handler passes three arguments, the corresponding item, legend index and the actual event.
```jsx
<DiscreteColorLegend
...
onItemMouseLeave={(item, index, event) => {
// does something on mouse leave
// you can access the value of the event
}}
```
#### width
Type: `number`
Outer width of the component. Default width is not set.
#### height
Type: `number`
Outer height of the component. Default is not set, the component stretches with the items added into it.
### SearchableDiscreteColorLegend
`SearchableDiscreteColorLegend` allows the user to perform search among the items.
<!-- INJECT:"SearchableDiscreteColorLegendExampleWithLink" -->
Its API includes the API of `DiscreteColorLegend`, but adds several search-related items:
#### searchText (optional)
Type: `string`
Default: `''`
#### searchFn (optional)
Type: `function(Array, string):Array`
Function that is should filter out the unnecessary items by the given initial array of items and the search string. By default the function returns an array of items which titles contain a string.
#### searchPlaceholder (optional)
Type: `string`
Default: `''`
Placeholder for an search input field.
#### onSearchChange (optional)
Type: `function(string):void`
Event handler for the change of the input field. The handler is triggered with the search field value as a parameter.
#### onItemMouseEnter
Type: `function`
Default: noop
This handler is triggered either when the user's mouse enters a legend item.
The handler passes three arguments, the corresponding item, legend index and the actual event.
```jsx
<SearchableDiscreteColorLegend
...
onItemMouseEnter={(item, index, event) => {
// does something on mouse enter
// you can access the value of the event
}}
```
#### onItemMouseLeave
Type: `function`
Default: noop
This handler is triggered either when the user's mouse leaves a legend item.
The handler passes three arguments, the corresponding item, legend index and the actual event.
```jsx
<SearchableDiscreteColorLegend
...
onItemMouseLeave={(item, index, event) => {
// does something on mouse leave
// you can access the value of the event
}}
```
### ContinuousColorLegend
<!-- INJECT:"ContinuousColorLegendExampleWithLink" -->
#### startTitle
Type: `string|number`
The title that is shown in the beginning of the legend.
#### midTitle
Type: `string|number`
The title that is show in the middle of the legend.
#### endTitle
Type: `string|number`
The title that is show in the end of the legend.
#### startColor (optional)
Type: `string`
The initial color of the bar
#### endColor (optional)
Type: `string`
The end color of the bar.
#### midColor (optional)
Type: `string`
The middle color of the bar.
#### width (optional)
Type: `number`
Outer width of the component.
#### height (optional)
Type: `number`
Outer height of the component.
## Size Legends
### ContinuousSizeLegend
<!-- INJECT:"ContinuousSizeLegendExampleWithLink" -->
#### startTitle
Type: `string|number`
The title that is shown in the beginning of the legend.
#### endTitle
Type: `string|number`
The title that is show in the end of the legend.
#### startSize (optional)
Type: `number`
Default: `2`
The initial size of the circles in the legend.
#### endSize (optional)
Type: `number`
Default: `20`
The end size of the circles in the legend.
#### circlesTotal (optional)
Type: `number`
Default: `10`
Total amount of circles displayed in the legend
#### width (optional)
Type: `number`
Outer width of the component.
#### height (optional)
Type: `number`
Outer height of the component.
================================================
FILE: docs/line-mark-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
# LineMarkSeries
The Line Mark series is a combination of a LineSeries and a MarkSeries: under the hood, it creates both a LineSeries and a MarkSeries and passes them all of its properties.
<!-- INJECT:"LineMarkChartWithLink" -->
## Data format reference
#### x
Type: `string|number|date`
x will be used to determine the x position of each point on the line. The format of x depends on what scale is being used - see [Scales and Data](scales-and-data.md)
#### y
Type: `string|number|date`
y will be used to determine the y position of each point on the line. The format of y depends on what scale is being used - see [Scales and Data](scales-and-data.md)
#### color (optional)
Type: `string|number`
The color of the line and that of the marks. By default the color is interpreted as number to be scaled to a color range. This can be over-ridden by providing the prop colorType="literal" to the series itself. This property can also be defined on the series level.
#### opacity (optional)
Type: `string|number`
Opacity of the individual box to be rendered. By default opacity is scaled by `literal`, so the exact value provided will be used. This property can also be defined on the series level.
#### stroke (optional)
Type: `string|number`
Stroke affects both the color of the line, and the outline of the marks. When this value is not provided, the color attribute is used instead. This property can also be defined on the series level.
#### fill (optional)
Type: `string|number`
The color of the inside of the marks. When this value is not provided the color attribute is used instead. This property can also be defined on the series level.
#### size (optional)
Type: `string|number`
Default: `5`
The size of each of the marks.
## API Reference
#### curve (optional)
Type: `string|function`
Default: `null`
Apply the provided or named curve function from the D3 shape library to smooth the line series plot, see [the D3 documentation](https://github.com/d3/d3-shape#curves) for function names and instructions. Providing the function, not the name, will require importing the d3-shape package in order to configure it:
```javascript
// Setting up with only a name
const stringCurveProp = <LineMarkSeries data={data} curve={'curveMonotoneX'} .../>;
const configuredCurve = d3Shape.curveCatmullRom.alpha(0.5);
const funcCurveProp = <LineMarkSeries data={data} curve={configuredCurve} .../>;
```
Some, but not all line interpolations have the resulting curve going through the original coordinates of its data points. If not, the LineSeries part of the LineMarkSeries will be detached from the MarkSeries part.
#### fill (optional)
Type: `string|number`
The inner color for all the marks in the series, this property will be over-ridden by fill specified in the data attribute. See [colors](colors.md)
#### getNull (optional)
Type: `function`
Default: `null`
A function that will be invoked for each data element that will return a boolean that specifies if the data point should be drawn or not. For more information see [the D3 documentation](https://github.com/d3/d3-shape#line_defined).
```javascript
// Only draw datapoints where the y value is not equal to null
<LineMarkSeries getNull={(d) => d.y !== null} data={data} />
```
#### stroke (optional)
Type: `string|number`
Default: see [colors](colors.md)
A color for the series. Will override color if both are provided.
##### strokeDasharray (optional)
Type: `string`
Specify a custom `stroke-dasharray` attribute which controls the pattern of dashes and gaps used to stroke paths. This will only affect the LineSeries part of the LineMarkSeries.
##### strokeStyle (optional)
Type: `string`
If set to `dashed`, your series will use dashed lines. If set to `solid` or unspecified, your series will use solid lines. See `strokeDasharray` for specifying a custom stroke dash-array value. This will only affect the LineSeries part of the LineMarkSeries.
##### strokeWidth (optional)
Type: `string|number`
Specifies the width of the line for the series. By default, this is determined by react-vis css (2px). This will affect both the thickness of the Line and the Marks.
#### style (optional)
Type: `object`
An object which holds CSS properties that will be applied to the SVG element(s) rendered by the series. See [style](style.md)This allows you to style series beyond the other explicitly defined properties and without having to use CSS classnames and stylesheets.
```jsx
<LineMarkSeries
data={data}
style={{strokeLinejoin: "round"}}
/>
```
`LineMarkSeries` being a composite component (a mix of [LineSeries](line-series.md) and [MarkSeries](mark-series.md)), there are two additional property in the `style` object: `line` and `mark`, which allow you to specify a style for the line or the mark part of the line mark series, respectively.
```jsx
<LineMarkSeries
data={data}
lineStyle={{stroke:"red"}}
markStyle={{stroke:"blue"}}
/>
```
## Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onSeriesClick
Type: `function`
Default: none
This handler fires when the user clicks somewhere on a series, and provides the corresponding event. Unlike onClick, it doesn't pass a specific datapoint.
```jsx
<LineMarkSeries
...
onSeriesClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onSeriesMouseOut
Type: `function`
Default: none
This handler fires when the user's mouse cursor leaves a series, and provides the corresponding event. Unlike onValueMouseOut, it doesn't pass a specific datapoint.
```jsx
<LineMarkSeries
...
onSeriesMouseOut={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesMouseOver
Type: `function`
Default: none
This handler fires when the user mouses over a series, and provides the corresponding event. Unlike onValueMouseOver, it doesn't pass a specific datapoint.
```jsx
<LineMarkSeries
...
onSeriesMouseOver={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesRightClick
Type: `function`
Default: none
This handler fires when the user right-clicks somewhere on a series, and provides the corresponding event. Unlike onClick, it doesn't pass a specific datapoint.
```jsx
<LineMarkSeries
...
onSeriesRightClick={(event)=>{
// does something on right click
// you can access the value of the event
}}
```
#### onValueClick
Type: `function`
Default: none
This handler is triggered either when the user clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<LineMarkSeries
...
onValueClick={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOut
Type: `function`
Default: none
This handler is triggered either when the user's mouse leaves a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<LineMarkSeries
...
onValueMouseOut={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOver
Type: `function`
Default: none
This handler is triggered either when the user's mouse enters a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<LineMarkSeries
...
onValueMouseOver={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueRightClick
Type: `function`
Default: none
This handler is triggered either when the user right-clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<LineMarkSeries
...
onValueRightClick={(datapoint, event)=>{
// does something on right click
// you can access the value of the event
}}
================================================
FILE: docs/line-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
# LineSeries/LineMarkSeries
<!-- INJECT:"LineChartWithLink" -->
react-vis offers two different types of LineSeries, one that renders SVG and one that renders Canvas.
The SVG mode is accessed by using the normal `LineSeries`, just as above, while the Canvas mode is used by simply calling `LineSeriesCanvas` instead of `LineSeries`.
<!-- INJECT:"LineChartCanvasWithLink" -->
-**NOTE**: using the Canvas version of this layer disables animation
## Data format reference
#### x
Type: `number`
Left-to-right position of marks in the series.
#### y
Type: `number`
Top-to-bottom position of the top edge of the series.
## API Reference
#### color (optional)
Type: `string|number`
Default: see [colors](colors.md)
Color of the line series.
By default, you can pass a literal color to the series (i.e. "red" or "#f70"). You can also define a color scale at the top level, and pass a number which will be interpolated by the scale. If nothing is provided, lineSeries will be colored according to react-vis default scale.
#### curve (optional)
Type: `string|function`
Default: `null`
Apply the provided or named curve function from the D3 shape library to smooth the line series plot, see [the D3 documentation](https://github.com/d3/d3-shape#curves) for function names and instructions. Providing the function, not the name, will require importing the d3-shape package in order to configure it:
```javascript
// Setting up with only a name
const stringCurveProp = <LineSeries data={data} curve={'curveMonotoneX'} .../>;
const configuredCurve = d3Shape.curveCatmullRom.alpha(0.5);
const funcCurveProp = <LineSeries data={data} curve={configuredCurve} .../>;
```
#### data
Type: `Array<Object>`
Array of data for the series. See above data format reference.
#### getNull (optional)
Type: `function`
Default: `null`
A function that will be invoked for each data element that will return a boolean that specifies if the data point should be drawn or not. For more information see [the D3 documentation](https://github.com/d3/d3-shape#line_defined).
```javascript
// Only draw datapoints where the y value is not equal to null
<LineSeries getNull={(d) => d.y !== null} data={data} />
```
#### opacity (optional)
Type: `number`
Default: `1`
Opacity of the area chart from 0 (transparent) to 1 (opaque).
#### stroke (optional)
Type: `string|number`
Default: see [colors](colors.md)
A color for the series. Will override color if both are provided.
##### strokeDasharray (optional)
Type: `string`
Specify a custom `stroke-dasharray` attribute which controls the pattern of dashes and gaps used to stroke paths. For the canvas version of this series, this should be an array of values, ala [7, 5].
##### strokeStyle (optional)
Type: `string`
If set to `dashed`, your series will use dashed lines. If set to `solid` or unspecified, your series will use solid lines. See `strokeDasharray` for specifying a custom stroke dash-array value.
##### strokeWidth (optional)
Type: `string|number`
Specifies the width of the line for the series. By default, this is determined by react-vis css (2px).
#### style (optional)
Type: `object`
An object which holds CSS properties that will be applied to the SVG element(s) rendered by the series. This allows you to style series beyond the other explicitly defined properties and without having to use CSS classnames and stylesheets. See [style](style.md)
```jsx
<LineSeries
data={data}
style={{strokeLinejoin: "round"}}
/>
```
### Interaction handlers
Note - interacting with a line may be difficult especially with the standard width. To address that, consider:
- the proximity handlers - onNearestX, onNearestXY;
- increasing the width of your line to make it easier to reach with the mouse,
- creating a near-transparent line series with extra width to catch mouse events.
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onSeriesClick
Type: `function`
Default: none
This handler fires when the user clicks somewhere on a LineSeries, and provides the corresponding event. See [interaction](interaction.md)
```jsx
<LineSeries
...
onSeriesClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onSeriesMouseOut
Type: `function`
Default: none
This handler fires when the user's mouse cursor leaves a LineSeries, and provides the corresponding event. See [interaction](interaction.md)
```jsx
LineSeries
...
onSeriesMouseOut={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesMouseOver
Type: `function`
Default: none
This handler fires when the user mouses over a LineSeries, and provides the corresponding event. See [interaction](interaction.md)
```jsx
<LineSeries
...
onSeriesMouseOver={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesRightClick
Type: `function`
Default: none
This handler fires when the user right-clicks somewhere on a LineSeries, and provides the corresponding event. See [interaction](interaction.md)
```jsx
<LineSeries
...
onSeriesRightClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
================================================
FILE: docs/mark-series.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
## MarkSeries & MarkSeriesCanvas
<!-- INJECT:"ScatterplotChartWithLink" -->
The MarkSeries allows users to embed discrete information in pairs of continuous variables,
that is make scatterplots. Deploying a MarkSeries is super easy:
```javascript
render() {
return (
<XYPlot
width={300}
height={300}>
<MarkSeries
className="mark-series-example"
sizeRange={[5, 15]}
data={myData}/>
</XYPlot>
);
```
Just like other series, MarkSeries expects its data to be formatted as an array of objects, like so:
```javascript
const myData = [
{x: 1, y: 10, size: 30},
{x: 1.7, y: 12, size: 10},
{x: 2, y: 5, size: 1},
{x: 3, y: 15, size: 12},
{x: 2.5, y: 7, size: 4}
]
```
react-vis offers two different types of MarkSeries, one that renders SVG and one that renders Canvas.
The SVG mode is accessed by using the normal `MarkSeries`, just as above, while the Canvas mode is used by simply calling `MarkSeriesCanvas` instead of `MarkSeries`.
<!-- INJECT:"ScatterplotCanvasWithLink" -->
-**NOTE**: using the Canvas version of this layer disables animation
Mark series can usefully be deployed with voronois for fast and accurate mouse overs!
<!-- INJECT:"DynamicCrosshairScatterplotWithLink" -->
## Data format reference
#### x
Type: `string|number|date`
x will be used to determine the x position of each mark. The format of x depends on what scale is being used - see [Scales and Data](scales-and-data.md)
#### y
Type: `string|number|date`
y will be used to determine the y position of each mark. The format of y depends on what scale is being used - see [Scales and Data](scales-and-data.md)
#### color (optional)
Type: `string|number`
The color of the marks. By default the color is interpreted as number to be scaled to a color range. This can be over-ridden by providing the prop colorType="literal" to the series itself. This property can also be defined on the series level.
#### opacity (optional)
Type: `string|number`
Default: `1`
Opacity of the individual marks, from 0 (transparent) to 1 (opaque). By default opacity is scaled by `literal`, so the exact value provided will be used. This property can also be defined on the series level.
#### stroke (optional)
Type: `string|number`
The color of the outline of the marks. When this value is not provided, the color attribute is used instead. This property can also be defined on the series level.
#### fill (optional)
Type: `string|number`
The color of the inside of the marks. When this value is not provided the color attribute is used instead. This property can also be defined on the series level.
#### size (optional)
Type: `string|number`
Default: `5`
The size of each of the marks.
## API Reference
#### animation (optional)
See the [XYPlot](xy-plot.md)'s `animation` section for more information.
#### className (optional)
Type: `string`
Provide an additional class name for the series.
#### color (optional)
Type: `string|number`
Exact color for all series points or a series object.
#### data
Type: `Array<Object>`
Array of data for the series.
#### fill (optional)
Type: `string|number`
The inner color for all the marks in the series, this property will be over-ridden by fill specified in the data attribute. See [colors](colors.md)
#### opacity (optional)
Type: `string|number`
Exact opacity for all series points in pixels or a series object, from 0 (transparent) to 1 (opaque)
#### size (optional)
Type: `string|number`
Exact size for all series points in pixels or a series object.
#### stroke (optional)
Type: `string|number`
Default: see [colors](colors.md)
A color for the outline of the marks. Will override color if both are provided.
#### strokeWidth (optional)
Type: `string|number`
Default: `1`
The width of the outline of the marks.
## Interaction handlers
#### onNearestX (optional)
Type: `function(value, {event, innerX, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose x position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onNearestXY (optional)
Type: `function(value, {event, innerX, innerY, index})`
A callback function which is triggered each time the mouse pointer moves. It can access the datapoint of the mark whose position is the closest to that of the cursor.
Callback is triggered with two arguments. `value` is the data point, `info` object has following properties:
- `innerX` is the left position of the mark;
- `innerY` is the top position of the mark;
- `index` is the index of the data point in the array of data;
- `event` is the event object.
See [interaction](interaction.md)
#### onSeriesClick
Type: `function`
Default: none
This handler fires when the user clicks somewhere on a series, and provides the corresponding event. Unlike onClick, it doesn't pass a specific datapoint.
```jsx
<MarkSeries
...
onSeriesClick={(event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onSeriesMouseOut
Type: `function`
Default: none
This handler fires when the user's mouse cursor leaves a series, and provides the corresponding event. Unlike onValueMouseOut, it doesn't pass a specific datapoint.
```jsx
<MarkSeries
...
onSeriesMouseOut={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesMouseOver
Type: `function`
Default: none
This handler fires when the user mouses over a series, and provides the corresponding event. Unlike onValueMouseOver, it doesn't pass a specific datapoint.
```jsx
<MarkSeries
...
onSeriesMouseOver={(event)=>{
// does something on mouse over
// you can access the value of the event
}}
```
#### onSeriesClick
Type: `function`
Default: none
This handler fires when the user right-clicks somewhere on a series, and provides the corresponding event. Unlike onClick, it doesn't pass a specific datapoint.
```jsx
<MarkSeries
...
onSeriesRightClick={(event)=>{
// does something on right click
// you can access the value of the event
}}
```
#### onValueClick
Type: `function`
Default: none
This handler is triggered either when the user clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<MarkSeries
...
onValueClick={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOut
Type: `function`
Default: none
This handler is triggered either when the user's mouse leaves a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<MarkSeries
...
onValueMouseOut={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueMouseOver
Type: `function`
Default: none
This handler is triggered either when the user's mouse enters a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<MarkSeries
...
onValueMouseOver={(datapoint, event)=>{
// does something on click
// you can access the value of the event
}}
```
#### onValueRightClick
Type: `function`
Default: none
This handler is triggered either when the user right-clicks on a mark.
The handler passes two arguments, the corresponding datapoint and the actual event.
```jsx
<MarkSeries
...
onValueRightClick={(datapoint, event)=>{
// does something on right click
// you can access the value of the event
}}
```
================================================
FILE: docs/parallel-coordinates.md
================================================
> This library is deprecated. Please see `DEPRECATED.md`.
# Parallel Coordinates
Parallel Coordinates provide a robust method for displaying many variables simultaneously. It allows for rapid at-a-glance comparisons across a bunch of dimensions. These graphics can effectively be used either with several data rows on a single chart (as below) or as a small multiple. For more information, check out the [Wiki](https://en.wikipedia.org/wiki/Parallel_coordinates), it's got some really neat examples.
<!-- INJECT:"BasicParallelCoordinatesWithLink" -->
Imagine you have a trio of models of cars that you are trying to compare. You're being data driven so you've collected a number of measurements based on a variety of values. You know basic facts about your variables, eg the interior rating a car can have is 7 and the minimum 1. You can use all this information to produce the above chart! Viola! Informed consumer.
<!-- INJECT:"AnimatedParallelCoordinatesWithLink" -->
Just like every other chart and series ParallelCoordinates expects an array of data, each row or object corresponds to a line or polygon (depending on how you have your chart styled). A key caveat for this chart type is that react-vis can not simply infer the variables from each data object that you wish to plot, so we need you to tell us! So enters the domains prop, an array of object specifying the order and behavior of each of the variables. So you have to tell react-vis a little more to get started, but you get a lot more expressiveness. Let's consider some code. You might provide the following object as props to the parallel coordinates chart:
```javascript
const PARALLEL_COORDINATES_PROPS = {
data: [{
neatExplosions: 7,
wow: 10,
dog: 8,
sickMoves: 9,
nice: 7
}],
domains: [
{name: 'nice', domain: [0, 100]},
{name: 'explosions', domain: [6.9, 7.1], getValue: d => d.neatExplosions},
{name: 'wow', domain: [0, 11]},
{name: 'sickMoves', domain: [0, 20]}
],
height: 300,
width: 400
};
```
In such a case, there would be ONE polygon rendered for four variables (nice/explosions/wow/sickMoves), because those values are listed in the domains prop.
The ParallelCoordinates also features a stateful brushi
gitextract_5pxsgs97/ ├── .editorconfig ├── .eslintrc ├── .gitattributes ├── .gitignore ├── .prettierrc ├── .stylelintrc ├── .travis.yml ├── CHANGELOG.md ├── CODE_OF_CONDUCT.md ├── CONTRIBUTING.md ├── DEPRECATED.md ├── LICENSE ├── README.md ├── ROADMAP.md ├── babel.config.json ├── docs/ │ ├── animation.md │ ├── arc-series.md │ ├── area-series.md │ ├── axes.md │ ├── bar-series.md │ ├── borders.md │ ├── chart-label.md │ ├── clip.md │ ├── colors.md │ ├── contour-series.md │ ├── crosshair.md │ ├── custom-svg-series.md │ ├── decorative-axis.md │ ├── examples/ │ │ ├── building-things-other-than-charts.md │ │ ├── extensibility.md │ │ ├── iris-dashboard.md │ │ ├── responsive-vis.md │ │ ├── showcases/ │ │ │ ├── axes-showcase.md │ │ │ ├── legends-showcase.md │ │ │ ├── misc-showcase.md │ │ │ ├── plots-showcase.md │ │ │ ├── radar-chart-showcase.md │ │ │ ├── radial-showcase.md │ │ │ ├── sankeys-showcase.md │ │ │ ├── sunburst-showcase.md │ │ │ └── treemaps-showcase.md │ │ └── stream-graph.md │ ├── flexible-plots.md │ ├── getting-started/ │ │ ├── getting-started.md │ │ ├── installing-react-vis.md │ │ ├── new-react-vis-project.md │ │ ├── react-vis-in-codepen.md │ │ └── your-first-chart.md │ ├── gradients.md │ ├── grids.md │ ├── heatmap-series.md │ ├── hexbin-series.md │ ├── highlight.md │ ├── hint.md │ ├── interaction.md │ ├── label-series.md │ ├── legends.md │ ├── line-mark-series.md │ ├── line-series.md │ ├── mark-series.md │ ├── parallel-coordinates.md │ ├── polygon-series.md │ ├── presentation.md │ ├── radar-chart.md │ ├── radial-chart.md │ ├── rect-series.md │ ├── sankey.md │ ├── scales-and-data.md │ ├── series.md │ ├── style.md │ ├── sunburst.md │ ├── treemap.md │ ├── voronoi.md │ ├── whisker-series.md │ └── xy-plot.md ├── package.json ├── packages/ │ ├── react-vis/ │ │ ├── .babelrc.json │ │ ├── build-browser.sh │ │ ├── jest.config.js │ │ ├── jest.setup.js │ │ ├── jestBabelTransform.js │ │ ├── package.json │ │ ├── src/ │ │ │ ├── animation.js │ │ │ ├── index.js │ │ │ ├── legends/ │ │ │ │ ├── continuous-color-legend.js │ │ │ │ ├── continuous-size-legend.js │ │ │ │ ├── discrete-color-legend-item.js │ │ │ │ ├── discrete-color-legend.js │ │ │ │ └── searchable-discrete-color-legend.js │ │ │ ├── main.scss │ │ │ ├── make-vis-flexible.js │ │ │ ├── parallel-coordinates/ │ │ │ │ └── index.js │ │ │ ├── plot/ │ │ │ │ ├── axis/ │ │ │ │ │ ├── axis-line.js │ │ │ │ │ ├── axis-ticks.js │ │ │ │ │ ├── axis-title.js │ │ │ │ │ ├── axis.js │ │ │ │ │ ├── decorative-axis-ticks.js │ │ │ │ │ ├── decorative-axis.js │ │ │ │ │ ├── x-axis.js │ │ │ │ │ └── y-axis.js │ │ │ │ ├── borders.js │ │ │ │ ├── chart-label.js │ │ │ │ ├── circular-grid-lines.js │ │ │ │ ├── content-clip-path.js │ │ │ │ ├── crosshair.js │ │ │ │ ├── gradient-defs.js │ │ │ │ ├── grid-lines.js │ │ │ │ ├── highlight.js │ │ │ │ ├── hint.js │ │ │ │ ├── horizontal-grid-lines.js │ │ │ │ ├── series/ │ │ │ │ │ ├── abstract-series.js │ │ │ │ │ ├── arc-series.js │ │ │ │ │ ├── area-series.js │ │ │ │ │ ├── bar-series-canvas.js │ │ │ │ │ ├── bar-series.js │ │ │ │ │ ├── canvas-wrapper.js │ │ │ │ │ ├── contour-series.js │ │ │ │ │ ├── custom-svg-series.js │ │ │ │ │ ├── heatmap-series.js │ │ │ │ │ ├── hexbin-series.js │ │ │ │ │ ├── horizontal-bar-series-canvas.js │ │ │ │ │ ├── horizontal-bar-series.js │ │ │ │ │ ├── horizontal-rect-series-canvas.js │ │ │ │ │ ├── horizontal-rect-series.js │ │ │ │ │ ├── label-series.js │ │ │ │ │ ├── line-mark-series-canvas.js │ │ │ │ │ ├── line-mark-series.js │ │ │ │ │ ├── line-series-canvas.js │ │ │ │ │ ├── line-series.js │ │ │ │ │ ├── mark-series-canvas.js │ │ │ │ │ ├── mark-series.js │ │ │ │ │ ├── polygon-series.js │ │ │ │ │ ├── rect-series-canvas.js │ │ │ │ │ ├── rect-series.js │ │ │ │ │ ├── vertical-bar-series-canvas.js │ │ │ │ │ ├── vertical-bar-series.js │ │ │ │ │ ├── vertical-rect-series-canvas.js │ │ │ │ │ ├── vertical-rect-series.js │ │ │ │ │ └── whisker-series.js │ │ │ │ ├── vertical-grid-lines.js │ │ │ │ ├── voronoi.js │ │ │ │ └── xy-plot.js │ │ │ ├── radar-chart/ │ │ │ │ └── index.js │ │ │ ├── radial-chart/ │ │ │ │ └── index.js │ │ │ ├── sankey/ │ │ │ │ ├── index.js │ │ │ │ └── sankey-link.js │ │ │ ├── styles/ │ │ │ │ ├── examples.scss │ │ │ │ ├── legends.scss │ │ │ │ ├── plot.scss │ │ │ │ ├── radial-chart.scss │ │ │ │ └── treemap.scss │ │ │ ├── sunburst/ │ │ │ │ └── index.js │ │ │ ├── theme.js │ │ │ ├── treemap/ │ │ │ │ ├── index.js │ │ │ │ ├── treemap-dom.js │ │ │ │ ├── treemap-leaf.js │ │ │ │ └── treemap-svg.js │ │ │ └── utils/ │ │ │ ├── axis-utils.js │ │ │ ├── chart-utils.js │ │ │ ├── data-utils.js │ │ │ ├── react-utils.js │ │ │ ├── scales-utils.js │ │ │ ├── series-utils.js │ │ │ └── styling-utils.js │ │ └── tests/ │ │ ├── .eslintrc │ │ ├── components/ │ │ │ ├── animation.test.js │ │ │ ├── arc-series.test.js │ │ │ ├── area-series.test.js │ │ │ ├── axes.test.js │ │ │ ├── axis-tick-format.test.js │ │ │ ├── axis-title.test.js │ │ │ ├── bar-series.test.js │ │ │ ├── borders.test.js │ │ │ ├── canvas-component.test.js │ │ │ ├── circular-grid-lines.test.js │ │ │ ├── color-article.test.js │ │ │ ├── contour-series.test.js │ │ │ ├── crosshair.test.js │ │ │ ├── custom-svg-series.test.js │ │ │ ├── data-article.test.js │ │ │ ├── decorative-axis.test.js │ │ │ ├── gradient.test.js │ │ │ ├── grid-lines.test.js │ │ │ ├── heatmap.test.js │ │ │ ├── hexbin-series.test.js │ │ │ ├── highlight.test.js │ │ │ ├── hints.test.js │ │ │ ├── interaction-article.test.js │ │ │ ├── label-series.test.js │ │ │ ├── legends.test.js │ │ │ ├── line-series-canvas.test.js │ │ │ ├── line-series.test.js │ │ │ ├── make-vis-flexible.test.js │ │ │ ├── mark-series.test.js │ │ │ ├── parallel-coordinates.test.js │ │ │ ├── polygon-series.test.js │ │ │ ├── radar-chart.test.js │ │ │ ├── radial.test.js │ │ │ ├── rect-series.test.js │ │ │ ├── sankey.test.js │ │ │ ├── sunburst.test.js │ │ │ ├── treemap.test.js │ │ │ ├── voronoi.test.js │ │ │ ├── whisker-series.test.js │ │ │ └── xy-plot.test.js │ │ ├── components.js │ │ ├── index.js │ │ ├── jsconfig.json │ │ ├── plot/ │ │ │ ├── __snapshots__/ │ │ │ │ └── content-clip-path.test.js.snap │ │ │ └── content-clip-path.test.js │ │ ├── setup.js │ │ ├── test-utils.js │ │ └── utils/ │ │ ├── axis-utils.test.js │ │ ├── chart-utils.test.js │ │ ├── data-utils.test.js │ │ ├── react-utils.test.js │ │ ├── scales-utils.test.js │ │ ├── series-utils.test.js │ │ └── styling-utils.test.js │ ├── showcase/ │ │ ├── .babelrc.json │ │ ├── app.js │ │ ├── axes/ │ │ │ ├── axis-on-0.js │ │ │ ├── custom-axes-orientation.js │ │ │ ├── custom-axes.js │ │ │ ├── custom-axis-tick-element.js │ │ │ ├── custom-axis-tick-format.js │ │ │ ├── custom-axis.js │ │ │ ├── decorative-axes-criss-cross.js │ │ │ ├── dynamic-complex-edge-hints.js │ │ │ ├── dynamic-crosshair-scatterplot.js │ │ │ ├── dynamic-crosshair.js │ │ │ ├── dynamic-hints.js │ │ │ ├── dynamic-programmatic-rightedge-hints.js │ │ │ ├── dynamic-simple-edge-hints.js │ │ │ ├── dynamic-simple-topedge-hints.js │ │ │ ├── empty-chart.js │ │ │ ├── padded-axis.js │ │ │ ├── parallel-coordinates-example.js │ │ │ ├── static-crosshair.js │ │ │ └── static-hints.js │ │ ├── color/ │ │ │ ├── line-chart-many-colors.js │ │ │ └── mini-color-examples.js │ │ ├── data/ │ │ │ └── mini-data-examples.js │ │ ├── datasets/ │ │ │ ├── car-data.json │ │ │ ├── d3-flare-example.json │ │ │ ├── energy.json │ │ │ ├── iris.json │ │ │ └── old-faithful.json │ │ ├── examples/ │ │ │ ├── candlestick/ │ │ │ │ ├── candlestick-example.js │ │ │ │ ├── candlestick.js │ │ │ │ └── candlestick.scss │ │ │ ├── force-directed-graph/ │ │ │ │ ├── force-directed-example.js │ │ │ │ ├── force-directed-graph.js │ │ │ │ ├── force-directed.scss │ │ │ │ └── les-mis-data.json │ │ │ ├── iris-dashboard/ │ │ │ │ ├── iris-dashboard.js │ │ │ │ └── iris-dashboard.scss │ │ │ ├── responsive-vis/ │ │ │ │ ├── responsive-bar-chart.js │ │ │ │ ├── responsive-scatterplot.js │ │ │ │ ├── responsive-vis-example.js │ │ │ │ ├── responsive-vis-utils.js │ │ │ │ └── responsive-vis.scss │ │ │ └── streamgraph/ │ │ │ ├── streamgraph-example.js │ │ │ └── streamgraph-example.scss │ │ ├── flexible/ │ │ │ └── flexible-examples.js │ │ ├── index.html │ │ ├── index.js │ │ ├── interaction/ │ │ │ └── interaction-examples.js │ │ ├── legends/ │ │ │ ├── continuous-color.js │ │ │ ├── continuous-size.js │ │ │ ├── horizontal-discrete-color.js │ │ │ ├── horizontal-discrete-custom-palette.js │ │ │ ├── searchable-discrete-color-hover.js │ │ │ ├── searchable-discrete-color.js │ │ │ └── vertical-discrete-color.js │ │ ├── misc/ │ │ │ ├── 2d-dragable-plot.js │ │ │ ├── animation-example.js │ │ │ ├── clip-example.js │ │ │ ├── dragable-chart-example.js │ │ │ ├── gradient-example.js │ │ │ ├── label-series-example.js │ │ │ ├── null-data-example.js │ │ │ ├── selection-plot-example.js │ │ │ ├── synced-charts.js │ │ │ ├── time-chart.js │ │ │ ├── triangle-example.js │ │ │ ├── voronoi-line-chart.js │ │ │ └── zoomable-chart-example.js │ │ ├── package.json │ │ ├── parallel-coordinates/ │ │ │ ├── animated-parallel-coordinates.js │ │ │ ├── basic-parallel-coordinates.js │ │ │ └── brushed-parallel-coordinates.js │ │ ├── plot/ │ │ │ ├── area-chart-elevated.js │ │ │ ├── area-chart.js │ │ │ ├── axis-with-turned-labels.js │ │ │ ├── bar-chart.js │ │ │ ├── big-base-bar-chart.js │ │ │ ├── clustered-stacked-bar-chart.js │ │ │ ├── complex-chart.js │ │ │ ├── contour-series-example.js │ │ │ ├── custom-scales.js │ │ │ ├── custom-svg-all-the-marks.js │ │ │ ├── custom-svg-example.js │ │ │ ├── custom-svg-root-level.js │ │ │ ├── difference-chart.js │ │ │ ├── faux-radial-scatterplot.js │ │ │ ├── grid.js │ │ │ ├── heatmap-chart.js │ │ │ ├── hex-heatmap.js │ │ │ ├── hexbin-size-example.js │ │ │ ├── histogram.js │ │ │ ├── labeled-heatmap.js │ │ │ ├── labeled-stacked-vertical-bar-chart.js │ │ │ ├── line-chart-canvas.js │ │ │ ├── line-chart-with-style.js │ │ │ ├── line-chart.js │ │ │ ├── line-series-canvas-nearest-xy-example.js │ │ │ ├── linemark-chart.js │ │ │ ├── mixed-stacked-chart.js │ │ │ ├── scatterplot-canvas.js │ │ │ ├── scatterplot.js │ │ │ ├── stacked-histogram.js │ │ │ ├── stacked-horizontal-bar-chart.js │ │ │ ├── stacked-vertical-bar-chart.js │ │ │ ├── whisker-chart.js │ │ │ └── width-height-margin.js │ │ ├── radar-chart/ │ │ │ ├── animated-radar-chart.js │ │ │ ├── basic-radar-chart.js │ │ │ ├── four-quadrant-radar-chart.js │ │ │ ├── radar-chart-series-tooltips.js │ │ │ └── radar-chart-with-tooltips.js │ │ ├── radial-chart/ │ │ │ ├── arc-series-example.js │ │ │ ├── custom-radius-radial-chart.js │ │ │ ├── donut-chart.js │ │ │ ├── gradient-pie.js │ │ │ └── simple-radial-chart.js │ │ ├── sankey/ │ │ │ ├── basic.js │ │ │ ├── energy-sankey.js │ │ │ ├── link-event.js │ │ │ ├── link-hint.js │ │ │ └── voronoi.js │ │ ├── showcase-app.js │ │ ├── showcase-components/ │ │ │ ├── showcase-button.js │ │ │ ├── showcase-dropdown.js │ │ │ ├── showcase-utils.js │ │ │ └── source-linker.js │ │ ├── showcase-index.js │ │ ├── showcase-links.js │ │ ├── showcase-sections/ │ │ │ ├── axes-showcase.js │ │ │ ├── legends-showcase.js │ │ │ ├── misc-showcase.js │ │ │ ├── parallel-coordinates-showcase.js │ │ │ ├── plots-showcase.js │ │ │ ├── radar-showcase.js │ │ │ ├── radial-showcase.js │ │ │ ├── sankeys-showcase.js │ │ │ ├── sunburst-showcase.js │ │ │ └── treemap-showcase.js │ │ ├── showcase-utils.js │ │ ├── sunbursts/ │ │ │ ├── animated-sunburst.js │ │ │ ├── basic-sunburst.js │ │ │ ├── clock-example.js │ │ │ └── sunburst-with-tooltips.js │ │ ├── treemap/ │ │ │ ├── dynamic-treemap.js │ │ │ └── simple-treemap.js │ │ └── webpack.config.js │ └── website/ │ ├── .storybook/ │ │ ├── addons.js │ │ ├── config.js │ │ └── storybook.css │ ├── html.config.js │ ├── package.json │ ├── src/ │ │ ├── components/ │ │ │ └── Hero.js │ │ ├── config.js │ │ ├── demos.js │ │ ├── mdRoutes.js │ │ └── styles/ │ │ ├── _variables.scss │ │ └── index.scss │ ├── static/ │ │ └── .gitkeep │ ├── storybook/ │ │ ├── areaseries-story.js │ │ ├── axis-story.js │ │ ├── barseries-story.js │ │ ├── index.js │ │ ├── legend-story.js │ │ ├── lineseries-story.js │ │ ├── markseries-story.js │ │ ├── misc-story.js │ │ ├── radial-story.js │ │ ├── storybook-data.js │ │ └── storybook-utils.js │ └── webpack.config.js ├── publish-docs.sh ├── publish.sh └── remove-refs-to-unpm.pl
SYMBOL INDEX (831 symbols across 231 files)
FILE: packages/react-vis/src/animation.js
constant ANIMATION_PROPTYPES (line 6) | const ANIMATION_PROPTYPES = PropTypes.oneOfType([
function getAnimationStyle (line 28) | function getAnimationStyle(animationStyle = presets.noWobble) {
function extractAnimatedPropValues (line 45) | function extractAnimatedPropValues(props) {
class Animation (line 56) | class Animation extends PureComponent {
method constructor (line 57) | constructor(props) {
method componentDidUpdate (line 62) | componentDidUpdate(props) {
method _updateInterpolator (line 118) | _updateInterpolator(oldProps, newProps) {
method render (line 125) | render() {
FILE: packages/react-vis/src/legends/continuous-color-legend.js
function ContinuousColorLegend (line 48) | function ContinuousColorLegend({
FILE: packages/react-vis/src/legends/continuous-size-legend.js
function ContinuousSizeLegend (line 46) | function ContinuousSizeLegend({
FILE: packages/react-vis/src/legends/discrete-color-legend-item.js
constant STROKE_STYLES (line 25) | const STROKE_STYLES = {
function DiscreteColorLegendItem (line 30) | function DiscreteColorLegendItem({
FILE: packages/react-vis/src/legends/discrete-color-legend.js
function DiscreteColorLegend (line 28) | function DiscreteColorLegend({
FILE: packages/react-vis/src/legends/searchable-discrete-color-legend.js
function SearchableDiscreteColorLegend (line 47) | function SearchableDiscreteColorLegend(props) {
FILE: packages/react-vis/src/make-vis-flexible.js
constant CONTAINER_REF (line 27) | const CONTAINER_REF = 'container';
constant DEBOUNCE_DURATION (line 31) | const DEBOUNCE_DURATION = 100;
function debounceEmitResize (line 37) | function debounceEmitResize() {
function emitResize (line 45) | function emitResize() {
function subscribeToDebouncedResize (line 58) | function subscribeToDebouncedResize(cb) {
function removeSubscriber (line 81) | function removeSubscriber(cb) {
function getDisplayName (line 93) | function getDisplayName(Component) {
function makeFlexible (line 103) | function makeFlexible(Component, isWidthFlexible, isHeightFlexible) {
function makeHeightFlexible (line 179) | function makeHeightFlexible(component) {
function makeVisFlexible (line 183) | function makeVisFlexible(component) {
function makeWidthFlexible (line 187) | function makeWidthFlexible(component) {
FILE: packages/react-vis/src/parallel-coordinates/index.js
constant DEFAULT_FORMAT (line 43) | const DEFAULT_FORMAT = format('.2r');
function getAxes (line 53) | function getAxes(props) {
function getLabels (line 84) | function getLabels(props) {
function getLines (line 106) | function getLines(props) {
class ParallelCoordinates (line 163) | class ParallelCoordinates extends Component {
method render (line 168) | render() {
FILE: packages/react-vis/src/plot/axis/axis-line.js
function AxisLine (line 40) | function AxisLine({orientation, width, height, style}) {
FILE: packages/react-vis/src/plot/axis/axis-ticks.js
function _getTickFormatFn (line 41) | function _getTickFormatFn(scale, tickTotal, tickFormat) {
class AxisTicks (line 49) | class AxisTicks extends React.Component {
method _areTicksWrapped (line 55) | _areTicksWrapped() {
method _getTickContainerPropsGetterFn (line 60) | _getTickContainerPropsGetterFn() {
method _getTickLabelProps (line 76) | _getTickLabelProps() {
method _getTickLineProps (line 131) | _getTickLineProps() {
method _isAxisVertical (line 154) | _isAxisVertical() {
method render (line 159) | render() {
FILE: packages/react-vis/src/plot/axis/axis-title.js
constant ADJUSTMENT_FOR_TEXT_SIZE (line 28) | const ADJUSTMENT_FOR_TEXT_SIZE = 16;
constant MARGIN (line 29) | const MARGIN = 6;
function AxisTitle (line 132) | function AxisTitle({orientation, position, width, height, style, title}) {
FILE: packages/react-vis/src/plot/axis/axis.js
constant VERTICAL_CLASS_NAME (line 99) | const VERTICAL_CLASS_NAME = 'rv-xy-plot__axis--vertical';
constant HORIZONTAL_CLASS_NAME (line 100) | const HORIZONTAL_CLASS_NAME = 'rv-xy-plot__axis--horizontal';
class Axis (line 102) | class Axis extends PureComponent {
method _getDefaultAxisProps (line 108) | _getDefaultAxisProps() {
method render (line 152) | render() {
FILE: packages/react-vis/src/plot/axis/decorative-axis-ticks.js
function decorativeAxisTick (line 38) | function decorativeAxisTick(props) {
FILE: packages/react-vis/src/plot/axis/decorative-axis.js
class DecorativeAxis (line 49) | class DecorativeAxis extends AbstractSeries {
method render (line 50) | render() {
constant DEFAULT_FORMAT (line 107) | const DEFAULT_FORMAT = format('.2r');
FILE: packages/react-vis/src/plot/axis/x-axis.js
function XAxis (line 42) | function XAxis(props) {
FILE: packages/react-vis/src/plot/axis/y-axis.js
function YAxis (line 42) | function YAxis(props) {
FILE: packages/react-vis/src/plot/borders.js
constant CLASSES (line 41) | const CLASSES = {
function Borders (line 49) | function Borders(props) {
FILE: packages/react-vis/src/plot/chart-label.js
class ChartLabel (line 26) | class ChartLabel extends React.PureComponent {
method requiresSVG (line 27) | static get requiresSVG() {
method render (line 31) | render() {
FILE: packages/react-vis/src/plot/circular-grid-lines.js
class CircularGridLines (line 44) | class CircularGridLines extends PureComponent {
method _getDefaultProps (line 45) | _getDefaultProps() {
method render (line 57) | render() {
FILE: packages/react-vis/src/plot/content-clip-path.js
function ContentClipPath (line 3) | function ContentClipPath(props) {
FILE: packages/react-vis/src/plot/crosshair.js
function defaultTitleFormat (line 33) | function defaultTitleFormat(values) {
function defaultItemsFormat (line 48) | function defaultItemsFormat(values) {
function getFirstNonEmptyValue (line 61) | function getFirstNonEmptyValue(values) {
class Crosshair (line 65) | class Crosshair extends PureComponent {
method defaultProps (line 66) | static get defaultProps() {
method propTypes (line 78) | static get propTypes() {
method _renderCrosshairItems (line 110) | _renderCrosshairItems() {
method _renderCrosshairTitle (line 134) | _renderCrosshairTitle() {
method render (line 149) | render() {
FILE: packages/react-vis/src/plot/gradient-defs.js
function GradientDefs (line 28) | function GradientDefs(props) {
FILE: packages/react-vis/src/plot/grid-lines.js
class GridLines (line 80) | class GridLines extends PureComponent {
method _getDefaultProps (line 81) | _getDefaultProps() {
method render (line 100) | render() {
FILE: packages/react-vis/src/plot/highlight.js
function getLocs (line 8) | function getLocs(evt) {
class Highlight (line 14) | class Highlight extends AbstractSeries {
method _getDrawArea (line 24) | _getDrawArea(xLoc, yLoc) {
method _getDragArea (line 51) | _getDragArea(xLoc, yLoc) {
method _clickedOutsideDrag (line 63) | _clickedOutsideDrag(xLoc, yLoc) {
method _convertAreaToCoordinates (line 83) | _convertAreaToCoordinates(brushArea) {
method startBrushing (line 119) | startBrushing(e) {
method stopBrushing (line 158) | stopBrushing() {
method onBrush (line 188) | onBrush(e) {
method render (line 210) | render() {
FILE: packages/react-vis/src/plot/hint.js
constant ALIGN (line 45) | const ALIGN = {
constant ORIENTATION (line 60) | const ORIENTATION = {
function defaultFormat (line 72) | function defaultFormat(value) {
class Hint (line 78) | class Hint extends PureComponent {
method defaultProps (line 79) | static get defaultProps() {
method propTypes (line 90) | static get propTypes() {
method _getAlign (line 136) | _getAlign(x, y) {
method _getAlignClassNames (line 161) | _getAlignClassNames(align) {
method _getAlignStyle (line 179) | _getAlignStyle(align, x, y) {
method _getCSSBottom (line 193) | _getCSSBottom(y) {
method _getCSSLeft (line 213) | _getCSSLeft(x) {
method _getCSSRight (line 233) | _getCSSRight(x) {
method _getCSSTop (line 253) | _getCSSTop(y) {
method _getPositionInfo (line 272) | _getPositionInfo() {
method _getXCSS (line 288) | _getXCSS(horizontal, x) {
method _getYCSS (line 308) | _getYCSS(verticalAlign, y) {
method _mapOrientationToAlign (line 328) | _mapOrientationToAlign(orientation) {
method render (line 359) | render() {
FILE: packages/react-vis/src/plot/horizontal-grid-lines.js
function HorizontalGridLines (line 40) | function HorizontalGridLines(props) {
FILE: packages/react-vis/src/plot/series/abstract-series.js
class AbstractSeries (line 66) | class AbstractSeries extends PureComponent {
method getParentConfig (line 71) | static getParentConfig() {
method requiresSVG (line 79) | static get requiresSVG() {
method onParentMouseMove (line 83) | onParentMouseMove(event) {
method onParentTouchMove (line 95) | onParentTouchMove(e) {
method onParentTouchStart (line 100) | onParentTouchStart(e) {
method _getAttr0Functor (line 111) | _getAttr0Functor(attr) {
method _getAttributeFunctor (line 121) | _getAttributeFunctor(attr) {
method _getAttributeValue (line 132) | _getAttributeValue(attr) {
method _getScaleDistance (line 142) | _getScaleDistance(attr) {
method _getXYCoordinateInContainer (line 147) | _getXYCoordinateInContainer(event) {
method _handleNearestX (line 163) | _handleNearestX(event) {
method _handleNearestXY (line 191) | _handleNearestXY(event) {
FILE: packages/react-vis/src/plot/series/arc-series.js
constant ATTRIBUTES (line 38) | const ATTRIBUTES = ['radius', 'angle'];
function modifyRow (line 57) | function modifyRow(row) {
class ArcSeries (line 70) | class ArcSeries extends AbstractSeries {
method constructor (line 71) | constructor(props) {
method UNSAFE_componentWillReceiveProps (line 77) | UNSAFE_componentWillReceiveProps(nextProps) {
method _getAllScaleProps (line 88) | _getAllScaleProps(props) {
method _getDefaultScaleProps (line 113) | _getDefaultScaleProps(props) {
method render (line 123) | render() {
FILE: packages/react-vis/src/plot/series/area-series.js
class AreaSeries (line 35) | class AreaSeries extends AbstractSeries {
method _renderArea (line 36) | _renderArea(data, x, y0, y, curve, getNull) {
method render (line 53) | render() {
FILE: packages/react-vis/src/plot/series/bar-series-canvas.js
function getScaleDistance (line 32) | function getScaleDistance(props, attr) {
class BarSeriesCanvas (line 37) | class BarSeriesCanvas extends AbstractSeries {
method requiresSVG (line 38) | static get requiresSVG() {
method isCanvas (line 42) | static get isCanvas() {
method renderLayer (line 46) | static renderLayer(props, ctx) {
method render (line 111) | render() {
FILE: packages/react-vis/src/plot/series/bar-series.js
class BarSeries (line 32) | class BarSeries extends AbstractSeries {
method propTypes (line 33) | static get propTypes() {
method defaultProps (line 45) | static get defaultProps() {
method render (line 51) | render() {
FILE: packages/react-vis/src/plot/series/canvas-wrapper.js
constant MAX_DRAWS (line 28) | const MAX_DRAWS = 30;
function engageDrawLoop (line 37) | function engageDrawLoop(ctx, height, width, layers) {
function drawLayers (line 61) | function drawLayers(ctx, height, width, layers, drawIteration) {
function buildLayers (line 88) | function buildLayers(newChildren, oldChildren) {
class CanvasWrapper (line 113) | class CanvasWrapper extends Component {
method defaultProps (line 114) | static get defaultProps() {
method componentDidMount (line 120) | componentDidMount() {
method componentDidUpdate (line 134) | componentDidUpdate(oldProps) {
method drawChildren (line 145) | drawChildren(oldProps, newProps, ctx) {
method render (line 176) | render() {
FILE: packages/react-vis/src/plot/series/contour-series.js
function getDomain (line 35) | function getDomain(data) {
class ContourSeries (line 47) | class ContourSeries extends AbstractSeries {
method render (line 48) | render() {
FILE: packages/react-vis/src/plot/series/custom-svg-series.js
constant DEFAULT_STYLE (line 32) | const DEFAULT_STYLE = {
function predefinedComponents (line 37) | function predefinedComponents(type, size = 2, style = DEFAULT_STYLE) {
function getInnerComponent (line 89) | function getInnerComponent({
class CustomSVGSeries (line 124) | class CustomSVGSeries extends AbstractSeries {
method render (line 125) | render() {
FILE: packages/react-vis/src/plot/series/heatmap-series.js
class HeatmapSeries (line 31) | class HeatmapSeries extends AbstractSeries {
method getParentConfig (line 32) | static getParentConfig(attr) {
method render (line 37) | render() {
FILE: packages/react-vis/src/plot/series/hexbin-series.js
function getColorDomain (line 34) | function getColorDomain({countDomain}, hexes) {
class HexbinSeries (line 41) | class HexbinSeries extends AbstractSeries {
method render (line 42) | render() {
FILE: packages/react-vis/src/plot/series/horizontal-bar-series-canvas.js
class HorizontalBarSeriesCanvas (line 24) | class HorizontalBarSeriesCanvas extends AbstractSeries {
method requiresSVG (line 25) | static get requiresSVG() {
method isCanvas (line 29) | static get isCanvas() {
method getParentConfig (line 33) | static getParentConfig(attr) {
method renderLayer (line 42) | static renderLayer(props, ctx) {
method render (line 55) | render() {
FILE: packages/react-vis/src/plot/series/horizontal-bar-series.js
class HorizontalBarSeries (line 26) | class HorizontalBarSeries extends AbstractSeries {
method getParentConfig (line 27) | static getParentConfig(attr) {
method render (line 36) | render() {
FILE: packages/react-vis/src/plot/series/horizontal-rect-series-canvas.js
class HorizontalRectSeriesCanvas (line 24) | class HorizontalRectSeriesCanvas extends AbstractSeries {
method requiresSVG (line 25) | static get requiresSVG() {
method isCanvas (line 29) | static get isCanvas() {
method getParentConfig (line 33) | static getParentConfig(attr) {
method renderLayer (line 42) | static renderLayer(props, ctx) {
method render (line 55) | render() {
FILE: packages/react-vis/src/plot/series/horizontal-rect-series.js
class HorizontalRectSeries (line 26) | class HorizontalRectSeries extends AbstractSeries {
method getParentConfig (line 27) | static getParentConfig(attr) {
method render (line 36) | render() {
FILE: packages/react-vis/src/plot/series/label-series.js
class LabelSeries (line 42) | class LabelSeries extends AbstractSeries {
method render (line 43) | render() {
FILE: packages/react-vis/src/plot/series/line-mark-series-canvas.js
class LineMarkSeriesCanvas (line 25) | class LineMarkSeriesCanvas extends AbstractSeries {
method requiresSVG (line 26) | static get requiresSVG() {
method isCanvas (line 30) | static get isCanvas() {
method renderLayer (line 34) | static renderLayer(props, ctx) {
method render (line 39) | render() {
FILE: packages/react-vis/src/plot/series/line-mark-series.js
class LineMarkSeries (line 34) | class LineMarkSeries extends AbstractSeries {
method defaultProps (line 35) | static get defaultProps() {
method render (line 43) | render() {
FILE: packages/react-vis/src/plot/series/line-series-canvas.js
class LineSeriesCanvas (line 29) | class LineSeriesCanvas extends AbstractSeries {
method requiresSVG (line 30) | static get requiresSVG() {
method isCanvas (line 34) | static get isCanvas() {
method renderLayer (line 38) | static renderLayer(props, ctx) {
method render (line 84) | render() {
FILE: packages/react-vis/src/plot/series/line-series.js
constant STROKE_STYLES (line 35) | const STROKE_STYLES = {
class LineSeries (line 40) | class LineSeries extends AbstractSeries {
method _renderLine (line 41) | _renderLine(data, x, y, curve, getNull) {
method render (line 55) | render() {
FILE: packages/react-vis/src/plot/series/mark-series-canvas.js
class MarkSeriesCanvas (line 28) | class MarkSeriesCanvas extends AbstractSeries {
method requiresSVG (line 29) | static get requiresSVG() {
method isCanvas (line 33) | static get isCanvas() {
method renderLayer (line 37) | static renderLayer(props, ctx) {
method render (line 69) | render() {
FILE: packages/react-vis/src/plot/series/mark-series.js
constant DEFAULT_STROKE_WIDTH (line 33) | const DEFAULT_STROKE_WIDTH = 1;
class MarkSeries (line 35) | class MarkSeries extends AbstractSeries {
method _renderCircle (line 36) | _renderCircle(d, i, strokeWidth, style, scalingFunctions) {
method render (line 59) | render() {
FILE: packages/react-vis/src/plot/series/polygon-series.js
constant DEFAULT_COLOR (line 30) | const DEFAULT_COLOR = '#12939A';
class PolygonSeries (line 38) | class PolygonSeries extends AbstractSeries {
method propTypes (line 39) | static get propTypes() {
method render (line 45) | render() {
FILE: packages/react-vis/src/plot/series/rect-series-canvas.js
class RectSeriesCanvas (line 27) | class RectSeriesCanvas extends AbstractSeries {
method requiresSVG (line 28) | static get requiresSVG() {
method isCanvas (line 32) | static get isCanvas() {
method renderLayer (line 36) | static renderLayer(props, ctx) {
method render (line 84) | render() {
FILE: packages/react-vis/src/plot/series/rect-series.js
class RectSeries (line 32) | class RectSeries extends AbstractSeries {
method propTypes (line 33) | static get propTypes() {
method render (line 43) | render() {
FILE: packages/react-vis/src/plot/series/vertical-bar-series-canvas.js
class HorizontalBarSeriesCanvas (line 24) | class HorizontalBarSeriesCanvas extends AbstractSeries {
method requiresSVG (line 25) | static get requiresSVG() {
method isCanvas (line 29) | static get isCanvas() {
method getParentConfig (line 33) | static getParentConfig(attr) {
method renderLayer (line 42) | static renderLayer(props, ctx) {
method render (line 55) | render() {
FILE: packages/react-vis/src/plot/series/vertical-bar-series.js
class VerticalBarSeries (line 26) | class VerticalBarSeries extends AbstractSeries {
method getParentConfig (line 27) | static getParentConfig(attr) {
method render (line 36) | render() {
FILE: packages/react-vis/src/plot/series/vertical-rect-series-canvas.js
class HorizontalRectSeriesCanvas (line 24) | class HorizontalRectSeriesCanvas extends AbstractSeries {
method requiresSVG (line 25) | static get requiresSVG() {
method isCanvas (line 29) | static get isCanvas() {
method getParentConfig (line 33) | static getParentConfig(attr) {
method renderLayer (line 42) | static renderLayer(props, ctx) {
method render (line 55) | render() {
FILE: packages/react-vis/src/plot/series/vertical-rect-series.js
class VerticalRectSeries (line 26) | class VerticalRectSeries extends AbstractSeries {
method getParentConfig (line 27) | static getParentConfig(attr) {
method render (line 36) | render() {
FILE: packages/react-vis/src/plot/series/whisker-series.js
constant DEFAULT_STROKE_WIDTH (line 32) | const DEFAULT_STROKE_WIDTH = 1;
constant DEFAULT_CROSS_BAR_WIDTH (line 33) | const DEFAULT_CROSS_BAR_WIDTH = 6;
class WhiskerSeries (line 169) | class WhiskerSeries extends AbstractSeries {
method render (line 170) | render() {
FILE: packages/react-vis/src/plot/vertical-grid-lines.js
function VerticalGridLines (line 40) | function VerticalGridLines(props) {
FILE: packages/react-vis/src/plot/voronoi.js
function getNodeIndex (line 11) | function getNodeIndex(evt) {
function getExtent (line 23) | function getExtent({innerWidth, innerHeight, marginLeft, marginTop}) {
function Voronoi (line 30) | function Voronoi(props) {
FILE: packages/react-vis/src/plot/xy-plot.js
constant ATTRIBUTES (line 53) | const ATTRIBUTES = [
function cleanseData (line 71) | function cleanseData(data) {
function checkIfMixinsAreEqual (line 87) | function checkIfMixinsAreEqual(nextScaleMixins, scaleMixins, hasTreeStru...
class XYPlot (line 104) | class XYPlot extends React.Component {
method defaultProps (line 105) | static get defaultProps() {
method propTypes (line 111) | static get propTypes() {
method constructor (line 136) | constructor(props) {
method getDerivedStateFromProps (line 147) | static getDerivedStateFromProps(nextProps) {
method _getClonedChildComponents (line 197) | _getClonedChildComponents() {
method _getDefaultScaleProps (line 236) | static _getDefaultScaleProps(props) {
method _getScaleMixins (line 267) | static _getScaleMixins(data, props) {
method _isPlotEmpty (line 326) | _isPlotEmpty() {
method renderCanvasComponents (line 492) | renderCanvasComponents(components) {
method render (line 524) | render() {
FILE: packages/react-vis/src/radar-chart/index.js
constant DEFAULT_FORMAT (line 37) | const DEFAULT_FORMAT = format('.2r');
function getAxes (line 48) | function getAxes(props) {
function getCoordinate (line 93) | function getCoordinate(axisEndPoint) {
function getLabels (line 117) | function getLabels(props) {
function getPolygons (line 141) | function getPolygons(props) {
function getPolygonPoints (line 206) | function getPolygonPoints(props) {
function RadarChart (line 260) | function RadarChart(props) {
FILE: packages/react-vis/src/radial-chart/index.js
constant DEFAULT_RADIUS_MARGIN (line 36) | const DEFAULT_RADIUS_MARGIN = 15;
function getWedgesToRender (line 44) | function getWedgesToRender({data, getAngle}) {
function generateLabels (line 61) | function generateLabels(mappedData, accessors, labelsRadiusMultiplier = ...
function getMaxRadius (line 99) | function getMaxRadius(width, height) {
function RadialChart (line 103) | function RadialChart(props) {
FILE: packages/react-vis/src/sankey/index.js
constant ALIGNMENTS (line 23) | const ALIGNMENTS = {
constant DEFAULT_MARGINS (line 30) | const DEFAULT_MARGINS = {
function Sankey (line 37) | function Sankey(props) {
FILE: packages/react-vis/src/sankey/sankey-link.js
constant DEFAULT_LINK_COLOR (line 26) | const DEFAULT_LINK_COLOR = DISCRETE_COLOR_RANGE[1];
constant DEFAULT_LINK_OPACITY (line 27) | const DEFAULT_LINK_OPACITY = 0.7;
function SankeyLink (line 29) | function SankeyLink(props) {
FILE: packages/react-vis/src/sunburst/index.js
constant LISTENERS_TO_OVERWRITE (line 36) | const LISTENERS_TO_OVERWRITE = [
function getNodesToRender (line 57) | function getNodesToRender({data, height, hideRootNode, width, getSize}) {
function buildLabels (line 92) | function buildLabels(mappedData, accessors) {
function Sunburst (line 126) | function Sunburst(props) {
FILE: packages/react-vis/src/theme.js
constant DISCRETE_COLOR_RANGE (line 21) | const DISCRETE_COLOR_RANGE = [
constant EXTENDED_DISCRETE_COLOR_RANGE (line 29) | const EXTENDED_DISCRETE_COLOR_RANGE = [
constant CONTINUOUS_COLOR_RANGE (line 53) | const CONTINUOUS_COLOR_RANGE = ['#EF5D28', '#FF9833'];
constant SIZE_RANGE (line 55) | const SIZE_RANGE = [1, 10];
constant OPACITY_RANGE (line 57) | const OPACITY_RANGE = [0.1, 1];
constant OPACITY_TYPE (line 58) | const OPACITY_TYPE = 'literal';
constant DEFAULT_OPACITY (line 59) | const DEFAULT_OPACITY = 1;
constant DEFAULT_SIZE (line 61) | const DEFAULT_SIZE = 5;
constant DEFAULT_COLOR (line 63) | const DEFAULT_COLOR = DISCRETE_COLOR_RANGE[0];
constant DEFAULT_TICK_SIZE (line 65) | const DEFAULT_TICK_SIZE = 7;
FILE: packages/react-vis/src/treemap/index.js
constant TREEMAP_TILE_MODES (line 49) | const TREEMAP_TILE_MODES = {
constant TREEMAP_LAYOUT_MODES (line 58) | const TREEMAP_LAYOUT_MODES = ['circlePack', 'partition', 'partition-pivo...
constant ATTRIBUTES (line 62) | const ATTRIBUTES = ['opacity', 'color'];
constant DEFAULT_MARGINS (line 64) | const DEFAULT_MARGINS = {
function _getScaleFns (line 77) | function _getScaleFns(props) {
function Treemap (line 94) | function Treemap(props) {
FILE: packages/react-vis/src/treemap/treemap-dom.js
function TreemapDOM (line 25) | function TreemapDOM(props) {
FILE: packages/react-vis/src/treemap/treemap-leaf.js
constant ANIMATED_PROPS (line 28) | const ANIMATED_PROPS = [
function TreemapLeaf (line 42) | function TreemapLeaf(props) {
FILE: packages/react-vis/src/treemap/treemap-svg.js
constant MARGIN_ADJUST (line 29) | const MARGIN_ADJUST = 1.2;
class TreemapSVG (line 31) | class TreemapSVG extends React.Component {
method getCircularNodes (line 32) | getCircularNodes() {
method getNonCircularNodes (line 96) | getNonCircularNodes() {
method render (line 160) | render() {
FILE: packages/react-vis/src/utils/axis-utils.js
constant ORIENTATION (line 24) | const ORIENTATION = {
constant DIRECTION (line 33) | const DIRECTION = {
function getTicksTotalFromSize (line 43) | function getTicksTotalFromSize(size) {
function getTickValues (line 60) | function getTickValues(scale, tickTotal, tickValues) {
function generateFit (line 77) | function generateFit(axisStart, axisEnd) {
function generatePoints (line 109) | function generatePoints({
function getAxisAngle (line 144) | function getAxisAngle(axisStart, axisEnd) {
FILE: packages/react-vis/src/utils/chart-utils.js
function getInnerDimensions (line 29) | function getInnerDimensions(props, defaultMargins) {
function getRadialLayoutMargin (line 66) | function getRadialLayoutMargin(width, height, radius) {
constant DEFAULT_MARGINS (line 87) | const DEFAULT_MARGINS = {
FILE: packages/react-vis/src/utils/data-utils.js
function getUniquePropertyValues (line 27) | function getUniquePropertyValues(arr, accessor) {
function addValueToArray (line 38) | function addValueToArray(arr, value) {
function transformValueToString (line 54) | function transformValueToString(value) {
FILE: packages/react-vis/src/utils/react-utils.js
constant USED_MESSAGES (line 41) | const USED_MESSAGES = {};
constant HIDDEN_PROCESSES (line 42) | const HIDDEN_PROCESSES = {
function warning (line 53) | function warning(message, onlyShowMessageOnce = false) {
function warnOnce (line 71) | function warnOnce(message) {
FILE: packages/react-vis/src/utils/scales-utils.js
constant LINEAR_SCALE_TYPE (line 43) | const LINEAR_SCALE_TYPE = 'linear';
constant ORDINAL_SCALE_TYPE (line 50) | const ORDINAL_SCALE_TYPE = 'ordinal';
constant CATEGORY_SCALE_TYPE (line 57) | const CATEGORY_SCALE_TYPE = 'category';
constant LITERAL_SCALE_TYPE (line 66) | const LITERAL_SCALE_TYPE = 'literal';
constant LOG_SCALE_TYPE (line 73) | const LOG_SCALE_TYPE = 'log';
constant TIME_SCALE_TYPE (line 80) | const TIME_SCALE_TYPE = 'time';
constant TIME_UTC_SCALE_TYPE (line 87) | const TIME_UTC_SCALE_TYPE = 'time-utc';
constant SCALE_FUNCTIONS (line 94) | const SCALE_FUNCTIONS = {
constant XYPLOT_ATTR (line 110) | const XYPLOT_ATTR = ['color', 'fill', 'opacity', 'stroke'];
function toTitleCase (line 117) | function toTitleCase(str) {
function _getSmallestDistanceIndex (line 131) | function _getSmallestDistanceIndex(values, scaleObject) {
function addInvertFunctionToOrdinalScaleObject (line 161) | function addInvertFunctionToOrdinalScaleObject(scale) {
function getScaleFnFromScaleObject (line 196) | function getScaleFnFromScaleObject(scaleObject) {
function getDomainByAccessor (line 229) | function getDomainByAccessor(allData, accessor, accessor0, type) {
function _createScaleObjectForValue (line 269) | function _createScaleObjectForValue(attr, value, type, accessor, accesso...
function _createScaleObjectForFunction (line 312) | function _createScaleObjectForFunction({
function _collectScaleObjectFromProps (line 343) | function _collectScaleObjectFromProps(props, attr) {
function _computeLeftDomainAdjustment (line 403) | function _computeLeftDomainAdjustment(values) {
function _computeRightDomainAdjustment (line 419) | function _computeRightDomainAdjustment(values) {
function _computeScaleDistance (line 438) | function _computeScaleDistance(values, domain, bestDistIndex, scaleFn) {
function _normalizeValues (line 458) | function _normalizeValues(data, values, accessor0, type) {
function _getScaleDistanceAndAdjustedDomain (line 475) | function _getScaleDistanceAndAdjustedDomain(data, scaleObject) {
function _isScaleAdjustmentPossible (line 519) | function _isScaleAdjustmentPossible(props, scaleObject) {
function _adjustContinuousScale (line 536) | function _adjustContinuousScale(props, scaleObject) {
function _adjustCategoricalScale (line 576) | function _adjustCategoricalScale(scaleObject) {
function getScaleObjectFromProps (line 594) | function getScaleObjectFromProps(props, attr) {
function getAttributeScale (line 623) | function getAttributeScale(props, attr) {
function _getAttrValue (line 635) | function _getAttrValue(d, accessor) {
function _isDefined (line 639) | function _isDefined(value) {
function _padDomain (line 649) | function _padDomain(domain, padding) {
function getAttributeFunctor (line 667) | function getAttributeFunctor(props, attr) {
function getAttr0Functor (line 684) | function getAttr0Functor(props, attr) {
function getAttributeValue (line 705) | function getAttributeValue(props, attr) {
function getScalePropTypesByAttribute (line 725) | function getScalePropTypesByAttribute(attr) {
function extractScalePropsFromProps (line 745) | function extractScalePropsFromProps(props, attributes) {
function getMissingScaleProps (line 775) | function getMissingScaleProps(props, data, attributes) {
function literalScale (line 808) | function literalScale(defaultValue) {
function getFontColorFromBackground (line 828) | function getFontColorFromBackground(background) {
function getXYPlotValues (line 842) | function getXYPlotValues(props, children) {
constant OPTIONAL_SCALE_PROPS (line 877) | const OPTIONAL_SCALE_PROPS = ['Padding'];
constant OPTIONAL_SCALE_PROPS_REGS (line 878) | const OPTIONAL_SCALE_PROPS_REGS = OPTIONAL_SCALE_PROPS.map(
function getOptionalScaleProps (line 888) | function getOptionalScaleProps(props) {
FILE: packages/react-vis/src/utils/series-utils.js
function isSeriesChild (line 31) | function isSeriesChild(child) {
function getSeriesChildren (line 41) | function getSeriesChildren(children) {
function collectSeriesTypesInfo (line 53) | function collectSeriesTypesInfo(children) {
function seriesHasAngleRadius (line 76) | function seriesHasAngleRadius(data = []) {
function prepareData (line 89) | function prepareData(data) {
function getStackedData (line 111) | function getStackedData(children, attr) {
function getSeriesPropsFromChildren (line 188) | function getSeriesPropsFromChildren(children) {
function getRadialDomain (line 227) | function getRadialDomain(data) {
constant ANIMATED_SERIES_PROPS (line 231) | const ANIMATED_SERIES_PROPS = [
function getStackParams (line 268) | function getStackParams(props) {
FILE: packages/react-vis/src/utils/styling-utils.js
function getCombinedClassName (line 28) | function getCombinedClassName(...classNames) {
FILE: packages/react-vis/tests/components.js
constant XYPLOT_XAXIS_PROPS (line 28) | const XYPLOT_XAXIS_PROPS = {
constant XYPLOT_YAXIS_PROPS (line 38) | const XYPLOT_YAXIS_PROPS = {
FILE: packages/react-vis/tests/components/area-series.test.js
constant AREA_PROPS (line 12) | const AREA_PROPS = {
FILE: packages/react-vis/tests/components/axes.test.js
function translateToXY (line 121) | function translateToXY(translate) {
FILE: packages/react-vis/tests/components/crosshair.test.js
function simulateMouseMove (line 12) | function simulateMouseMove(x) {
function simulateMouseMove (line 24) | function simulateMouseMove(x) {
FILE: packages/react-vis/tests/components/heatmap.test.js
constant HEATMAP_PROPS (line 9) | const HEATMAP_PROPS = {
FILE: packages/react-vis/tests/components/line-series.test.js
constant LINE_PROPS (line 15) | const LINE_PROPS = {
constant LINE_WITH_MANY_COLORS_COLORS (line 25) | const LINE_WITH_MANY_COLORS_COLORS = [
function simulateMouseMove (line 225) | function simulateMouseMove(x) {
FILE: packages/react-vis/tests/components/make-vis-flexible.test.js
function ChildComponent (line 5) | function ChildComponent() {}
function ChildComponent (line 14) | function ChildComponent() {}
FILE: packages/react-vis/tests/components/mark-series.test.js
function updateCursor (line 45) | function updateCursor(x, y) {
function highlightedCircle (line 51) | function highlightedCircle(_highlightedCircle, circle) {
FILE: packages/react-vis/tests/components/parallel-coordinates.test.js
constant PARALLEL_COODINATES_PROPS (line 10) | const PARALLEL_COODINATES_PROPS = {
FILE: packages/react-vis/tests/components/radar-chart.test.js
constant RADAR_PROPS (line 12) | const RADAR_PROPS = {
FILE: packages/react-vis/tests/components/radial.test.js
constant RADIAL_PROPS (line 11) | const RADIAL_PROPS = {
FILE: packages/react-vis/tests/components/sankey.test.js
constant SANKEY_PROPS (line 12) | const SANKEY_PROPS = {
FILE: packages/react-vis/tests/components/sunburst.test.js
constant INTERPOLATE_DATA (line 10) | const INTERPOLATE_DATA = {
constant SUNBURST_PROPS (line 25) | const SUNBURST_PROPS = {
FILE: packages/react-vis/tests/components/treemap.test.js
constant INTERPOLATE_DATA (line 10) | const INTERPOLATE_DATA = {
constant TREEMAP_PROPS (line 25) | const TREEMAP_PROPS = {
FILE: packages/react-vis/tests/components/xy-plot.test.js
constant XYPLOT_PROPS (line 37) | const XYPLOT_PROPS = {width: 10, height: 10};
class ExtendedSeries (line 187) | class ExtendedSeries extends AbstractSeries {
method render (line 195) | render() {
FILE: packages/react-vis/tests/test-utils.js
constant GENERIC_XYPLOT_SERIES_PROPS (line 7) | const GENERIC_XYPLOT_SERIES_PROPS = {
FILE: packages/react-vis/tests/utils/scales-utils.test.js
function generateFakeData (line 413) | function generateFakeData() {
FILE: packages/showcase/app.js
function App (line 30) | function App() {
FILE: packages/showcase/axes/axis-on-0.js
function AxisOn0 (line 32) | function AxisOn0({
FILE: packages/showcase/axes/custom-axes-orientation.js
function Example (line 32) | function Example() {
FILE: packages/showcase/axes/custom-axes.js
constant MARGIN (line 25) | const MARGIN = {
constant WORDS (line 32) | const WORDS = [
function Example (line 47) | function Example() {
FILE: packages/showcase/axes/custom-axis-tick-element.js
class Example (line 32) | class Example extends React.Component {
method render (line 54) | render() {
FILE: packages/showcase/axes/custom-axis-tick-format.js
class Example (line 32) | class Example extends React.Component {
method _xTickFormatValue (line 33) | static _xTickFormatValue(v, i, scale, tickTotal) {
method _yTickFormatValue (line 40) | static _yTickFormatValue(v, i, scale, tickTotal) {
method render (line 45) | render() {
FILE: packages/showcase/axes/custom-axis.js
function Example (line 32) | function Example() {
FILE: packages/showcase/axes/decorative-axes-criss-cross.js
constant MARGIN (line 25) | const MARGIN = {
function Example (line 32) | function Example() {
FILE: packages/showcase/axes/dynamic-complex-edge-hints.js
constant CHART_MARGINS (line 36) | const CHART_MARGINS = {left: 30, right: 10, top: 10, bottom: 25};
constant XMIN (line 37) | const XMIN = 1;
constant XMAX (line 38) | const XMAX = 4;
constant YMIN (line 39) | const YMIN = 5;
constant YMAX (line 40) | const YMAX = 15;
constant DATA (line 41) | const DATA = [
constant POLE (line 47) | const POLE = [
constant DATA_HINT_ALIGN (line 65) | const DATA_HINT_ALIGN = [
class Example (line 84) | class Example extends React.Component {
method constructor (line 85) | constructor(props) {
method render (line 96) | render() {
FILE: packages/showcase/axes/dynamic-crosshair-scatterplot.js
constant DATA (line 35) | const DATA = [
class Example (line 78) | class Example extends React.Component {
method render (line 84) | render() {
FILE: packages/showcase/axes/dynamic-crosshair.js
constant DATA (line 33) | const DATA = [
class DynamicCrosshair (line 46) | class DynamicCrosshair extends React.Component {
method constructor (line 47) | constructor(props) {
method render (line 72) | render() {
FILE: packages/showcase/axes/dynamic-hints.js
class Example (line 33) | class Example extends React.Component {
method constructor (line 34) | constructor(props) {
method render (line 51) | render() {
FILE: packages/showcase/axes/dynamic-programmatic-rightedge-hints.js
constant CHART_MARGINS (line 34) | const CHART_MARGINS = {left: 50, right: 10, top: 10, bottom: 25};
constant DATA (line 35) | const DATA = [
constant XMAX (line 41) | const XMAX = 4;
function getAlignStyle (line 43) | function getAlignStyle(align, x, y) {
class Example (line 50) | class Example extends React.Component {
method constructor (line 51) | constructor(props) {
method render (line 62) | render() {
FILE: packages/showcase/axes/dynamic-simple-edge-hints.js
constant CHART_MARGINS (line 34) | const CHART_MARGINS = {left: 50, right: 10, top: 10, bottom: 25};
constant DATA (line 35) | const DATA = [
constant DATA_HINT_ALIGN (line 41) | const DATA_HINT_ALIGN = [
class Example (line 60) | class Example extends React.Component {
method constructor (line 61) | constructor(props) {
method render (line 72) | render() {
FILE: packages/showcase/axes/dynamic-simple-topedge-hints.js
constant CHART_MARGINS (line 34) | const CHART_MARGINS = {left: 50, right: 10, top: 10, bottom: 25};
constant DATA (line 35) | const DATA = [
constant YMAX (line 41) | const YMAX = 15;
class Example (line 43) | class Example extends React.Component {
method constructor (line 44) | constructor(props) {
method render (line 55) | render() {
FILE: packages/showcase/axes/empty-chart.js
function EmptyChart (line 31) | function EmptyChart() {
FILE: packages/showcase/axes/padded-axis.js
class Example (line 32) | class Example extends React.Component {
method getRandomData (line 33) | getRandomData() {
method render (line 42) | render() {
FILE: packages/showcase/axes/parallel-coordinates-example.js
constant DEFAULT_DOMAIN (line 28) | const DEFAULT_DOMAIN = {min: Infinity, max: -Infinity};
constant MARGIN (line 61) | const MARGIN = {
function ParallelCoordinatesExample (line 68) | function ParallelCoordinatesExample() {
FILE: packages/showcase/axes/static-crosshair.js
function Example (line 33) | function Example() {
FILE: packages/showcase/axes/static-hints.js
function Example (line 33) | function Example() {
FILE: packages/showcase/color/line-chart-many-colors.js
function Example (line 42) | function Example() {
FILE: packages/showcase/color/mini-color-examples.js
function SensibleDefaults (line 117) | function SensibleDefaults() {
function ColorInXYPlot (line 121) | function ColorInXYPlot() {
function LiteralColorAtSeriesLevel (line 125) | function LiteralColorAtSeriesLevel() {
function LinearColorAtSeriesLevel (line 129) | function LinearColorAtSeriesLevel() {
function CategoryColorAtSeriesLevel (line 137) | function CategoryColorAtSeriesLevel() {
function LiteralColorAtMarkLevel (line 145) | function LiteralColorAtMarkLevel() {
function CategoryColorAtMarkLevel (line 149) | function CategoryColorAtMarkLevel() {
function CategoryColorAtMarkLevelCustomPalette (line 153) | function CategoryColorAtMarkLevelCustomPalette() {
function CategoryColorAtMarkLevelFixedStroke (line 160) | function CategoryColorAtMarkLevelFixedStroke() {
function LinearColorAtMarkLevelNoPalette (line 167) | function LinearColorAtMarkLevelNoPalette() {
function LinearColorAtMarkLevel (line 171) | function LinearColorAtMarkLevel() {
function LineSeriesMarkSeries (line 177) | function LineSeriesMarkSeries() {
function GradientCharts (line 195) | function GradientCharts() {
function ColorSpecificity (line 231) | function ColorSpecificity() {
function ReactVis5 (line 260) | function ReactVis5() {
function ReactVis20 (line 264) | function ReactVis20() {
function Continuous (line 268) | function Continuous() {
function CustomPalette (line 272) | function CustomPalette() {
function generatePalette (line 276) | function generatePalette(range) {
function generateCharts (line 309) | function generateCharts(seriesData, props) {
FILE: packages/showcase/data/mini-data-examples.js
function MiniCharts (line 44) | function MiniCharts() {
FILE: packages/showcase/examples/candlestick/candlestick-example.js
function buildRandomBinnedData (line 32) | function buildRandomBinnedData(total) {
class CandlestickExample (line 59) | class CandlestickExample extends React.Component {
method render (line 64) | render() {
FILE: packages/showcase/examples/candlestick/candlestick.js
class CandlestickSeries (line 28) | class CandlestickSeries extends AbstractSeries {
method render (line 29) | render() {
FILE: packages/showcase/examples/force-directed-graph/force-directed-example.js
function ForceDirectedExample (line 28) | function ForceDirectedExample() {
FILE: packages/showcase/examples/force-directed-graph/force-directed-graph.js
function generateSimulation (line 47) | function generateSimulation(props) {
function ForceDirectedGraph (line 77) | function ForceDirectedGraph(props) {
FILE: packages/showcase/examples/iris-dashboard/iris-dashboard.js
constant AXES (line 34) | const AXES = ['sepal length', 'sepal width', 'petal length', 'petal widt...
constant SPECIES (line 36) | const SPECIES = ['setosa', 'versicolor', 'virginica'];
constant SIZE (line 38) | const SIZE = 200;
class IrisDashboard (line 40) | class IrisDashboard extends React.Component {
method render (line 48) | render() {
FILE: packages/showcase/examples/responsive-vis/responsive-bar-chart.js
constant VERY_LOW_RANGE (line 27) | const VERY_LOW_RANGE = [0, 0.08];
constant LOW_RANGE (line 28) | const LOW_RANGE = [0, 0.7];
constant HIGH_RANGE (line 29) | const HIGH_RANGE = [0.7, Infinity];
constant BARCHART_FEATURES (line 31) | const BARCHART_FEATURES = [
function updateDataForArea (line 38) | function updateDataForArea(data, ppp) {
function getFeatures (line 51) | function getFeatures(props) {
function ResponsiveBarChart (line 59) | function ResponsiveBarChart(props) {
FILE: packages/showcase/examples/responsive-vis/responsive-scatterplot.js
constant SUPER_LOW_RANGE (line 41) | const SUPER_LOW_RANGE = [0, 1e-4];
constant VERY_LOW_RANGE (line 42) | const VERY_LOW_RANGE = [0, 8e-4];
constant LOW_RANGE (line 43) | const LOW_RANGE = [0, 5e-3];
constant MED_LOW_RANGE (line 44) | const MED_LOW_RANGE = [1e-4, 5e-3];
constant MED_RANGE (line 45) | const MED_RANGE = [5e-3, 1e-2];
constant HIGH_RANGE (line 46) | const HIGH_RANGE = [1e-2, Infinity];
constant MED_HIGH_RANGE (line 47) | const MED_HIGH_RANGE = [MED_RANGE[0], HIGH_RANGE[1]];
constant SCATTERPLOT_FEATURES (line 49) | const SCATTERPLOT_FEATURES = [
function getFeatures (line 70) | function getFeatures(props) {
function ResponsiveScatterplot (line 78) | function ResponsiveScatterplot(props) {
FILE: packages/showcase/examples/responsive-vis/responsive-vis-example.js
constant ASPECT_RATIO (line 34) | const ASPECT_RATIO = 1.2;
constant EXAMPLE_MARGIN (line 35) | const EXAMPLE_MARGIN = {left: 60, top: 60, bottom: 50, right: 50};
function ResponsiveVisDemo (line 37) | function ResponsiveVisDemo() {
FILE: packages/showcase/examples/responsive-vis/responsive-vis-utils.js
function filterFeatures (line 44) | function filterFeatures(features, ppp) {
function computeRadius (line 54) | function computeRadius(data, width, height) {
function getPPP (line 61) | function getPPP(w, h, data, dimensionality) {
function generateDomain (line 68) | function generateDomain(data) {
function transformToBinData (line 80) | function transformToBinData(data, width, height) {
function transformColor (line 109) | function transformColor(data, hovered = [], useRange = false) {
function manicureData (line 129) | function manicureData(data, hoveredPoint, selectedPoints, useRange) {
FILE: packages/showcase/examples/streamgraph/streamgraph-example.js
constant NUMBER_OF_LAYERS (line 30) | const NUMBER_OF_LAYERS = 20;
constant SAMPLES_PER_LAYER (line 31) | const SAMPLES_PER_LAYER = 200;
constant BUMPS_PER_LAYER (line 32) | const BUMPS_PER_LAYER = 10;
function bumps (line 46) | function bumps(samplesPerLayer, bumpsPerLayer) {
function generateData (line 54) | function generateData() {
class StreamgraphExample (line 66) | class StreamgraphExample extends React.Component {
method render (line 72) | render() {
FILE: packages/showcase/interaction/interaction-examples.js
class ScatterPlotOnNearestXY (line 44) | class ScatterPlotOnNearestXY extends Component {
method constructor (line 45) | constructor() {
method render (line 49) | render() {
class LineChartMouseOverSeries (line 74) | class LineChartMouseOverSeries extends Component {
method constructor (line 75) | constructor() {
method render (line 79) | render() {
class LineChartMouseOverXY (line 108) | class LineChartMouseOverXY extends Component {
method constructor (line 109) | constructor() {
method render (line 113) | render() {
class LinkedCharts (line 153) | class LinkedCharts extends Component {
method constructor (line 154) | constructor() {
method render (line 163) | render() {
function LineChart (line 181) | function LineChart({data, index, handleMouseOver}) {
FILE: packages/showcase/legends/continuous-color.js
class Example (line 25) | class Example extends React.Component {
method constructor (line 26) | constructor(props) {
method render (line 30) | render() {
FILE: packages/showcase/legends/continuous-size.js
class Example (line 25) | class Example extends React.Component {
method constructor (line 26) | constructor(props) {
method render (line 30) | render() {
FILE: packages/showcase/legends/horizontal-discrete-color.js
constant ITEMS (line 26) | const ITEMS = [
function DiscreteColorExample (line 36) | function DiscreteColorExample() {
FILE: packages/showcase/legends/horizontal-discrete-custom-palette.js
constant ITEMS (line 25) | const ITEMS = [
constant COLORS (line 35) | const COLORS = [
class HorizontalDiscreteColorPalette (line 45) | class HorizontalDiscreteColorPalette extends Component {
method render (line 49) | render() {
FILE: packages/showcase/legends/searchable-discrete-color-hover.js
class SearchableDiscreteColorLegendHoverExample (line 25) | class SearchableDiscreteColorLegendHoverExample extends Component {
method constructor (line 26) | constructor(props) {
method render (line 53) | render() {
FILE: packages/showcase/legends/searchable-discrete-color.js
class Example (line 25) | class Example extends React.Component {
method constructor (line 26) | constructor(props) {
method render (line 52) | render() {
FILE: packages/showcase/legends/vertical-discrete-color.js
constant ITEMS (line 25) | const ITEMS = [
function DiscreteColorExample (line 35) | function DiscreteColorExample() {
FILE: packages/showcase/misc/2d-dragable-plot.js
class BidirectionDragChart (line 43) | class BidirectionDragChart extends React.Component {
method render (line 50) | render() {
FILE: packages/showcase/misc/animation-example.js
function generateData (line 33) | function generateData() {
constant MODE (line 40) | const MODE = ['noWobble', 'gentle', 'wobbly', 'stiff'];
class Example (line 42) | class Example extends React.Component {
method render (line 57) | render() {
FILE: packages/showcase/misc/clip-example.js
function ClipExample (line 13) | function ClipExample() {
FILE: packages/showcase/misc/dragable-chart-example.js
constant DATA (line 25) | const DATA = [
class DragableChartExample (line 35) | class DragableChartExample extends React.Component {
method render (line 41) | render() {
FILE: packages/showcase/misc/gradient-example.js
function GradientExample (line 34) | function GradientExample() {
FILE: packages/showcase/misc/label-series-example.js
function generateData (line 26) | function generateData() {
class Example (line 48) | class Example extends React.Component {
method render (line 65) | render() {
FILE: packages/showcase/misc/null-data-example.js
constant DATA (line 34) | const DATA = [
class NullDataExample (line 51) | class NullDataExample extends React.Component {
method render (line 62) | render() {
FILE: packages/showcase/misc/selection-plot-example.js
class SelectionPlotExample (line 43) | class SelectionPlotExample extends React.Component {
method render (line 47) | render() {
FILE: packages/showcase/misc/synced-charts.js
class Example (line 32) | class Example extends React.Component {
method constructor (line 33) | constructor(props) {
method _getSeriesColor (line 44) | _getSeriesColor(index) {
method _onSeriesMouseOver (line 56) | _onSeriesMouseOver(selectedIndex) {
method render (line 60) | render() {
FILE: packages/showcase/misc/time-chart.js
constant MSEC_DAILY (line 32) | const MSEC_DAILY = 86400000;
function Example (line 34) | function Example() {
FILE: packages/showcase/misc/triangle-example.js
function buildTriangle (line 25) | function buildTriangle(sideWidth, lowerLeftCoord) {
class Example (line 49) | class Example extends React.Component {
method render (line 54) | render() {
FILE: packages/showcase/misc/voronoi-line-chart.js
class Example (line 69) | class Example extends React.Component {
method render (line 75) | render() {
FILE: packages/showcase/misc/zoomable-chart-example.js
function getRandomSeriesData (line 43) | function getRandomSeriesData(total) {
class ZoomableChartExample (line 59) | class ZoomableChartExample extends React.Component {
method render (line 76) | render() {
FILE: packages/showcase/parallel-coordinates/animated-parallel-coordinates.js
constant DATA (line 26) | const DATA = [
constant DOMAIN (line 36) | const DOMAIN = [
function generateData (line 44) | function generateData() {
class AnimatedParallelCoordinates (line 53) | class AnimatedParallelCoordinates extends Component {
method render (line 58) | render() {
FILE: packages/showcase/parallel-coordinates/basic-parallel-coordinates.js
constant DATA (line 26) | const DATA = [
function BasicParallelCoordinates (line 63) | function BasicParallelCoordinates() {
FILE: packages/showcase/parallel-coordinates/brushed-parallel-coordinates.js
constant SPECIES_COLORS (line 28) | const SPECIES_COLORS = {
function BrushedParallelCoordinates (line 50) | function BrushedParallelCoordinates() {
FILE: packages/showcase/plot/area-chart-elevated.js
function AreaChartElevated (line 33) | function AreaChartElevated() {
FILE: packages/showcase/plot/area-chart.js
function Example (line 32) | function Example() {
FILE: packages/showcase/plot/axis-with-turned-labels.js
function Example (line 32) | function Example() {
FILE: packages/showcase/plot/bar-chart.js
class Example (line 51) | class Example extends React.Component {
method render (line 56) | render() {
FILE: packages/showcase/plot/big-base-bar-chart.js
class Example (line 59) | class Example extends React.Component {
method render (line 64) | render() {
FILE: packages/showcase/plot/clustered-stacked-bar-chart.js
class Example (line 35) | class Example extends React.Component {
method render (line 39) | render() {
FILE: packages/showcase/plot/complex-chart.js
function getRandomSeriesData (line 41) | function getRandomSeriesData(total) {
class Example (line 57) | class Example extends React.Component {
method constructor (line 58) | constructor(props) {
method render (line 149) | render() {
FILE: packages/showcase/plot/contour-series-example.js
function updateData (line 36) | function updateData() {
class ContourSeriesExample (line 42) | class ContourSeriesExample extends Component {
method render (line 46) | render() {
FILE: packages/showcase/plot/custom-scales.js
function Example (line 32) | function Example() {
FILE: packages/showcase/plot/custom-svg-all-the-marks.js
function generateData (line 35) | function generateData(reversed) {
constant DATA (line 53) | const DATA = generateData(false);
constant REVERSED_DATA (line 54) | const REVERSED_DATA = generateData(true);
class Example (line 64) | class Example extends React.Component {
method render (line 68) | render() {
FILE: packages/showcase/plot/custom-svg-example.js
function Example (line 32) | function Example() {
FILE: packages/showcase/plot/custom-svg-root-level.js
function CustomSVGRootLevelComponent (line 32) | function CustomSVGRootLevelComponent() {
FILE: packages/showcase/plot/difference-chart.js
class DifferenceChart (line 49) | class DifferenceChart extends React.Component {
method render (line 54) | render() {
FILE: packages/showcase/plot/faux-radial-scatterplot.js
constant WIDTH (line 41) | const WIDTH = 300;
constant HEIGHT (line 42) | const HEIGHT = 300;
function Example (line 44) | function Example() {
FILE: packages/showcase/plot/grid.js
function Example (line 25) | function Example() {
FILE: packages/showcase/plot/heatmap-chart.js
class HeatmapChart (line 25) | class HeatmapChart extends Component {
method render (line 30) | render() {
FILE: packages/showcase/plot/hex-heatmap.js
function updateData (line 29) | function updateData() {
class HexHeatmap (line 35) | class HexHeatmap extends Component {
method render (line 42) | render() {
FILE: packages/showcase/plot/hexbin-size-example.js
constant DIMENSIONS (line 29) | const DIMENSIONS = [
class HexbinSizeExample (line 39) | class HexbinSizeExample extends Component {
method updateX (line 45) | updateX(increment) {
method updateY (line 51) | updateY(increment) {
method render (line 57) | render() {
FILE: packages/showcase/plot/histogram.js
constant ONE_DAY (line 32) | const ONE_DAY = 86400000;
constant DATA (line 34) | const DATA = [
function Example (line 45) | function Example() {
FILE: packages/showcase/plot/labeled-heatmap.js
class LabeledHeatmap (line 51) | class LabeledHeatmap extends Component {
method render (line 56) | render() {
FILE: packages/showcase/plot/labeled-stacked-vertical-bar-chart.js
class Example (line 34) | class Example extends React.Component {
method render (line 38) | render() {
FILE: packages/showcase/plot/line-chart-canvas.js
function getRandomData (line 37) | function getRandomData() {
class Example (line 64) | class Example extends React.Component {
method render (line 75) | render() {
FILE: packages/showcase/plot/line-chart-with-style.js
function Example (line 33) | function Example() {
FILE: packages/showcase/plot/line-chart.js
class Example (line 36) | class Example extends React.Component {
method render (line 40) | render() {
FILE: packages/showcase/plot/line-series-canvas-nearest-xy-example.js
class LineSeriesCanvasNearestXYExample (line 27) | class LineSeriesCanvasNearestXYExample extends React.Component {
method render (line 32) | render() {
FILE: packages/showcase/plot/linemark-chart.js
function Example (line 32) | function Example() {
FILE: packages/showcase/plot/mixed-stacked-chart.js
class Example (line 34) | class Example extends React.Component {
method render (line 38) | render() {
FILE: packages/showcase/plot/scatterplot-canvas.js
function getRandomData (line 35) | function getRandomData() {
class Example (line 62) | class Example extends React.Component {
method render (line 70) | render() {
FILE: packages/showcase/plot/scatterplot.js
function Example (line 32) | function Example() {
FILE: packages/showcase/plot/stacked-histogram.js
class Example (line 33) | class Example extends React.Component {
method render (line 37) | render() {
FILE: packages/showcase/plot/stacked-horizontal-bar-chart.js
class Example (line 33) | class Example extends React.Component {
method render (line 37) | render() {
FILE: packages/showcase/plot/stacked-vertical-bar-chart.js
class Example (line 33) | class Example extends React.Component {
method render (line 37) | render() {
FILE: packages/showcase/plot/whisker-chart.js
function Example (line 32) | function Example() {
FILE: packages/showcase/plot/width-height-margin.js
function Example (line 25) | function Example() {
FILE: packages/showcase/radar-chart/animated-radar-chart.js
constant DATA (line 27) | const DATA = [
constant DOMAIN (line 37) | const DOMAIN = [
function generateData (line 45) | function generateData() {
class AnimatedRadar (line 54) | class AnimatedRadar extends Component {
method render (line 59) | render() {
FILE: packages/showcase/radar-chart/basic-radar-chart.js
constant DATA (line 26) | const DATA = [
function BasicRadarChart (line 59) | function BasicRadarChart() {
FILE: packages/showcase/radar-chart/four-quadrant-radar-chart.js
constant RADAR_PROPS (line 25) | const RADAR_PROPS = {
function FourQuadrantRadarChart (line 44) | function FourQuadrantRadarChart() {
FILE: packages/showcase/radar-chart/radar-chart-series-tooltips.js
constant DATA (line 27) | const DATA = [
class BasicRadarChart (line 68) | class BasicRadarChart extends Component {
method render (line 73) | render() {
FILE: packages/showcase/radar-chart/radar-chart-with-tooltips.js
constant DATA (line 27) | const DATA = [
class RadarChartWithTooltips (line 115) | class RadarChartWithTooltips extends Component {
method render (line 120) | render() {
FILE: packages/showcase/radial-chart/arc-series-example.js
function updateData (line 30) | function updateData() {
function updateLittleData (line 46) | function updateLittleData() {
class Example (line 66) | class Example extends React.Component {
method render (line 72) | render() {
FILE: packages/showcase/radial-chart/custom-radius-radial-chart.js
constant DATA (line 25) | const DATA = [
function mapData (line 57) | function mapData(hoveredSection) {
class SimpleRadialChart (line 67) | class SimpleRadialChart extends Component {
method render (line 72) | render() {
FILE: packages/showcase/radial-chart/donut-chart.js
class SimpleRadialChart (line 25) | class SimpleRadialChart extends Component {
method render (line 29) | render() {
FILE: packages/showcase/radial-chart/gradient-pie.js
function GradientPie (line 25) | function GradientPie() {
FILE: packages/showcase/radial-chart/simple-radial-chart.js
function SimpleRadialChart (line 25) | function SimpleRadialChart() {
FILE: packages/showcase/sankey/basic.js
function BasicSankeyExample (line 12) | function BasicSankeyExample() {
FILE: packages/showcase/sankey/energy-sankey.js
constant MODE (line 8) | const MODE = ['justify', 'center', 'left', 'right'];
class EnergySankey (line 10) | class EnergySankey extends React.Component {
method render (line 21) | render() {
FILE: packages/showcase/sankey/link-event.js
constant BLURRED_LINK_OPACITY (line 5) | const BLURRED_LINK_OPACITY = 0.3;
constant FOCUSED_LINK_OPACITY (line 6) | const FOCUSED_LINK_OPACITY = 0.6;
class LinkEventSankeyExample (line 15) | class LinkEventSankeyExample extends React.Component {
method render (line 20) | render() {
FILE: packages/showcase/sankey/link-hint.js
constant BLURRED_LINK_OPACITY (line 6) | const BLURRED_LINK_OPACITY = 0.3;
constant FOCUSED_LINK_OPACITY (line 7) | const FOCUSED_LINK_OPACITY = 0.6;
class LinkHintSankeyExample (line 16) | class LinkHintSankeyExample extends React.Component {
method _renderHint (line 21) | _renderHint() {
method render (line 36) | render() {
FILE: packages/showcase/sankey/voronoi.js
constant BLURRED_NODE_OPACITY (line 5) | const BLURRED_NODE_OPACITY = 0.8;
constant FOCUSED_NODE_OPACITY (line 6) | const FOCUSED_NODE_OPACITY = 1;
class VoronoiSankeyExample (line 15) | class VoronoiSankeyExample extends React.Component {
method render (line 20) | render() {
FILE: packages/showcase/showcase-app.js
function App (line 107) | function App(props) {
FILE: packages/showcase/showcase-components/showcase-button.js
function ShowcaseButton (line 24) | function ShowcaseButton(props) {
FILE: packages/showcase/showcase-components/showcase-dropdown.js
class ShowcaseDropdown (line 24) | class ShowcaseDropdown extends React.Component {
method constructor (line 25) | constructor(props) {
method render (line 36) | render() {
FILE: packages/showcase/showcase-components/showcase-utils.js
function mapSection (line 5) | function mapSection(section) {
FILE: packages/showcase/showcase-components/source-linker.js
function sourceLinker (line 23) | function sourceLinker(ShowcaseComponent, link) {
FILE: packages/showcase/showcase-links.js
constant REACTVIS_BASE_URL (line 1) | const REACTVIS_BASE_URL =
constant SHOWCASE_BASE_URL (line 4) | const SHOWCASE_BASE_URL =
constant SHOWCASE_LINKS (line 7) | const SHOWCASE_LINKS = {
FILE: packages/showcase/showcase-sections/axes-showcase.js
constant AXES (line 28) | const AXES = [
constant TOOLTIPS (line 69) | const TOOLTIPS = [
constant DECORATIVE_AXES (line 128) | const DECORATIVE_AXES = [
function AxesShowcase (line 141) | function AxesShowcase() {
FILE: packages/showcase/showcase-sections/legends-showcase.js
constant DISCRETE_LEGENDS (line 14) | const DISCRETE_LEGENDS = [
constant CONTINOUS_COLOR_LEGEND (line 43) | const CONTINOUS_COLOR_LEGEND = [
constant CONTINOUS_SIZE_LEGEND (line 51) | const CONTINOUS_SIZE_LEGEND = [
function LegendsExample (line 59) | function LegendsExample() {
FILE: packages/showcase/showcase-sections/misc-showcase.js
constant MISC (line 22) | const MISC = [
function MiscShowcase (line 108) | function MiscShowcase() {
FILE: packages/showcase/showcase-sections/parallel-coordinates-showcase.js
constant PARALLEL_COORDINATES (line 13) | const PARALLEL_COORDINATES = [
function ParallelCoordinatesShowcase (line 34) | function ParallelCoordinatesShowcase() {
FILE: packages/showcase/showcase-sections/plots-showcase.js
constant PLOTS (line 44) | const PLOTS = [
constant BASIC_COMPONENTS (line 219) | const BASIC_COMPONENTS = [
function PlotsShowcase (line 250) | function PlotsShowcase(props) {
FILE: packages/showcase/showcase-sections/radar-showcase.js
constant RADAR (line 14) | const RADAR = [
function RadarShowcase (line 45) | function RadarShowcase() {
FILE: packages/showcase/showcase-sections/radial-showcase.js
constant RADIAL (line 13) | const RADIAL = [
function RadialShowcase (line 39) | function RadialShowcase() {
FILE: packages/showcase/showcase-sections/sankeys-showcase.js
constant SANKEYS (line 14) | const SANKEYS = [
function SankeysSection (line 45) | function SankeysSection() {
FILE: packages/showcase/showcase-sections/sunburst-showcase.js
constant SUNBURSTS (line 14) | const SUNBURSTS = [
function SunburstSection (line 48) | function SunburstSection() {
FILE: packages/showcase/showcase-sections/treemap-showcase.js
constant TREEMAPS (line 9) | const TREEMAPS = [
function TreemapShowcase (line 25) | function TreemapShowcase() {
FILE: packages/showcase/showcase-utils.js
function generateSeededRandom (line 3) | function generateSeededRandom(baseSeed = 2) {
FILE: packages/showcase/sunbursts/animated-sunburst.js
function randomLeaf (line 26) | function randomLeaf() {
function updateData (line 33) | function updateData() {
constant DIVERGING_COLOR_SCALE (line 50) | const DIVERGING_COLOR_SCALE = ['#00939C', '#85C4C8', '#EC9370', '#C22E00'];
class AnimatedSunburst (line 52) | class AnimatedSunburst extends React.Component {
method render (line 58) | render() {
FILE: packages/showcase/sunbursts/basic-sunburst.js
constant LABEL_STYLE (line 29) | const LABEL_STYLE = {
function getKeyPath (line 39) | function getKeyPath(node) {
function updateData (line 56) | function updateData(data, keyPath) {
class BasicSunburst (line 76) | class BasicSunburst extends React.Component {
method render (line 84) | render() {
FILE: packages/showcase/sunbursts/clock-example.js
function getSeconds (line 29) | function getSeconds() {
function ClockExample (line 33) | function ClockExample() {
FILE: packages/showcase/sunbursts/sunburst-with-tooltips.js
constant DATA (line 27) | const DATA = {
function buildValue (line 67) | function buildValue(hoveredCell) {
class SunburstWithTooltips (line 76) | class SunburstWithTooltips extends React.Component {
method render (line 80) | render() {
FILE: packages/showcase/treemap/dynamic-treemap.js
function _getRandomData (line 26) | function _getRandomData(total) {
class DynamicTreemapExample (line 46) | class DynamicTreemapExample extends React.Component {
method render (line 53) | render() {
FILE: packages/showcase/treemap/simple-treemap.js
constant MODE (line 28) | const MODE = [
constant STYLES (line 40) | const STYLES = {
class SimpleTreemapExample (line 51) | class SimpleTreemapExample extends React.Component {
method render (line 64) | render() {
FILE: packages/website/.storybook/config.js
function loadStories (line 8) | function loadStories() {
FILE: packages/website/src/components/Hero.js
function makeData (line 219) | function makeData(nbSeries, nbPoints) {
function series (line 223) | function series(nbPoints, s) {
function random (line 244) | function random({scope = 5, rolls = 1, integer = false}) {
class Hero (line 253) | class Hero extends Component {
method constructor (line 254) | constructor() {
method componentDidMount (line 262) | componentDidMount() {
method componentWillUnmount (line 269) | componentWillUnmount() {
method render (line 304) | render() {
FILE: packages/website/src/config.js
constant PROJECT_TYPE (line 1) | const PROJECT_TYPE = 'github';
constant PROJECT_NAME (line 3) | const PROJECT_NAME = 'react-vis';
constant PROJECT_ORG (line 4) | const PROJECT_ORG = 'uber';
constant PROJECT_URL (line 5) | const PROJECT_URL = `https://github.com/${PROJECT_ORG}/${PROJECT_NAME}`;
constant PROJECT_DESC (line 6) | const PROJECT_DESC = 'A composable charting library';
constant PROJECTS (line 8) | const PROJECTS = {};
constant HOME_HEADING (line 10) | const HOME_HEADING = 'A composable charting library';
constant HOME_RIGHT (line 12) | const HOME_RIGHT = null;
constant HOME_BULLETS (line 14) | const HOME_BULLETS = [];
constant GA_TRACKING (line 15) | const GA_TRACKING = 'UA-64694404-13';
constant ADDITIONAL_LINKS (line 16) | const ADDITIONAL_LINKS = [
constant BASENAME (line 20) | const BASENAME = '/react-vis';
constant HISTORY (line 21) | const HISTORY = 'browser';
FILE: packages/website/storybook/areaseries-story.js
function styledAreaSeries (line 19) | function styledAreaSeries(props) {
FILE: packages/website/storybook/barseries-story.js
function addBarSeriesStory (line 19) | function addBarSeriesStory(isVertical = true) {
FILE: packages/website/storybook/lineseries-story.js
function styledLineSeries (line 20) | function styledLineSeries(props) {
FILE: packages/website/storybook/markseries-story.js
function styledMarkSeries (line 19) | function styledMarkSeries(props) {
FILE: packages/website/storybook/radial-story.js
function labelProps (line 11) | function labelProps() {
FILE: packages/website/storybook/storybook-data.js
constant DEC23 (line 2) | const DEC23 = 1513987200000;
constant DAY_IN_MS (line 3) | const DAY_IN_MS = 86400000;
function generateLinearData (line 4) | function generateLinearData({
function generateScatterplotData (line 48) | function generateScatterplotData(args) {
function generateRadialData (line 56) | function generateRadialData(args) {
function xyFlip (line 66) | function xyFlip(arr) {
function enrich (line 74) | function enrich({datapoint, extraParams, nbPoints, series, i}) {
function nonUniformX (line 81) | function nonUniformX() {
function random (line 90) | function random({max = 1, min = 0}) {
function intRandom (line 94) | function intRandom({max = 10, min = 0}) {
function getTime (line 98) | function getTime({startTime = DEC23}) {
function getWord (line 102) | function getWord() {
FILE: packages/website/storybook/storybook-utils.js
constant CATEGORY_PALETTE (line 13) | const CATEGORY_PALETTE = [
constant LINEAR_PALETTE (line 37) | const LINEAR_PALETTE = ['#EF5D28', '#FF9833'];
function SimpleChartWrapper (line 39) | function SimpleChartWrapper(props) {
function SimpleRadialChartWrapper (line 83) | function SimpleRadialChartWrapper(props) {
function SimpleChartWrapperNoAxes (line 93) | function SimpleChartWrapperNoAxes(props) {
function chooseColorScale (line 97) | function chooseColorScale() {
Condensed preview — 393 files, each showing path, character count, and a content snippet. Download the .json file or copy for the full structured content (1,499K chars).
[
{
"path": ".editorconfig",
"chars": 188,
"preview": "# EditorConfig: http://editorconfig.org\n\nroot = true\n\n[*]\nindent_style = space\nindent_size = 2\nend_of_line = lf\ncharset "
},
{
"path": ".eslintrc",
"chars": 821,
"preview": "{\n \"extends\": [\n \"eslint:recommended\",\n \"plugin:react/recommended\",\n \"plugin:react-hooks/recommended\",\n \"pl"
},
{
"path": ".gitattributes",
"chars": 16,
"preview": "yarn.lock -diff\n"
},
{
"path": ".gitignore",
"chars": 187,
"preview": "node_modules/\n.sass-cache/\n.nyc_output/\ncoverage/\ndist/\nes/\n\nnpm-debug.log*\nyarn-error.log*\n.DS_Store\n.idea/\npublic/\n.vs"
},
{
"path": ".prettierrc",
"chars": 148,
"preview": "{\n \"singleQuote\": true,\n \"trailingComma\": \"none\",\n \"bracketSpacing\": false,\n \"jsxBracketSameLine\": false,\n \"semi\": "
},
{
"path": ".stylelintrc",
"chars": 113,
"preview": "{\n \"extends\": \"stylelint-config-standard\",\n \"rules\": {\n \"selector-list-comma-newline-after\": \"always\"\n }\n}\n"
},
{
"path": ".travis.yml",
"chars": 188,
"preview": "language: node_js\nnode_js:\n - '10'\nscript:\n - npm run lint\n - cd packages/react-vis\n - npm run cover\nafter_success:\n"
},
{
"path": "CHANGELOG.md",
"chars": 9382,
"preview": "## v1.12.0\n- Upgraded all d3 dependencies\n- The layout of Sankey and Contour chart are changed due to the d3 upgrade\n- B"
},
{
"path": "CODE_OF_CONDUCT.md",
"chars": 3212,
"preview": "# Contributor Covenant Code of Conduct\n\n## Our Pledge\nIn the interest of fostering an open and welcoming environment, we"
},
{
"path": "CONTRIBUTING.md",
"chars": 1629,
"preview": "# Want to contribute?\n\nGreat! That's why this is an open source project. We use this project in our infrastructure at Ub"
},
{
"path": "DEPRECATED.md",
"chars": 454,
"preview": "# Deprecated\n\nUnfortunately, `react-vis` currently has no active maintainers. As such, we have\ndecided to deprecate the "
},
{
"path": "LICENSE",
"chars": 1067,
"preview": "Copyright (c) 2016 Uber Technologies, Inc.\n\nPermission is hereby granted, free of charge, to any person obtaining a copy"
},
{
"path": "README.md",
"chars": 5619,
"preview": "<p align=\"right\">\n <a href=\"./DEPRECATED.md\">\n <img src=\"https://img.shields.io/maintenance/no/2020?style=flat-squar"
},
{
"path": "ROADMAP.md",
"chars": 653,
"preview": "# Roadmap\n\nThis document will be updated with the middle-term ambition for React-vis. \n\n## Current priority\n\nRight now t"
},
{
"path": "babel.config.json",
"chars": 1683,
"preview": "{\n \"babelrcRoots\": [\n \".\",\n \"./packages/*\"\n ],\n \"env\": {\n \"production\": {\n \"presets\": [\n \"@babel"
},
{
"path": "docs/animation.md",
"chars": 1506,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Animation\n\nAnimation makes your charts feel physical, it m"
},
{
"path": "docs/arc-series.md",
"chars": 9253,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## ArcSeries:\n\n<!-- INJECT:\"ArcSeriesExampleWithLink\" -->\n\nTh"
},
{
"path": "docs/area-series.md",
"chars": 5858,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# AreaSeries\n\n<!-- INJECT:\"AreaChartWithLink\" -->\n\nIn additio"
},
{
"path": "docs/axes.md",
"chars": 5939,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Axes\n\n<!-- INJECT:\"CustomAxesOrientationWithLink\" -->\n\n`XA"
},
{
"path": "docs/bar-series.md",
"chars": 9248,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# Bar Series\n\n**TLDR**: use bar series to make bar charts, bu"
},
{
"path": "docs/borders.md",
"chars": 2318,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Borders\n\nSometimes when modifying the domain of the XYPlot"
},
{
"path": "docs/chart-label.md",
"chars": 2591,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## ChartLabel\n\nWhen you are styling your chart sometimes you "
},
{
"path": "docs/clip.md",
"chars": 850,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Clip\n\nDepending on the data and domain, sometimes the seri"
},
{
"path": "docs/colors.md",
"chars": 20378,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Color\n\nColor can be set and affected in many ways in React"
},
{
"path": "docs/contour-series.md",
"chars": 2930,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## ContourSeries\n\nThe contour series allows for the easy crea"
},
{
"path": "docs/crosshair.md",
"chars": 2035,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Crosshair\n\n<!-- INJECT:\"DynamicCrosshairWithLink\" -->\n\n`Cr"
},
{
"path": "docs/custom-svg-series.md",
"chars": 5206,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## CustomSVGSeries\n\nWhen creating visualizations, it is somet"
},
{
"path": "docs/decorative-axis.md",
"chars": 3382,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## DecorativeAxis\n\n<!-- INJECT:\"ParallelCoordinatesExampleWit"
},
{
"path": "docs/examples/building-things-other-than-charts.md",
"chars": 230,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"ForceDirectedGraph\" -->\n\n[Source code](https://g"
},
{
"path": "docs/examples/extensibility.md",
"chars": 409,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"Candlestick\" -->\n\n\n## Extensibility\n\nreact-vis i"
},
{
"path": "docs/examples/iris-dashboard.md",
"chars": 557,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- STYLETYPE:\"example-page\" -->\n<!-- INJECT:\"IrisDashboard\""
},
{
"path": "docs/examples/responsive-vis.md",
"chars": 1524,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- STYLETYPE:\"example-page\" -->\n<!-- INJECT:\"ResponsiveVis\""
},
{
"path": "docs/examples/showcases/axes-showcase.md",
"chars": 90,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"AxesShowcase\" -->\n"
},
{
"path": "docs/examples/showcases/legends-showcase.md",
"chars": 93,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"LegendsShowcase\" -->\n"
},
{
"path": "docs/examples/showcases/misc-showcase.md",
"chars": 90,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"MiscShowcase\" -->\n"
},
{
"path": "docs/examples/showcases/plots-showcase.md",
"chars": 91,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"PlotsShowcase\" -->\n"
},
{
"path": "docs/examples/showcases/radar-chart-showcase.md",
"chars": 91,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"RadarShowcase\" -->\n"
},
{
"path": "docs/examples/showcases/radial-showcase.md",
"chars": 92,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"RadialShowcase\" -->\n"
},
{
"path": "docs/examples/showcases/sankeys-showcase.md",
"chars": 93,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"SankeysShowcase\" -->\n"
},
{
"path": "docs/examples/showcases/sunburst-showcase.md",
"chars": 93,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"SunburstSection\" -->\n"
},
{
"path": "docs/examples/showcases/treemaps-showcase.md",
"chars": 93,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- INJECT:\"TreemapShowcase\" -->\n"
},
{
"path": "docs/examples/stream-graph.md",
"chars": 254,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n<!-- STYLETYPE:\"example-page\" -->\n<!-- INJECT:\"StreamgraphExa"
},
{
"path": "docs/flexible-plots.md",
"chars": 2743,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Flexible plots\n\nBy default, XYPlot requires a width and a "
},
{
"path": "docs/getting-started/getting-started.md",
"chars": 3249,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n### Getting started\n\n#### Jump right in on codepen!\n\nYou can "
},
{
"path": "docs/getting-started/installing-react-vis.md",
"chars": 333,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n### Install the react-vis module\n\nIf you want to use react-vi"
},
{
"path": "docs/getting-started/new-react-vis-project.md",
"chars": 1514,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n### Create a new project with react-vis\n\nLet's create a new v"
},
{
"path": "docs/getting-started/react-vis-in-codepen.md",
"chars": 524,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n### Jump right in on codepen!\n\nYou can use react-vis directly"
},
{
"path": "docs/getting-started/your-first-chart.md",
"chars": 1201,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n### Your first chart\n\nWe tried to make react-vis syntax as cl"
},
{
"path": "docs/gradients.md",
"chars": 1391,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Gradient\n\nSometimes it is useful to style our svg componen"
},
{
"path": "docs/grids.md",
"chars": 2962,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Cartesian Grids\n\n<!-- INJECT:\"CustomAxisChartWithLink\" -->"
},
{
"path": "docs/heatmap-series.md",
"chars": 6227,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## HeatmapSeries:\n\n<!-- INJECT:\"HeatmapChartWithLink\" -->\n\nTh"
},
{
"path": "docs/hexbin-series.md",
"chars": 5134,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## HexbinSeries\n\nThe hexbin series enables the easy creation "
},
{
"path": "docs/highlight.md",
"chars": 3881,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Highlight\n\nThe highlight component enables use interaction"
},
{
"path": "docs/hint.md",
"chars": 2519,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Hint\n\n<!-- INJECT:\"DynamicComplexEdgeHintsWithLink\" -->\n\n`"
},
{
"path": "docs/interaction.md",
"chars": 23303,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Interaction\n\nInteraction in react-vis happens through _eve"
},
{
"path": "docs/label-series.md",
"chars": 5145,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## LabelSeries:\n\n<!-- INJECT:\"LabelSeriesExampleWithLink\" -->"
},
{
"path": "docs/legends.md",
"chars": 5678,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Legends\n\n<!-- INJECT:\"HorizontalDiscreteColorLegendExample"
},
{
"path": "docs/line-mark-series.md",
"chars": 9065,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# LineMarkSeries\n\nThe Line Mark series is a combination of a "
},
{
"path": "docs/line-series.md",
"chars": 6364,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# LineSeries/LineMarkSeries\n\n<!-- INJECT:\"LineChartWithLink\" "
},
{
"path": "docs/mark-series.md",
"chars": 7899,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## MarkSeries & MarkSeriesCanvas\n\n<!-- INJECT:\"ScatterplotCha"
},
{
"path": "docs/parallel-coordinates.md",
"chars": 6242,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# Parallel Coordinates\n\nParallel Coordinates provide a robust"
},
{
"path": "docs/polygon-series.md",
"chars": 4105,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## PolygonSeries:\n\n<!-- INJECT:\"TriangleExampleWithLink\" -->\n"
},
{
"path": "docs/presentation.md",
"chars": 761,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# React-vis\n\n__React-vis__ is a React visualization library. "
},
{
"path": "docs/radar-chart.md",
"chars": 6672,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# Radar Charts\n\nRadar charts provide a cute method for displa"
},
{
"path": "docs/radial-chart.md",
"chars": 5753,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# Radial chart\n\n`RadialChart` is responsible for creating pie"
},
{
"path": "docs/rect-series.md",
"chars": 7504,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# Rect Series\n\nRectSeries is a generalization of [BarSeries]("
},
{
"path": "docs/sankey.md",
"chars": 5879,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# Sankey\n\nSankey diagrams are a form of graph that allows for"
},
{
"path": "docs/scales-and-data.md",
"chars": 11657,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Scales and data\n\n### Data\n\nReact-Vis charts are made of Se"
},
{
"path": "docs/series.md",
"chars": 5246,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Series\n\nThe library supports several types of series:\n\n* ["
},
{
"path": "docs/style.md",
"chars": 2387,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Style\n\nIn order to control the look and feel of your React"
},
{
"path": "docs/sunburst.md",
"chars": 5293,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# Sunbursts\n\nSunbursts are a powerful way to demonstrate part"
},
{
"path": "docs/treemap.md",
"chars": 5703,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# Treemap\n\nTreemaps are a splendid way to represent data that"
},
{
"path": "docs/voronoi.md",
"chars": 2568,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## Voronoi\n\nVoronoi diagrams are useful for making a chart in"
},
{
"path": "docs/whisker-series.md",
"chars": 8253,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n## WhiskerSeries\n\n<!-- INJECT:\"WhiskerChartWithLink\" -->\n\nWhi"
},
{
"path": "docs/xy-plot.md",
"chars": 8966,
"preview": "> This library is deprecated. Please see `DEPRECATED.md`.\n\n# XYPlot\n\nXYPlot allows you to make line charts, area charts,"
},
{
"path": "package.json",
"chars": 1285,
"preview": "{\n \"name\": \"react-vis-master\",\n \"version\": \"1.12.0\",\n \"license\": \"MIT\",\n \"author\": \"Visualization Team <visualizatio"
},
{
"path": "packages/react-vis/.babelrc.json",
"chars": 77,
"preview": "{\n \"plugins\": [\n [\"module-resolver\", {\n \"root\": [\"src\"]\n }]\n ]\n}"
},
{
"path": "packages/react-vis/build-browser.sh",
"chars": 1445,
"preview": "#!/bin/bash\n# Browserify doesn't seem to support defining custom entry point for modules in node_modules\n# This build sc"
},
{
"path": "packages/react-vis/jest.config.js",
"chars": 435,
"preview": "/*eslint-env node*/\nconst path = require('path');\n\nmodule.exports = {\n transform: {\n '^.+\\\\.js$': path.resolve(__dir"
},
{
"path": "packages/react-vis/jest.setup.js",
"chars": 605,
"preview": "/*eslint-env node*/\nimport 'regenerator-runtime/runtime';\nimport jsdom from 'jsdom';\nimport Enzyme from 'enzyme';\nimport"
},
{
"path": "packages/react-vis/jestBabelTransform.js",
"chars": 209,
"preview": "/*eslint-env node*/\nconst babelJest = require('babel-jest');\n\n// see https://github.com/facebook/jest/issues/7359#issuec"
},
{
"path": "packages/react-vis/package.json",
"chars": 3485,
"preview": "{\n \"name\": \"react-vis\",\n \"version\": \"1.12.1\",\n \"license\": \"MIT\",\n \"author\": \"Visualization Team <visualization@uber."
},
{
"path": "packages/react-vis/src/animation.js",
"chars": 4264,
"preview": "import React, {PureComponent} from 'react';\nimport PropTypes from 'prop-types';\nimport {interpolate} from 'd3-interpolat"
},
{
"path": "packages/react-vis/src/index.js",
"chars": 4227,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/legends/continuous-color-legend.js",
"chars": 2904,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/legends/continuous-size-legend.js",
"chars": 3053,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/legends/discrete-color-legend-item.js",
"chars": 3005,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/legends/discrete-color-legend.js",
"chars": 3297,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/legends/searchable-discrete-color-legend.js",
"chars": 3132,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/main.scss",
"chars": 234,
"preview": "// special tag for using to check if the style file has been imported\n.react-vis-magic-css-import-rule {\n display: inhe"
},
{
"path": "packages/react-vis/src/make-vis-flexible.js",
"chars": 5754,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/parallel-coordinates/index.js",
"chars": 8835,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/axis/axis-line.js",
"chars": 2287,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/axis/axis-ticks.js",
"chars": 6782,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/axis/axis-title.js",
"chars": 4281,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/axis/axis.js",
"chars": 6523,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/axis/decorative-axis-ticks.js",
"chars": 3012,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/axis/decorative-axis.js",
"chars": 4168,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/axis/x-axis.js",
"chars": 1674,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/axis/y-axis.js",
"chars": 1672,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/borders.js",
"chars": 3407,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/chart-label.js",
"chars": 2586,
"preview": "// Copyright (c) 2018 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/circular-grid-lines.js",
"chars": 4013,
"preview": "// Copyright (c) 2016 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/content-clip-path.js",
"chars": 380,
"preview": "import React from 'react';\n\nexport default function ContentClipPath(props) {\n const {id = 'content-area', innerWidth, i"
},
{
"path": "packages/react-vis/src/plot/crosshair.js",
"chars": 5745,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/gradient-defs.js",
"chars": 1706,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/grid-lines.js",
"chars": 4395,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/highlight.js",
"chars": 8935,
"preview": "import React from 'react';\nimport PropTypes from 'prop-types';\n\nimport AbstractSeries from './series/abstract-series';\ni"
},
{
"path": "packages/react-vis/src/plot/hint.js",
"chars": 11264,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/horizontal-grid-lines.js",
"chars": 1772,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/abstract-series.js",
"chars": 8889,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/arc-series.js",
"chars": 7825,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/area-series.js",
"chars": 3882,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/bar-series-canvas.js",
"chars": 4789,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/bar-series.js",
"chars": 5169,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/canvas-wrapper.js",
"chars": 6788,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/contour-series.js",
"chars": 3786,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/custom-svg-series.js",
"chars": 6215,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/heatmap-series.js",
"chars": 3563,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/hexbin-series.js",
"chars": 3912,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/horizontal-bar-series-canvas.js",
"chars": 2031,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/horizontal-bar-series.js",
"chars": 1789,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/horizontal-rect-series-canvas.js",
"chars": 2032,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/horizontal-rect-series.js",
"chars": 1789,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/label-series.js",
"chars": 5266,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/line-mark-series-canvas.js",
"chars": 1763,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/line-mark-series.js",
"chars": 2046,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/line-series-canvas.js",
"chars": 3130,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/line-series.js",
"chars": 4129,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/mark-series-canvas.js",
"chars": 2736,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/mark-series.js",
"chars": 3973,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/polygon-series.js",
"chars": 2905,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/rect-series-canvas.js",
"chars": 3625,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/rect-series.js",
"chars": 3881,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/vertical-bar-series-canvas.js",
"chars": 2031,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/vertical-bar-series.js",
"chars": 1781,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/vertical-rect-series-canvas.js",
"chars": 2032,
"preview": "// Copyright (c) 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person obtainin"
},
{
"path": "packages/react-vis/src/plot/series/vertical-rect-series.js",
"chars": 1781,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/series/whisker-series.js",
"chars": 6762,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/vertical-grid-lines.js",
"chars": 1752,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/plot/voronoi.js",
"chars": 3240,
"preview": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport {voronoi} from 'd3-voronoi';\n\nimport {getAttribute"
},
{
"path": "packages/react-vis/src/plot/xy-plot.js",
"chars": 16535,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/radar-chart/index.js",
"chars": 11552,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/radial-chart/index.js",
"chars": 6820,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/sankey/index.js",
"chars": 6212,
"preview": "import React from 'react';\nimport PropTypes from 'prop-types';\nimport {\n sankey,\n sankeyLinkHorizontal,\n sankeyLeft,\n"
},
{
"path": "packages/react-vis/src/sankey/sankey-link.js",
"chars": 2263,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/styles/examples.scss",
"chars": 7475,
"preview": "@import '../main.scss';\n\n$black: #000;\n$white: #fff;\n\nbody {\n font-family: Sintony, Helvetica, sans-serif;\n font-size:"
},
{
"path": "packages/react-vis/src/styles/legends.scss",
"chars": 2156,
"preview": "$rv-legend-enabled-color: #3a3a48;\n$rv-legend-disabled-color: #b8b8b8;\n\n.rv-discrete-color-legend {\n box-sizing: border"
},
{
"path": "packages/react-vis/src/styles/plot.scss",
"chars": 2434,
"preview": "$rv-xy-plot-axis-font-color: #6b6b76;\n$rv-xy-plot-axis-line-color: #e6e6e9;\n$rv-xy-plot-axis-font-size: 11px;\n$rv-xy-plo"
},
{
"path": "packages/react-vis/src/styles/radial-chart.scss",
"chars": 83,
"preview": ".rv-radial-chart {\n\n .rv-xy-plot__series--label {\n pointer-events: none;\n }\n}\n"
},
{
"path": "packages/react-vis/src/styles/treemap.scss",
"chars": 339,
"preview": ".rv-treemap {\n font-size: 12px;\n position: relative;\n}\n\n.rv-treemap__leaf {\n overflow: hidden;\n position: absolute;\n"
},
{
"path": "packages/react-vis/src/sunburst/index.js",
"chars": 7104,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/theme.js",
"chars": 1893,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/treemap/index.js",
"chars": 6085,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/treemap/treemap-dom.js",
"chars": 2394,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/treemap/treemap-leaf.js",
"chars": 3343,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/treemap/treemap-svg.js",
"chars": 5578,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/utils/axis-utils.js",
"chars": 5228,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/utils/chart-utils.js",
"chars": 2891,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/utils/data-utils.js",
"chars": 2183,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/utils/react-utils.js",
"chars": 2523,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/utils/scales-utils.js",
"chars": 25245,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/utils/series-utils.js",
"chars": 8338,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/src/utils/styling-utils.js",
"chars": 1520,
"preview": "// Copyright (c) 2016 - 2019 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/tests/.eslintrc",
"chars": 70,
"preview": "{\n \"rules\": {\n \"max-len\": \"off\",\n \"react/jsx-key\": \"off\"\n }\n}\n"
},
{
"path": "packages/react-vis/tests/components/animation.test.js",
"chars": 1935,
"preview": "// Copyright (c) 2016 - 2017 Uber Technologies, Inc.\n//\n// Permission is hereby granted, free of charge, to any person o"
},
{
"path": "packages/react-vis/tests/components/arc-series.test.js",
"chars": 755,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport ArcSeries from 'plot/series/arc-series';\nimport {testRen"
},
{
"path": "packages/react-vis/tests/components/area-series.test.js",
"chars": 1891,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\n\nimport XYPlot from 'plot/xy-plot';\nimport AreaSeries from 'plo"
},
{
"path": "packages/react-vis/tests/components/axes.test.js",
"chars": 3976,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\n\nimport CustomAxes from '../../../showcase/axes/custom-axes';\ni"
},
{
"path": "packages/react-vis/tests/components/axis-tick-format.test.js",
"chars": 1371,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\n\nimport CustomAxisTickElement from '../../../showcase/axes/cust"
},
{
"path": "packages/react-vis/tests/components/axis-title.test.js",
"chars": 1934,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport AxisTitle from 'plot/axis/axis-title';\nimport {ORIENTATI"
},
{
"path": "packages/react-vis/tests/components/bar-series.test.js",
"chars": 4457,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport XYPlot from 'plot/xy-plot';\nimport HorizontalBarSeries f"
},
{
"path": "packages/react-vis/tests/components/borders.test.js",
"chars": 690,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport Borders from 'plot/borders';\nimport {testRenderWithProps"
},
{
"path": "packages/react-vis/tests/components/canvas-component.test.js",
"chars": 970,
"preview": "import HorizontalBarSeriesCanvas from 'plot/series/horizontal-bar-series-canvas';\nimport VerticalBarSeriesCanvas from 'p"
},
{
"path": "packages/react-vis/tests/components/circular-grid-lines.test.js",
"chars": 641,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport CircularGridLines from 'plot/circular-grid-lines';\nimpor"
},
{
"path": "packages/react-vis/tests/components/color-article.test.js",
"chars": 3955,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\n\nimport {\n SensibleDefaults,\n ColorInXYPlot,\n ColorSpecifici"
},
{
"path": "packages/react-vis/tests/components/contour-series.test.js",
"chars": 704,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport ContourSeries from 'plot/series/contour-series';\nimport "
},
{
"path": "packages/react-vis/tests/components/crosshair.test.js",
"chars": 919,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\n\nimport DynamicCrosshair from '../../../showcase/axes/dynamic-c"
},
{
"path": "packages/react-vis/tests/components/custom-svg-series.test.js",
"chars": 2349,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport CustomSVGSeries from 'plot/series/custom-svg-series';\nim"
},
{
"path": "packages/react-vis/tests/components/data-article.test.js",
"chars": 300,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\n\nimport {MiniCharts} from '../../../showcase/data/mini-data-exa"
},
{
"path": "packages/react-vis/tests/components/decorative-axis.test.js",
"chars": 1611,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport DecorativeAxis from 'plot/axis/decorative-axis';\nimport "
},
{
"path": "packages/react-vis/tests/components/gradient.test.js",
"chars": 944,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport GradientDefs from 'plot/gradient-defs';\nimport {testRend"
},
{
"path": "packages/react-vis/tests/components/grid-lines.test.js",
"chars": 1064,
"preview": "import React from 'react';\nimport {shallow} from 'enzyme';\nimport XYPlot from 'plot/xy-plot';\nimport LineSeries from 'pl"
},
{
"path": "packages/react-vis/tests/components/heatmap.test.js",
"chars": 2474,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport XYPlot from 'plot/xy-plot';\nimport HeatmapSeries from 'p"
},
{
"path": "packages/react-vis/tests/components/hexbin-series.test.js",
"chars": 2686,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport HexbinSeries from 'plot/series/hexbin-series';\nimport {t"
},
{
"path": "packages/react-vis/tests/components/highlight.test.js",
"chars": 5332,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport Highlight from 'plot/highlight';\nimport DragableExample "
},
{
"path": "packages/react-vis/tests/components/hints.test.js",
"chars": 590,
"preview": "import React from 'react';\nimport {shallow} from 'enzyme';\nimport Hint from 'plot/hint';\n\ndescribe('Hint', () => {\n tes"
},
{
"path": "packages/react-vis/tests/components/interaction-article.test.js",
"chars": 834,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\n\nimport {\n LinkedCharts,\n LineChartMouseOverXY,\n LineChartMo"
},
{
"path": "packages/react-vis/tests/components/label-series.test.js",
"chars": 1329,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport LabelSeries from 'plot/series/label-series';\nimport {tes"
},
{
"path": "packages/react-vis/tests/components/legends.test.js",
"chars": 4982,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport ContinuousSizeLegend from '../../../showcase/legends/con"
},
{
"path": "packages/react-vis/tests/components/line-series-canvas.test.js",
"chars": 1486,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport XYPlot from 'plot/xy-plot';\nimport LineSeriesCanvas from"
},
{
"path": "packages/react-vis/tests/components/line-series.test.js",
"chars": 6786,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport XYPlot from 'plot/xy-plot';\nimport LineSeries from 'plot"
},
{
"path": "packages/react-vis/tests/components/make-vis-flexible.test.js",
"chars": 622,
"preview": "import {makeWidthFlexible} from 'make-vis-flexible';\n\ndescribe('makeWidthFlexible', () => {\n test('displayName given', "
},
{
"path": "packages/react-vis/tests/components/mark-series.test.js",
"chars": 2318,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport MarkSeries from 'plot/series/mark-series';\nimport {testR"
},
{
"path": "packages/react-vis/tests/components/parallel-coordinates.test.js",
"chars": 3923,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport ParallelCoordinates from 'parallel-coordinates';\nimport "
},
{
"path": "packages/react-vis/tests/components/polygon-series.test.js",
"chars": 594,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport PolygonSeries from 'plot/series/mark-series';\nimport {te"
},
{
"path": "packages/react-vis/tests/components/radar-chart.test.js",
"chars": 4951,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport RadialChart from 'radial-chart';\nimport BasicRadarChart "
},
{
"path": "packages/react-vis/tests/components/radial.test.js",
"chars": 3708,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport RadialChart from 'radial-chart';\nimport SimpleRadialChar"
},
{
"path": "packages/react-vis/tests/components/rect-series.test.js",
"chars": 1250,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\nimport HorizontalRectSeries from 'plot/series/horizontal-bar-se"
},
{
"path": "packages/react-vis/tests/components/sankey.test.js",
"chars": 6178,
"preview": "import React from 'react';\nimport {mount} from 'enzyme';\n\nimport Sankey from 'sankey';\nimport Hint from 'plot/hint';\nimp"
}
]
// ... and 193 more files (download for full content)
About this extraction
This page contains the full source code of the uber/react-vis GitHub repository, extracted and formatted as plain text for AI agents and large language models (LLMs). The extraction includes 393 files (1.3 MB), approximately 382.1k tokens, and a symbol index with 831 extracted functions, classes, methods, constants, and types. Use this with OpenClaw, Claude, ChatGPT, Cursor, Windsurf, or any other AI tool that accepts text input. You can copy the full output to your clipboard or download it as a .txt file.
Extracted by GitExtract — free GitHub repo to text converter for AI. Built by Nikandr Surkov.