# svelte-attention-vis

> Simple attention component for visualizing connectivity matrices between two lists of tokens

Latest version **0.0.3** (published 2020-09-03) · 0 weekly downloads

## Install

```sh
npm install svelte-attention-vis
pnpm add svelte-attention-vis
yarn add svelte-attention-vis
bun add svelte-attention-vis
```

## Health

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

Positive: esm support; no vulnerabilities.

Warnings: low downloads; no types; low quality score; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2020-09-03 |
| First published | 2020-09-03 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 4 |
| Unpacked size | 198.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Ben Hoover |
| Maintainers | bhoov |
| Keywords | svelte |

## Links

- npm: https://www.npmjs.com/package/svelte-attention-vis
- npm.io page: https://npm.io/package/svelte-attention-vis

## Dependencies (4)

- [d3](https://npm.io/package/d3.md) ^6.1.1
- [d3-scale](https://npm.io/package/d3-scale.md) ^3.2.2
- [@types/d3](https://npm.io/package/@types/d3.md) ^5.7.2
- [@types/d3-scale](https://npm.io/package/@types/d3-scale.md) ^2.2.0

## Recent versions

- 0.0.3 (latest) — 2020-09-03
- 0.0.2 — 2020-09-03
- 0.0.1 — 2020-09-03

## README

# svelte-attention

## Installation
```
yarn add attention-vis
```

or

```
npm install attention-vis --save
```

## Basic Usage
A compiled svelte component is really just plain old javascript, and you can use it in the following way:

### Plain ol' javascript

```javascript
import Attention from 'svelte-attention-vis'

function randomArr(length) {
  return Array.from(Array(length)).map((x) => Math.random());
}

let tokens = ["Hello", "world", "."];
let tokensTarget = ["What", "is", "the", "meaning", "of", "life", "?"]; // If not provided, defaults to `tokens`
let attentions = tokens.map((t) => randomArr(tokensTarget.length)); // Matrix of shape (nTokens, nTokensTarget)



let attention = new Attention({
    target: document.body,
    props: {
      tokens,
      tokensTarget,
      attentions
    }
    });
```

The "target" is where the component is created. Here it is added to the html body with "document.body", but it could also be document.getElementById('id-of-html-element'). 

You initialize properties with "props" and you can change the prop values by just assigning the props to new values - this will be updated in the UI. 

### Svelte project
Of course, the easiest would be to simply use it as a Svelte component in another Svelte project, with prop modification shown:

```html
<script>
  import Attention from "svelte-attention-vis";

  function randomArr(length) {
    return Array.from(Array(length)).map((x) => Math.random());
  }

  let tokens = ["Hello", "world", "."];
  let tokensTarget = ["What", "is", "the", "meaning", "of", "life", "?"]; // If not provided, defaults to `tokens`
  let attentions = tokens.map((t) => randomArr(tokensTarget.length)); // Matrix of shape (nTokens, nTokensTarget)

  let attProps = {
    tokens,
    tokensTarget,
    attentions,
  };
</script>

<Attention {...attProps} />
```

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