To run this example, you must clone this repository and install it. From the terminal:
git clone https://github.com/observablehq/examples.git
cd examples/react-create-react-app
yarn
yarn start
Then go to http://localhost:3000 to view the live app.
This repo was created using create-react-app
:
yarn create react-app react-zoomable-sunburst
To install the Observable runtime:
yarn add @observablehq/runtime
Then, go to the D3 Zoomable Sunburst and click Download code in the notebook menu. Or, download this link:
https://api.observablehq.com/@d3/zoomable-sunburst.tgz?v=3
Copy the JavaScript files into src/@d3/zoomable-sunburst.
Edit the file attachments map to use an absolute path:
const fileAttachments = new Map([["flare-2.json","/flare-2.json"]]);
This step is only necessary because create-react-app does not support the standard import.meta syntax, and while there is a @babel/plugin-syntax-import-meta, create-react-app does not allow you to add custom Babel plugins without ejecting.
Lastly, to instantiate the notebook, see App.js:
import {Runtime, Inspector} from '@observablehq/runtime';
import React, {useEffect, useRef} from 'react';
import notebook from './@d3/zoomable-sunburst';
import './App.css';
export default function App() {
const ref = useRef();
useEffect(() => {
const runtime = new Runtime();
runtime.module(notebook, (name) => {
if (name === 'chart') {
return new Inspector(ref.current);
}
});
return () => runtime.dispose();
}, []);
return (
<>
<h1>Hello, Observable!</h1>
<div ref={ref} />
</>
);
}