D3 Hooks

Hooks for integrating D3.js and Observablehq Notebook into your React Project.

| Hooks | Description | | ----------- | ----------- | | useD3 | Attach d3 function into a hook and render data-driven documents. | | useD3Notebook | Embed notebook into a hook with Observablehq Runtime and Inspector. |

This repo was initially inspired by following posts, but with enhancement and packaged as a reusable library

• React Hooks and D3 🎣
• How to: Embed a Notebook in a React App

Installation

# Install latest package
# npm
npm i @vincecao/use-d3
# yarn
yarn add @vincecao/use-d3
# pnpm
pnpm i @vincecao/use-d3

This package is automatically published in NPMJS and GITHUB npm registry.

To install package from Github npm registry, add below file in your repo before run npm i or yarn add.

# .npmrc
@vincecao:registry=https://npm.pkg.github.com

You can also install directly from current repo master

# npm
npm i vincecao/use-d3
npm i github:vincecao/use-d3

# yarn
yarn add vincecao/use-d3
yarn add github:vincecao/use-d3

Live Demo

• Demo Site
• Code Example

Development

# clone the repo
git clone https://github.com/vincecao/use-d3.git && cd use-d3

# install needed package for library
yarn

# local test library hooks
yarn start

# local test examples
cd example

# install needed package for library examples
yarn
# local test library examples
yarn start

# Now you can open example in localhost:1234

# build the demo example page
yarn build

cd ..
# build the @vincecao/use-d3 hooks library
yarn build