Zoomable Sunburst d3 chart with react

1

Hello All,
I want to shows only two layers of the hierarchy at a time.
I referred to this https://observablehq.com/@d3/zoomable-sunburst but this can’t be implemented with React.

Is there any example of this kind of “two layers of the hierarchy at a time” in react or any suggestion that how to proceed?

Thanks in advance

2

Does this help? it’s a tutorial about how to use Observable notebooks in React Apps: https://observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app

3

If you find an example that you’d like to use, you can always “fork” a copy for yourself to edit and change how you’d like: https://observablehq.com/@observablehq/fork-share-merge

4

Here is also an example that shows more than two levels of hierarchy: https://observablehq.com/@d3/sunburst?collection=@d3/d3-hierarchy

5

This won’t help as It uses the same structure of code as the https://observablehq.com/@d3/zoomable-sunburst and it’s not getting converted into react :frowning:

6

Did the first link help about how to embed notebooks in react apps?

7

I am afraid. I am still trying but not helping any.

I think it adds a library that is just for notebook only
yarn add https://api.observablehq.com/@observablehq/how-to-embed-a-notebook-in-a-react-app.tgz?v=3

So how it will work in sunburst

8

That notebook is just an example. To install the notebook that you were interested in you would need to replace the url with the sunburst example. In that case it might be https://api.observablehq.com/@d3/sunburst.tgz?v=3

9

Ok, Thanks
Any idea on this
if (name === “animation”) {
return new Inspector(this.animationRef.current);
}

what should I change?

10

animation is the name of the cell in the sample notebook. In your notebook, I believe the cell is called “chart”. So you would have
if (name === "chart){
Instead of
if (name === "animation){

11

it gives me runtime error

./node_modules/@d3/sunburst/a601aba88046a626@240.js
SyntaxError: C:\Users\ArpitDadheech\Documents\gitTesting\pretty-animation\node_modules\@d3\sunburst\a601aba88046a626@240.js: Support for the experimental syntax 'importMeta' isn't currently enabled (4:206):

  2 | export default function define(runtime, observer) {
  3 |   const main = runtime.module();
> 4 |   const fileAttachments = new Map([["flare-2.json",new URL("./files/e65374209781891f37dea1e7a6e1c5e020a3009b8aedf113b4c80942018887a1176ad4945cf14444603ff91d3da371b3b0d72419fa8d2ee0f6e815732475d5de",import.meta.url)]]);
    |                                                                                                                                                                                                              ^
  5 |   main.builtin("FileAttachment", runtime.fileAttachments(name => fileAttachments.get(name)));
  6 |   main.variable(observer()).define(["md"], function(md){return(
  7 | md`# Sunburst

Add @babel/plugin-syntax-import-meta (https://git.io/vbKK6) to the 'plugins' section of your Babel config to enable parsing.

I have to pass my custom data to it as well? How will I do in this?

12

The problem here is that you can’t access the file attachments that are stored with the notebook. I would suggest two possible fixes:

  • Fork the original notebook and replace the references to fileattachments with your own data.

  • Or possibly in your react code, below the if (name=== "animation"):

if (name === "data") {
        return {yourData};
      }

Though this might still throw a runtime error. So forking the notebook and removing the file attachment code, then importing that notebook instead is probably safer.

1 Like
13

It’s giving 16+ errors
Is there anything that I can do. Apart from this?

14

hi @ArpitDadheech are you using create-react-app? Maybe this thread can be helpful how do i embed the notebook in react

It solves the FileAttachment error above. The idea is to replace the new URL syntax with require then webpack behind create-react-app would bundle the file attachments from node_modules.

Otherwise you have to try other plugins to deal with the import.meta.url syntax. I haven’t had any success using @babel/plugin-syntax-import-meta. In summary, if you’re using create-react-app you would have to eject the webpack configuration and add custom babel/loaders to deal with it, or easier use react-app-rewired to use custom webpack/babel config.

15

Here’s a working demo you can check out:

The main wrinkle here is that create-react-app doesn’t support the standard import.meta syntax, and you can’t add the necessary Babel plugin to support it without ejecting. So, the easiest thing to do is to edit the file attachments map to use an absolute path rather than a relative path, avoiding import.meta.

I imagine create-react-app will support import.meta at some point in the future, and this’ll be easier.

1 Like
16

@radames I have add my own data to this.
My data will come from my own Api. How can I do that?

17

@mbostock I have add my own data to this.
My data will come from my own Api. How can I do that?

18

Oh I got the solution for, Getting my own data :slight_smile:

19

Just in case, In the https://observablehq.com/@kerryrodden/sequences-sunburst there are legends that are used on the top. The path that is shown were we are.

Is there any way to get it in the zoomable-sunburst

20

The other notebook you mention has another cell called “breadcrumb” which renders the legend showing what you’re hovering over. If you’d like, you can import that notebook instead of the notebook you are currently using, but you would need to render two cells instead of one. In that notebook the cells of interest are named “breadcrumb” and “sunburst”.

For help on how to open and close cells in Observable, this documentation might help: Exercise: Lunch calculator / Observable | Observable