open-index/open-npm huggingface dataset:
npm package: @svizzle/atlas
Description: Svizzle Atlas contains geographic boundaries for mapping.
Author: nestauk
Latest version: 0.9.2

## `@svizzle/atlas`

Svizzle Atlas contains geographic boundaries data for mapping.

https://nestauk.github.io/svizzle

### Installation

*npm*

`npm i -S @svizzle/atlas`


### Distribution files

Files fetched or processed via `@svizzle/atlas` are distributed in [this repo](git@github.com:nestauk/svizzle_atlas_distro.git), which is a registered as a git [submodule](https://git-scm.com/book/en/v2/Git-Tools-Submodules), so the first time you clone `svizzle` please use:

```
git clone --recurse-submodules git@github.com:nestauk/svizzle.git
```

to make sure to fetch it.

If you already cloned it and forgot `--recurse-submodules`, you can run:

```
git submodule update --init
```
npm package: @svizzle/dom
Description: Svizzle DOM contains DOM related helpers.
Author: nestauk
Latest version: 0.7.3

## `@svizzle/dom`

Svizzle DOM contains DOM related helpers.

https://nestauk.github.io/svizzle

### Installation

*npm*

`npm i -S @svizzle/dom`

*browser*

```
<script src="https://unpkg.com/@svizzle/dom">
```
npm package: @svizzle/geo
Description: Svizzle Geo contains geography related helpers.
Author: nestauk
Latest version: 0.9.3

## `@svizzle/geo`

Svizzle Geo contains geography related helpers.

https://nestauk.github.io/svizzle

### Installation

*npm*

`npm i -S @svizzle/geo`

*browser*

```
<script src="https://unpkg.com/@svizzle/geo">
```
npm package: @svizzle/geometry
Description: Svizzle Geometry contains geometry related helpers.
Author: nestauk
Latest version: 0.6.1

## `@svizzle/geometry`

Svizzle Geometry contains geometry related helpers.

https://nestauk.github.io/svizzle

### Installation

*npm*

`npm i -S @svizzle/geometry`

*browser*

```
<script src="https://unpkg.com/@svizzle/geometry">
```
npm package: @svizzle/hierarchy
Description: Svelte charts for hierarchical data.
Author: nestauk
Latest version: 0.1.0

# Treemap Component

The `Treemap` Svelte component from the Svizzle library is designed for
visualizing hierarchical data using a treemap layout.

## Overview

The `Treemap` component uses a treemap layout to represent hierarchical data as
a set of nested rectangles. Each branch of the tree is given a rectangle, which
is then tiled with smaller rectangles representing sub-branches.

Note that in this version the `Treemap` doesn't support hierarchies with more
than one level of depth as we are for now porting it as-is from a project where
we didn't have a deeper data structure.

## Installation

To use the `Treemap` component, first install the Svizzle library:

```bash
npm install @svizzle/hierarchy
```

## Usage

Here's a basic example of how to use the `Treemap` component in your Svelte
application:

```html
<script>
  import {Treemap} from '@svizzle/ui';
  // Import or define your data
  const items = [/* your hierarchical data */];
</script>

<Treemap {items} />
```

## Props

- `items`: The hierarchical data to be displayed. This should be an array of objects.
- `geometry`: Optional. An object to customize the layout of the treemap, including padding and text positioning.
- `keyAccessor`: Optional. A function to access the key from each data item (default is `getKey`).
- `valueAccessor`: Optional. A function to access the value from each data item (default is `getValue`).
- `keyToColorFn`: Optional. A function to determine the color of each rectangle based on its key.
- `keyToColorLabelFn`: Optional. A function to determine the color of the label text for each rectangle.

## Features

- **Responsive Design**: Automatically adjusts to the container's size.
- **Customizable Layout**: Control over text positioning and rectangle padding.
- **Interactive**: Dispatches events for mouse and touch interactions on the treemap leaves.
- **Color Customization**: Functions to define custom colors for rectangles and labels.

## Events

The component dispatches several events for interaction:

- `leafHovered`: Fired when a leaf is hovered over.
- `leafExited`: Fired when the mouse exits a leaf.
- `leafTouchStarted`: Fired when a touch interaction starts on a leaf.
- `leafTouchEnded`: Fired when a touch interaction ends on a leaf.
npm package: @svizzle/histogram
Description: Svelte histogram component and histogram utilities.
Author: nestauk
Latest version: 0.6.8

# Histogram

Histogram components and utilities.

The `HistogramG` component can be used within an SVG element (its main element being a `g`).

The `HistogramDiv` component can be used within an HTML element (its main element being a `div`) and has the same props of `HistogramG` excluding `width` and `height` and with the addition of `headerHeight`, `padding` and `title`.

[Utilities](packages/components/histogram/src/utils.js) can be useful when binning data.
npm package: @svizzle/legend
Description: Legend Svelte components
Author: nestauk
Latest version: 0.4.8

# ColorScale

Color scale components.

The `ColorScaleG` component can be used within an SVG element (its main element being a `g`).

The `ColorScaleDiv` component can be used within an HTML element (its main element being a `div`) and has the same props of `ColorScaleG` excluding `width` and `height`.
npm package: @svizzle/request
Description: Svizzle Request contains helpers for fetching data.
Author: nestauk
Latest version: 0.5.4

## `@svizzle/request`

Svizzle Request contains helpers for fetching data.

https://nestauk.github.io/svizzle

### Installation

*npm*

`npm i -S @svizzle/request`

*browser*

```
<script src="https://unpkg.com/@svizzle/request">
```
npm package: @svizzle/trends
Description: Trends charts for Svelte.
Author: nestauk
Latest version: 0.1.0

# Svizzle Trends Components

This package includes a set of Svelte components for visualizing trend data.
Each component is designed for customization and responsiveness, with shared
common features and props.

## Installation

To use the components, first install the Svizzle library:

```bash
npm install @svizzle/trends
```

## Components

### `StreamGraph`

Renders a sorted stream graph.

#### Unique Props
- `groups`: Defines groups for stream graph data.
- `groupToColorFn`: Function to assign colors to different groups.
- `points`: Data points for the stream graph.
- `sorting`: Sorting order of the stream graph ('off', 'asc', 'desc').

#### Events
- `areaHovered`: Emitted when an area is hovered over.
- `areaExited`: Emitted when the cursor exits an area.
- `areaTouchStarted`: Emitted when a touch starts on an area.
- `areaTouchEnded`: Emitted when a touch ends on an area.

#### Usage

\```html
<StreamGraph {groups} {points} />
\```

### `Trends`

Renders simple trend lines with optional dots.

#### Unique Props
- `hero`: Highlight a specific data point.
- `keyToColorFn`: Function to map keys to colors.
- `preformatDate`: Function to format date.
- `trends`: Data for trend lines.
- `trendType`: Type of trend ('progressive', 'cumulative').

#### Events
- `dotHovered`: Emitted when a dot is hovered over.
- `dotExited`: Emitted when the cursor exits a dot.
- `dotTouchStarted`: Emitted when a touch starts on a dot.
- `dotTouchEnded`: Emitted when a touch ends on a dot.

#### Usage

\```html
<Trends {trends} />
\```

### `PercentilesTrends`

Visualizes percentile trends.

#### Unique Props
- `areaLowKeyToColor`: Function to assign colors to area based on the lower key.
- `config`: Configuration for areas and trends.
- `items`: Data items for percentiles.
- `keyToColorFn`: Function to map keys to colors.

#### Events
- `areaHovered`: Emitted when an area is hovered over.
- `areaExited`: Emitted when the cursor exits an area.
- `areaTouchStarted`: Emitted when a touch starts on an area.
- `areaTouchEnded`: Emitted when a touch ends on an area.

#### Usage

\```html
<PercentilesTrends {items} />
\```

## Common Properties

These properties are common across all components:

- `axesLabels`: Labels for axes.
- `geometry`: Customization of graph geometry (e.g., margins, padding).
- `keyFilterFn`: Function to filter keys.
- `keyFormatFn`: Function to format keys (default: identity function).
- `keyType`: Type of key (e.g., 'date').
- `theme`: Custom theming options.
- `valueFormatFn`: Function to format values.
- `yTicksCount`: Number of ticks on the Y-axis.

Customize the components by passing in the common properties for aspects like
colors, stroke widths, and labels. Refer to the source code for detailed
information on props and customization options for each component.
npm package: @svizzle/utils
Description: Svizzle Utils is a library to help transforming data.
Author: nestauk
Latest version: 0.21.0

## `@svizzle/utils`

Svizzle Utils is a library to help transforming data types.

https://nestauk.github.io/svizzle

### Installation

*npm*


`npm i -S @svizzle/utils`

*browser*

```
<script src="https://unpkg.com/@svizzle/utils">
```

### Directory structure

In this package, *the modules path tries to convey the type signature* of the functions in the module.

For example:

- [`@svizzle/utils/array/object`](https://nestauk.github.io/svizzle/module-@svizzle_utils_array_object.html) contains functions expecting an array and returning an object:

  `Array -> Object`.

  For example, `makeAllOccurrences` expects an `Array` of objects and returns an `Object` of occurrences of all the keys.

  ```js
  const objects = [{a: 1}, {a: 6, b: -1}, {a: 2, b: 0, c: 1}, {c: 4, e: 2}];

  makeAllOccurrences(objects) // {a: 3, b: 2, c: 2, e: 1}
  ```

  Sometimes a function expects more than one argument: in this case the directory reports the type of the first argument.

  For example `makeOccurrences` expects two `Array`s and return an object of occurrences of keys in the provided array containing the provided keys:

  ```js
  > objects = [{a: 1}, {a: 6, b: -1}, {a: 2, b: 0, c: 1}, {c: 4, e: 2}];

	> makeOccurrences(objects, ['a', 'b'])
	{a: 3, b: 2}
	> makeOccurrences(objects, ['c', 'e'])
	{c: 2, e: 1}
	> makeOccurrences(objects, ['k', 'a'])
	{k: 0, a: 3}
  ```

- Similarly, [`@svizzle/utils/array_proto-string`](https://nestauk.github.io/module-@svizzle_utils_array_proto-string.html) contains functions derived from the `Array.prototype` hence expecting an `Array` as a first argument (and potentially other arguments of different type) and returning a `String`:

  `(Array, *+) -> String`.

  For example, `join` expects an `Array` and a `String` and returns an `String`.

  ```js
	> join([0, 1, 2], '-')
	'0-1-2'
  ```

- [`@svizzle/utils/array-[number-boolean]`](https://nestauk.github.io/svizzle/module-@svizzle_utils_array-%255Bnumber-boolean%255D.html) contains functions expecting an `Array` and returning a function expecting an `Number` and returning a `Boolean`:

  `Array -> (Number -> Boolean)`.

  For example, `makeIsWithinRange` expects a range (an `Array`) and returns a function expecting a `Number` and returning if that number is within the given range or not (a `Boolean`).

  ```js
  > isWithinRange = makeIsWithinRange([0, 5]);
	> isWithinRange(2)
	true
	> isWithinRange(8)
	false
  ```