# @slashd/alpha

> The Slashd chart library

Latest version **0.0.7** (published 2023-03-12) · ISC license · 0 weekly downloads

## Install

```sh
npm install @slashd/alpha
pnpm add @slashd/alpha
yarn add @slashd/alpha
bun add @slashd/alpha
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.7 |
| Published | 2023-03-12 |
| First published | 2023-03-11 |
| Weekly downloads | 0 |
| License | ISC |
| TypeScript types | none |
| Module format | ESM |
| Node | >=16.0.0 |
| Dependencies | 7 |
| Unpacked size | 174.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Maintainers | abusedmedia |

## Links

- npm: https://www.npmjs.com/package/@slashd/alpha
- Homepage: https://slashd.cc
- npm.io page: https://npm.io/package/@slashd/alpha

## Dependencies (7)

- [d3](https://npm.io/package/d3.md) ^7.8.2
- [md5](https://npm.io/package/md5.md) ^2.3.0
- [dayjs](https://npm.io/package/dayjs.md) ^1.11.7
- [@slashd/run](https://npm.io/package/@slashd/run.md) file:../run
- [@slashd/wire](https://npm.io/package/@slashd/wire.md) ^0.0.2
- [d3-regression](https://npm.io/package/d3-regression.md) ^1.3.10
- [html-to-image](https://npm.io/package/html-to-image.md) ^1.11.11

## Recent versions

- 0.0.7 (latest) — 2023-03-12
- 0.0.6 — 2023-03-12
- 0.0.5 — 2023-03-11
- 0.0.4 — 2023-03-11
- 0.0.3 — 2023-03-11
- 0.0.2 — 2023-03-11
- 0.0.1 — 2023-03-11

## README

## Slashd

**Slashd** is a javascript library built on top of D3.js. It helps to create modern interactive dashboard.

It's powerful and easy to use. It brings automatic cross-linking between charts.







## Install

With **UnPkg CDN**:

```html
<script src="https://unpkg.com/@slashd/core"></script>
```



With **SkyPack CDN**:

```html
<script type="module">
import SlashdRun from 'https://cdn.skypack.dev/@slashd/core'
// your code
</script>
```



With a package manager:

```shell
npm install @slashd/core
```

Then, include it in the browser:

```html
<script src="node_modules/@slashd/core/dist/slashd-core.min.js"></script>
```

or with ES6 in a module with a bundler:

```js
import Slashd from '@slashd/core'
```





## How to use

How to create a chart:

```js
new Slashd(wrapper, config, data)
```

#### Wrapper

The wrapper can be both an HTML element or a CSS selector as well, so the following are equivalent:

```js
const chart1 = new Slashd('#chart1', config, data)
const chart2 = new Slashd(document.querySelector('#chart1'), config, data)
```

#### Config

The `config` is the object containing all the required configuration in order to build a chart.

#### Data

The `data` parameter is the dataset (array of objects) that will be used across all the charts. 



## How the cross-linking works

The cross-link capability works on top of a simple principle: every chart is a view of the same dataset. By selecting a mark, you are selecting a subset of the dataset that is sent to the other charts automatically.



## Charts

 Proper documentation is in progress. In the meantime, learn from the following examples on Codepen:

- A minimal example for **size-based charts** (pack, tree, pie, bar) with an inline data sample 
- A minimal example for plot chart with an inline data sample

#### 







#### Required Encoders

Alongside `type`, the other required options to see something on screen are the marker encoders. They allow to convert data columns (dimensions) into visual properties in order to draw markers properly.

They can be configured and they are required according to the `type`. For instance, the `pack` requires `size` while the `plot` requires both `x` and `y`.

The library comes with the following  properties:

- size (required by **pack**, **tree**, **pie**, **bar**)
- x (required by **plot**, **line**, **map**, **maplot**)
- y (required by **plot**, **line**, **map**, **maplot**)

Every property can be configured with the following options:



##### size

```js
{
  size:{
    key:'age', // column field
    op: 'sum', // sum|mean|min|max, default: sum
    ordinal: false,
    template: null,
      
    domain:'',
    range:''
    scale:'' // linear, ordinal, time, log
  }
}
```



##### x

```js
{
  x:{
    key:'age', // column field
    op: 'sum', // sum|mean|min|max, default: sum
    ordinal: false,
    template: null
  }
}
```



##### y

```js
{
  y:{
    key:'age', // column field
    op: 'sum', // sum|mean|min|max, default: sum
    ordinal: false,
    template: null
  }
}
```









## color & opacity

```js
{
  color:{
    key:'age', // column field
    value: '', // the colors source, multiple types of value
    template: 'index % 2 === 0 ? "red" : "blue"' // js
  }
}
```

Opacity

```js
{
  opacity:{
    key:'age', // column field
    template: 0.5 // or expression
  }
}
```





## Transformers

Transformers are data transformation functions that are meant to transform the incoming data-source to a proper structure before feeding it to the chart builder.

90% of the time you only need `group` transformer but further capabilities are present to solve more edge cases.

Now, a question might be relevant: **Why not transforming the data before using it with the chart library?** This is what almost all other chart libraries do actually. 

The answer is: *the whole concept of **Slashd** connected capability is based on one single requirement: All charts share the same original data source and each instance apply specific per-chart data transformation in order to build the visualization.*



#### group

```js
{
  group: 'age'
}
```



#### sort

```js
{
  sort: 'age' // default ascending
}
```



```js
{
  sort:{
    key: 'age', // column field, default: null
    dir: 'desc' // asc|desc, default: desc
  }
}
```



#### filter

You can use `datum` and `index` in the filter statement:

```js
{
  filter: 'datum.age < 22'
}
```









## Special calculations



#### Geo

If the dataset contains column containing the country value, it's possible to derive the geo location coordinates of it:

```js
{
  geo: 'country'
}
```

#### Time

In the same way, a column with a time information can be parsed and converted properly:

```js
{
  time: 'timestamp'
}
```





## Components

Built-in components are common components that can be used in, almost, any chart types. They can be enabled and configured. Some chart types override some of component' properties for obvious reasons (i.e. axis don't make sense in Pie chart).

- title
- labels
- ax (x axis)
- ay (y axis)
- tooltip
- toolbar
- legend
- regression







## Cross communication











### Contribute

Clone the repo and install the dependencies:

```shell
npm i
```


Start the watcher

```shell
npm start 
```

---
_Source: https://npm.io/package/@slashd/alpha · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._