Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/gilf/qwik-d3
A small library exposes a d3 container that you can use in order to incorporate d3 generated visualization inside your qwik project. It also includes some pre made diagrams.
https://github.com/gilf/qwik-d3
charts d3 data-visualization qwik svg vizualisation
Last synced: about 2 months ago
JSON representation
A small library exposes a d3 container that you can use in order to incorporate d3 generated visualization inside your qwik project. It also includes some pre made diagrams.
- Host: GitHub
- URL: https://github.com/gilf/qwik-d3
- Owner: gilf
- Created: 2023-11-19T08:59:13.000Z (about 1 year ago)
- Default Branch: main
- Last Pushed: 2023-12-08T13:06:27.000Z (about 1 year ago)
- Last Synced: 2024-11-15T22:26:46.101Z (2 months ago)
- Topics: charts, d3, data-visualization, qwik, svg, vizualisation
- Language: TypeScript
- Homepage:
- Size: 447 KB
- Stars: 17
- Watchers: 2
- Forks: 1
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
Awesome Lists containing this project
README
# qwik-d3 ⚡️
A small library that exposes a D3.js container. You can use the container in order to incorporate D3.js generated visualization inside your Qwik project.
---
## Installation
You can run
```
npm i qwik-d3
```
Make sure that you also install d3 library because it's a peer dependency.
## Usage
The library exposes a component named D3Container.
The component expects three props:
- data - the data that should be used inside the graph.
- create - a QRL function that will be responsible to create the d3 visualization inside the container.
- options - a Record that is used to pass configurations to the create function
For example inside your Qwik component you have a list and a createGraph QRL:
```jsx
const data = [...];
const handleCreation = $(createGraph);
return (
);
```
## Other Exposed Components
### BubblePlot
Pre-made bubble plot diagram with a few configuration options such as cx, cy and r for the size of the bubbles.
```jsx
const bubbleData = [
{ country: "Afghanistan", continent: "Asia", lifeExp: 43.828, pop: 31889923, gdpPercap: 974.5803384 },
{ country: "Albania",continent: "Europe", lifeExp:76.423, pop: 3600523, gdpPercap: 5937.029526 },
...
];
return (
);
```
### Histogram
Pre-made histogram graph with options to set the thresholds and column in the single object.
```jsx
const histogramData = [
{ price: 100 },
{ price: 70 },
...
];
return (
);
```
### PieChart
Pre-made pie chart.
```jsx
const pieData = {a: 9, b: 20, c:30, d:8, e:12};
return ();
```
### BarPlot
Pre-made bar plot.
```jsx
const barPlotData = [{ country: 'USA', value: 12394 },
{ country: 'Russia', value: 6148 },
{ country: 'UK', value: 1214 }
];
return (
);
```
### Network
Pre-made network diagram.
```jsx
const networkData = {
"nodes": [
{
"id": 1,
"name": "A"
},
{
"id": 2,
"name": "B"
},
...
],
"links": [
{
"source": 1,
"target": 2
},
{
"source": 1,
"target": 5
},
...
]
};
return (
);
```
### LineChart
Pre-made line chart.
```jsx
const lineChartData = [{
date: '2013-04-28',
value: 135.98,
}, {
date: '2013-04-29',
value: 147.49,
}, ...];
return (
);
```
### generateTooltip
A helper function that helps to add a tooltip without any style to a d3 generated visualization.
In the next example pieSlices is the d3 generated pie slices in a pie chart:
```javascript
if (options.withTooltip) {
const { addTooltip, removeTooltip } = generateTooltip("pie-chart-tooltip", "tooltip");
pieSlices.on("mouseover", (d, arc: any) => {
addTooltip(arc.data[0], d.pageX, d.pageY);
}).on("mouseout", () => {
removeTooltip();
});
}
```
The function accepts two arguments:
- A unique id for the tooltip
- A class name to add to the generated tooltip which can be used to style the tooltip element.