@slashd/alpha NPM

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:

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

With SkyPack CDN:

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

With a package manager:

npm install @slashd/core

Then, include it in the browser:

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

or with ES6 in a module with a bundler:

import Slashd from '@slashd/core'

How to use

How to create a chart:

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:

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

{
  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

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

y

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

color & opacity

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

Opacity

{
  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

{
  group: 'age'
}

sort

{
  sort: 'age' // default ascending
}

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

filter

You can use datum and index in the filter statement:

{
  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:

{
  geo: 'country'
}

Time

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

{
  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).