Skip to content

Commit

Permalink
docs(readme): add depreaction message
Browse files Browse the repository at this point in the history
  • Loading branch information
Gergely Nemeth committed Jan 9, 2020
1 parent 712ea62 commit 929ea95
Show file tree
Hide file tree
Showing 45 changed files with 129 additions and 36 deletions.
2 changes: 2 additions & 0 deletions README.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
<p align="right">
<a href="https://npmjs.org/package/react-vis">
<img src="https://img.shields.io/npm/v/react-vis.svg?style=flat-square" alt="version" />
Expand Down
2 changes: 2 additions & 0 deletions docs/animation.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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:
Expand Down
2 changes: 2 additions & 0 deletions docs/arc-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## ArcSeries:

<!-- INJECT:"ArcSeriesExampleWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/area-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# AreaSeries

<!-- INJECT:"AreaChartWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/axes.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## Axes

<!-- INJECT:"CustomAxesOrientationWithLink" -->
Expand Down
4 changes: 3 additions & 1 deletion docs/bar-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# Bar Series

**TLDR**: use bar series to make bar charts, but not histograms.
Expand Down Expand Up @@ -128,7 +130,7 @@ A list of CSS properties to style the series outside of the explicitly set prope

#### 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
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
Expand Down
2 changes: 2 additions & 0 deletions docs/borders.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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.
Expand Down
2 changes: 2 additions & 0 deletions docs/chart-label.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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:
Expand Down
2 changes: 2 additions & 0 deletions docs/colors.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## Color

Color can be set and affected in many ways in React-vis.
Expand Down
2 changes: 2 additions & 0 deletions docs/contour-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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!
Expand Down
2 changes: 2 additions & 0 deletions docs/crosshair.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## Crosshair

<!-- INJECT:"DynamicCrosshairWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/custom-svg-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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.
Expand Down
3 changes: 3 additions & 0 deletions docs/decorative-axis.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## DecorativeAxis

<!-- INJECT:"ParallelCoordinatesExampleWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/flexible-plots.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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.
Expand Down
18 changes: 10 additions & 8 deletions docs/getting-started/getting-started.md
Original file line number Diff line number Diff line change
@@ -1,8 +1,10 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
### Getting started

#### Jump right in on codepen!

You can use react-vis directly on [codepen](https://codepen.io/ubervisualization/pen/BZOeZB) (or equivalent).
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.
Expand All @@ -11,7 +13,7 @@ But you can simply just use that [pen](https://codepen.io/ubervisualization/pen/

#### Install the react-vis module

If you want to use react-vis in your project, add it from the command line:
If you want to use react-vis in your project, add it from the command line:

```
npm install react-vis
Expand All @@ -22,9 +24,9 @@ npm install react-vis
#### 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.
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:
If you haven't installed yet, do so:

```
npm install -g create-react-app
Expand All @@ -37,9 +39,9 @@ cd my-awesome-vis-app
npm install react-vis
```

That's it! you are now ready to create amazing charts.
That's it! you are now ready to create amazing charts.

Let's edit create-react-app's default App.js:
Let's edit create-react-app's default App.js:

```jsx
import React, { Component } from 'react';
Expand Down Expand Up @@ -80,13 +82,13 @@ and then on the command line interface:
npm run start
```

and your chart is in the browser.
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.
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:

Expand Down
4 changes: 3 additions & 1 deletion docs/getting-started/installing-react-vis.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
### Install the react-vis module

If you want to use react-vis in your project, add it from the command line:
If you want to use react-vis in your project, add it from the command line:

```
npm install react-vis
Expand Down
12 changes: 7 additions & 5 deletions docs/getting-started/new-react-vis-project.md
Original file line number Diff line number Diff line change
@@ -1,9 +1,11 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
### 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.
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:
If you haven't installed yet, do so:

```
npm install -g create-react-app
Expand All @@ -16,9 +18,9 @@ cd my-awesome-vis-app
npm install react-vis
```

That's it! you are now ready to create amazing charts.
That's it! you are now ready to create amazing charts.

Let's edit create-react-app's default App.js:
Let's edit create-react-app's default App.js:

```jsx
import React, { Component } from 'react';
Expand Down Expand Up @@ -59,6 +61,6 @@ and then on the command line interface:
npm run start
```

and your chart is in the browser.
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.
4 changes: 3 additions & 1 deletion docs/getting-started/react-vis-in-codepen.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
### Jump right in on codepen!

You can use react-vis directly on [codepen](https://codepen.io/ubervisualization/pen/BZOeZB) (or equivalent).
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.
Expand Down
4 changes: 3 additions & 1 deletion docs/getting-started/your-first-chart.md
Original file line number Diff line number Diff line change
@@ -1,6 +1,8 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
### 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.
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:

Expand Down
2 changes: 2 additions & 0 deletions docs/gradients.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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.
Expand Down
2 changes: 2 additions & 0 deletions docs/grids.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## Cartesian Grids

<!-- INJECT:"CustomAxisChartWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/heatmap-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## HeatmapSeries:

<!-- INJECT:"HeatmapChartWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/hexbin-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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!
Expand Down
2 changes: 2 additions & 0 deletions docs/highlight.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## 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!
Expand Down
2 changes: 2 additions & 0 deletions docs/hint.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## Hint

<!-- INJECT:"DynamicComplexEdgeHintsWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/interaction.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## Interaction

Interaction in react-vis happens through _event handlers_ which are triggered by certain interactive events, such as mouse movement or clicks.
Expand Down
2 changes: 2 additions & 0 deletions docs/label-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## LabelSeries:

<!-- INJECT:"LabelSeriesExampleWithLink" -->
Expand Down
3 changes: 3 additions & 0 deletions docs/legends.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## Legends

<!-- INJECT:"HorizontalDiscreteColorLegendExampleWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/line-mark-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# 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.
Expand Down
2 changes: 2 additions & 0 deletions docs/line-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# LineSeries/LineMarkSeries

<!-- INJECT:"LineChartWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/mark-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## MarkSeries & MarkSeriesCanvas

<!-- INJECT:"ScatterplotChartWithLink" -->
Expand Down
2 changes: 2 additions & 0 deletions docs/parallel-coordinates.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# 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.
Expand Down
3 changes: 3 additions & 0 deletions docs/polygon-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,6 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
## PolygonSeries:

<!-- INJECT:"TriangleExampleWithLink" -->
Expand Down
4 changes: 3 additions & 1 deletion docs/radar-chart.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# Radar Charts

Radar charts provide a cute 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/Radar_chart), it's got some really neat examples.
Expand Down Expand Up @@ -156,7 +158,7 @@ Type: `function(d, {event})`

#### 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.
`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.

#### onSeriesMouseOver (optional)
Type: `function(d, {event})`
Expand Down
2 changes: 2 additions & 0 deletions docs/radial-chart.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# Radial chart

`RadialChart` is responsible for creating pie and donut charts. While this kind of chart is easy to overlook as insignificant, intentionally confusing, or almost always replaceable with a treemap; they can be useful for quickly showing small groups. People don't understand angles very well [(such is our biology)](https://www.interaction-design.org/literature/book/the-encyclopedia-of-human-computer-interaction-2nd-ed/data-visualization-for-human-perception), but over the last hundred years we have seen a lot of pie charts! This has caused us to become intimately familiar with them.
Expand Down
2 changes: 2 additions & 0 deletions docs/rect-series.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# Rect Series

RectSeries is a generalization of [BarSeries](bar-series.md) which allows users to build a series of rectangles of arbitrary dimensions. Whereas in barSeries, one dimension of the bars is fixed (width for vertical bar series, height for horizontal bar series), in RectSeries, both dimensions can be controlled.
Expand Down
2 changes: 2 additions & 0 deletions docs/sankey.md
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
> react-vis is deprecated in favor of a new charting library that we'll introduce in 2020. We will keep you folks updated here!
# Sankey

Sankey diagrams are a form of graph that allows for the easy communication of flows and other transferal processes.
Expand Down
Loading

0 comments on commit 929ea95

Please sign in to comment.