# d3-lit

> d3 using web components

Latest version **0.0.1** (published 2020-02-23) · MIT license · 0 weekly downloads

## Install

```sh
npm install d3-lit
pnpm add d3-lit
yarn add d3-lit
bun add d3-lit
```

## 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.1 |
| Published | 2020-02-23 |
| First published | 2020-02-23 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | ESM + CommonJS |
| Dependencies | 1 |
| Unpacked size | 8.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Jens Ox |
| Maintainers | jens-ox |
| Keywords | d3, d3-axis, lit-html, litelement |

## Links

- npm: https://www.npmjs.com/package/d3-lit
- Repository: https://github.com/jens-ox/d3-lit
- Homepage: https://github.com/jens-ox/d3-lit#readme
- Issues: https://github.com/jens-ox/d3-lit/issues
- npm.io page: https://npm.io/package/d3-lit

## Dependencies (1)

- [lit-element](https://npm.io/package/lit-element.md) ^2.2.1

## Alternatives

- [@tsparticles/shape-image](https://npm.io/package/@tsparticles/shape-image.md) — 303.7K weekly downloads
- [@tsparticles/shape-line](https://npm.io/package/@tsparticles/shape-line.md) — 233.7K weekly downloads
- [stringify-attributes](https://npm.io/package/stringify-attributes.md) — 58.6K weekly downloads
- [mobile-drag-drop](https://npm.io/package/mobile-drag-drop.md) — 46.3K weekly downloads
- [@comunica/actor-rdf-parse-html](https://npm.io/package/@comunica/actor-rdf-parse-html.md) — 29.2K weekly downloads

## Recent versions

- 0.0.1 (latest) — 2020-02-23

## README

### Motivation

The parts of D3 that are meant to directly produce DOM elements are hard to use with frameworks, because manual work is needed to correctly react to changes. Avoiding this is one of the reasons why frontend frameworks exist in the first place, so this feels like a step back for some people.

You can of course use things like d3-axis with frontend frameworks like Preact, but it's not that pretty: you have to use ref callbacks (see [Mike Bostock's post for an example](https://medium.com/@mbostock/why-you-should-use-d3-ae63c276e958)). In Vue.js, ref callbacks don't even exist. Many visualization libraries, e.g. [vx](https://github.com/hshoff/vx), implement things like axes from scratch, because it's easier that way.

Web Components allow us to build components that react to changes and are both usable in vanilla JavaScript and modern frameworks.

### Usage

This is obviously experimental and not meant to be used in a "serious" environment.

Refer to [the LitElement usage guide](https://lit-element.polymer-project.org/guide/use) for a guide on how to use the components.

The API is nearly the same as [D3's API](https://github.com/d3/d3-axis):

```html
<body>
  <d3-axis></d3-axis>
</body>
<script>
  const axis = document.querySelector('d3-axis')
  axis.tickSizeInner = 12
  console.log(axis.tickSizeInner) // 12
</script>
```

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