https://github.com/jens-ox/d3-lit
Experimental D3 element ports to Web Components using lit-html
https://github.com/jens-ox/d3-lit
d3 lit-html visualization web-components
Last synced: about 2 months ago
JSON representation
Experimental D3 element ports to Web Components using lit-html
- Host: GitHub
- URL: https://github.com/jens-ox/d3-lit
- Owner: jens-ox
- Created: 2020-02-23T10:36:28.000Z (over 6 years ago)
- Default Branch: master
- Last Pushed: 2020-05-17T18:46:55.000Z (about 6 years ago)
- Last Synced: 2025-03-09T13:35:07.252Z (over 1 year ago)
- Topics: d3, lit-html, visualization, web-components
- Language: JavaScript
- Homepage: https://stoic-wescoff-1406d9.netlify.app/
- Size: 106 KB
- Stars: 3
- Watchers: 1
- Forks: 0
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
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
const axis = document.querySelector('d3-axis')
axis.tickSizeInner = 12
console.log(axis.tickSizeInner) // 12
```
For a simple Line Graph, you can either proceed like in the example above or use it inside of another LitElement component:
```jsx
({
date: new Date(entry.date),
value: entry.value
}))}
.yScale=${{ minValue: 0 }}
brush
area
.xAccessor=${x => x.date}
.yAccessor=${x => x.value}
.curve=${d3.curveCatmullRom}
/>
```