qwik-d3 ⚡️

A small library that exposes a d3 container. You can use the container in order to incorporate d3 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 two 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 list = [...];
const handleCreation = $(createGraph);
return (
    <D3Container data={list} 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
• Histogram - Pre-made histogram graph with options to set the thresholds and column in the single object
• PieChart - Pre-made pie chart