vue-custom-plot

KO | EN

gitlite — search

#python #hacktoberfest #ai #typescript #golang #go #android #deep-learning #docker #nodejs #awesome #pytorch #mcp #ios

vue-custom-plot

(★ 13)

A component for rendering custom scatter plots in vue with a scoped slot

vue-custom-plot Latest Version Download

Download Latest Version (.zip)

// repository documentation

Was this content helpful?

★ 0 (0 ratings)

# vue-custom-plot

A Vue component for making custom scatter plots. This component does all of the math for you, so you make all the decisions about how your data renders.

## Installation

If you're using npm:

```
npm -i --save vue-custom-plot
```

Then include the component in your project like so:

```js
import { CustomPlot } from "vue-custom-plot"
```

## Usage

**[Follow along with this example on codesandbox.](https://codesandbox.io/s/xllnyyjww?module=%2Fsrc%2FApp.vue)**

We're going to make a _really_ basic scatter plot that looks like this:

![scatter plot preview](https://raw.githubusercontent.com/trainorpj/vue-custom-plot/master/assets/usage-preview.png)

All you need to get started with vue-custom-plot is the dimensions for your plot, and data in an array. Your data should be an array of objects, like this:

```js
var myPoints = [{"x": 13, "y": 401, "z": 0.6}, ... ]
```

We'll use this example going forward. Our data has `x`, `y`, and `z` values.

> **Note**: If you're making data visualizations, it's helpful to know about scalable vector graphics ([svg](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial/Introduction)).

Suppose your component data looks like this:

```js
data() {
  return {
    // we'll populate our component with some data points
    dataPoints: myPoints,

// we also need dimensions for svg
    width: 450,
    height: 450,
  }
}
```

You'll set up your template like so:

```html

<svg :width="width" :height="height">

</svg>
```

Now, vue-custom-plot needs three props to work: `xy-data`, `width`, and `height`. When we pass these props, vue-custom-plot will provide additional data back to us, namely the data we need to actually render our component.

We add the following to our template:

</CustomPlot>

</svg>
```

Vue-custom-plot has given us access to `computedData`, which is a array of object of the form:

```js
computedData = [{
  x // the original x
  y // the original y
  svgx // the x-coordinate for where the original x maps to on the svg
  svgy // the y-coordinate for where the original y maps to on the svg
  key // a simple key to use when rendering your data
  attrs: {
    z // the original z-value
    // any other data points that are not x or y go here
  }
} ... ]
```

We'll use `computedData` to visualize our data. We'll render circles whose opacity depends on the original z-value of our data (which is between 0 and 1). We complete our template:

```html

<svg :width="width" :height="height">
  
  <CustomPlot :xy-data="dataPoints" :width="width" :height="height">
    
    <g slot-scope="{ computedData }">
      
      <circle v-for="point in computedData"
        :key="point.key"
        :cx="point.svgx"
        :cy="point.svgy"
        :r="8"
        fill="midnightblue"
        :opacity="point.attrs.z">
      </circle>

</g>

</CustomPlot>

</svg>
```

## Component Documentation

### `<CustomPlot>`

#### Usage

```html
<CustomPlot
  :xy-data="myData"
  :width="width"
  :x-accessor="'xVariableName'"
  :y-accessor="d => doSomethingTo(d.yVariable)"
  :height="height"
  :marginTop="margin"
  :marginLeft="margin">

</g>

</CustomPlot>
```

#### Properties

#### Scoped-Slot

| Child Data   | Type     | Description                                                              |
| :----------- | :------- | :----------------------------------------------------------------------- |
| computedData | Array    | Array of objects containing original x/y data, and their svg coordinates |
| xScale       | Function | Scale taking x-values to their svg-coordinates                           |
| yScale       | Function | Scale taking y-values to their svg-coordinates                           |
| svg          | Object   | Object with dimension data, `{left, top, width, height}`                 |

Here's the relationship between `xyData` and `compuedData`:

```js
// xyData
[{x, y, z, somethingElse}, ...]
```

```js
// computedData
[{
  x // the original x-value, chosen with xAccessor
  y // the original y-value, chosen with yAccessor
  svgx // the original x-value passed through xScale
  svgy // the original y-value passed through yScale
  key // a simple key to use when rendering your data
  attrs: {
    // the original data goes in here
    x // the original x-value, not chosen with xAccessor
    y // the original y-value, not chosen with yAccessor
    z // the original z-value
    somethingElse // the original somethingElse-value
  }
} ... ]
```

### `<Axis>`

Coming Soon :blush:

## Philosophy

Below is some of my original thoughts on how Vue could be use to make custom plots.

> [See this thread for how I came up with this idea](https://twitter.com/pj_trainor/status/972930303374307328)
>
> Check out these demos:
>
> 1.  [First cut](https://codesandbox.io/s/n98jqj84jl)
> 2.  [Introduce chart-provider](https://codesandbox.io/s/l34zj5x82l)
> 3.  [Scoped Slots are nuts](https://codesandbox.io/s/2jq8q63ryj)

vue-custom-plot

vue-custom-plot Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

vue-custom-plot

vue-custom-plot Latest Version Download

Today's picks

Was this content helpful?

Recent Feedback

Download README