qwik-d3 ⚡️
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<string, string> that is used to pass configurations to the create function
For example inside your Qwik component you have a list and a createGraph QRL:
const data = [...];
const handleCreation = $(createGraph);
return (
<D3Container data={data} create={handleCreation} options={{ fill: 'black' }} />
);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.
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 (
<BubblePlot data={bubbleData} xAxisDomain={[0, 10000]} yAxisDomain={[0, 90]} zAxisDomain={[0, 1310000000]}
cx="gdpPercap" cy="lifeExp" r="pop" fill="#69b3a2" stroke="black" opacity={0.7} />
);Histogram
Pre-made histogram graph with options to set the thresholds and column in the single object.
const histogramData = [
{ price: 100 },
{ price: 70 },
...
];
return (
<Histogram data={histogramData} column="price" xAxisDomain={[0, 150]} fill="#69b3a2" thresholds={70} />
);PieChart
Pre-made pie chart.
const pieData = {a: 9, b: 20, c:30, d:8, e:12};
return (<PieChart data={pieData} withLabels withTooltip stroke="black" opacity={0.7} />);BarPlot
Pre-made bar plot.
const barPlotData = [{ country: 'USA', value: 12394 },
{ country: 'Russia', value: 6148 },
{ country: 'UK', value: 1214 }
];
return (
<BarPlot data={barPlotData} yAxisDomain={[0, 13000]} fill="#69b3a2" xAxis="country" />
);Network
Pre-made network diagram.
const networkData = {
"nodes": [
{
"id": 1,
"name": "A"
},
{
"id": 2,
"name": "B"
},
...
],
"links": [
{
"source": 1,
"target": 2
},
{
"source": 1,
"target": 5
},
...
]
};
return (
<Network data={networkData} linkStroke="#aaa" nodeFill="#69b3a2" nodeR={20} />
);LineChart
Pre-made line chart.
const lineChartData = [{
date: '2013-04-28',
value: 135.98,
}, {
date: '2013-04-29',
value: 147.49,
}, ...];
return (
<LineChart data={lineChartData} stroke="steelblue" strokeWidth={1.5} />
);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:
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.