Pure JS version of D3 Zoomable Sunburst

[Atish Agrawal]

Hello there,

I have been trying, for a very long time, to replicate https://beta.observablehq.com/@mbostock/d3-zoomable-sunburst this in pure JS to use it in one of my projects. I am using PHP and Ajax to load Dynamic Data in JavaScript. I think the code in the Observable link is not in Pure JS but rather Node or something else. I am a newbie in Scripting, hence it is becoming very difficult for me to understand the written code. I do know that a pure JS will need the data (flare.json) in a specific format, which will generate the expected output. I can control the JSON structure from backend, but I am unable to generate an output like the link.

Can someone please let me know how can I replicate the exact same functionality, including the UI and UX of the aforementioned link?

I really appreciate your help.

Thanks

Atish Agrawal

[Kai Chang]

Here's the zoomable sunburst example:

https://bl.ocks.org/mbostock/4348373

And the same in d3 version 4 (which is very similar to v5, used in the Observable example):

https://bl.ocks.org/maybelinot/5552606564ef37b5de7e47ed2b7dc099

--
You received this message because you are subscribed to the Google Groups "d3-js" group.
To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+unsubscribe@googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Atish Agrawal]

Hello Chang,

Thanks for your quick reply. I have already tried implementing the links which you sent me. However, they are lacking labels and the exact same functionality as in the observable one. I have also tried emailing Mike and other professionals regarding the same, however, I am unsuccessful in getting it working exactly as it is in observable. Can you please convert the observable example into Pure JS with version 5?

That will be really helpful for the community. Being a newbie in JS, it is really hard for me to develop the exact same output.

I am attaching my sample work which I have been trying for a very long time but I am not able to achieve the same output as in observable. Please do have a look at it and do let me know how can I get it working?

Really appreciate your quick response and help.

Thanks

Atish Agrawal

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.

[Atish Agrawal]

Can someone please check this?

I really need help here. I have been trying to convert the Observable Zoomable Sunburst into JS functions, but I am unable to make it work. I have the exact same flare.json file and tried to recreate exact functions as therein Observable one. But it still is not working.

Appreciate your help.

[Atish Agrawal]

Hello Sir,

I have been trying in many possible ways to get it working using Ajax Loaded Data and in Pure JS. But the observable Zoomable Sunburst is really not getting to work.

Please help me with this. I would be really grateful to you all.

On Tuesday, September 18, 2018 at 3:22:52 PM UTC+5:30, Kai Chang wrote:

To unsubscribe from this group and stop receiving emails from it, send an email to d3-js+un...@googlegroups.com.

[Erik Stel]

Hi Atish,

I'm going to try to help you by explaining why your sample(s) are not working. I hope this helps you in getting a better understanding of the code (instead of providing a version that does work).

Your samples (except for sample5.html) do not include any code to create labels. A label should be inside a <text> tag. The different samples do create <title> tags, but those are only shown (by some browsers) when hovering. The method .text(...) is used to set the textual value within a tag, so maybe that caused you to think text was added.

You should look for .append("text") in your code or in the original Sunburst code.

As said in sample5.html there is code to add text (line 55 and down). The value of the <text> tag is set using ".text(function(d){return d.data.name})". This means it assumes your data contains a property "data" which in turn contains a property "name". But that is not the case with your data (see example of your data below and how to retrieve it live in your browser). Your data does contain a property "name" directly. So changing the function to ".text(function(d){return d.name})" (line 65) will give it the correct textual value.

BUT, we are not there yet: the lines 63 and 64 contain styling attributes. The values are calculated in "labelVisible()" and "labelTransform()". Both functions contain references to properties "x0", "x1", "y0" and "y1". But again, your data does not have these properties. Your data has properties "x", "y", "dx" and "dy". You should use these values. Have a look at the lines 31 to 35 to see how these values are used to calculate the angle and radius. You'll need to use something similar in "labelTransform".

If you want to know what data is bound to an element. Just open the developer console in your browser. On the console you can (in most browsers) just type Javascript commands. If you type "d3.select("text").datum()" (without the outer quotes ;-) and hit Enter, you will see which data is bound to the first <text> tag in your html. It will show something like the values below. Here you see you have "name" (not "data.name") and "x", "y", "dx" and "dy".

    children: Array(10),

    depth: 0,

    dx: 1,

    dy: 0.2,

    name: "flare",

    value: 956129,

    x: 0,

    y: 0

Hope I set you on the right track. Good luck.

Erik

[Atish Agrawal]

Hello Erik, 

Thank you very much for a detailed explanation of my mistakes which I was doing. I have fixed the labelTransform and labelVisible functions to follow dx/dy instead of d0/y0.

I have also tried editing a few functions and checked their response using the developer console. However, I am still not able to get the desired output. I am seriously doing something wrong over here. I want the output exactly as in the observable, so I created another script (JSFiddle Both) which is able to show 2 layers at a time, But there too, I am not able to show the labels as in the observable one.

1. Old Script (Edited): https://jsfiddle.net/oua42ncj/1/
2. New Script (as Observable): https://jsfiddle.net/58zr0fyd/3/

Also, the animation in the observable is quite smooth as compared to what I am doing. It means there are some variables which need to be adjusted to implement the smoothness. I referred several sunburst examples online, but either they are written poorly, or some shows label, which again are not properly oriented. It means, there are a lot many people facing issues with the actual d3 implementation.

I am stuck here badly sir.

[Erik Stel]

Atish,

In the new fiddle you are appending the <text> tag to the <path> tag. This is not valid in SVG. Therefor it does not show. What you could do is create <g> tags (groups). And then append both <path> and <text> to the <g>roup.

In the fiddle at line 58 you do "selectAll("path")" and in line 60 you do the "enter().append("path")". If you change these <path> tags to <g> tags, you create groups. Then do an append("path") and an append("text") on the created group(s). Setting the attributes to both the path and the text as you do now.

HTH

Erik

[Atish Agrawal]

Hello Erik,

Thank you very much for your support and prompt replies. I have successfully replicated the output at my end.

What I was doing wrong, is that I wasn't setting up the chart to an element in the body. The chart was actually getting generated but wasn't visible as it was not being appended to an object.

I have created a new JS Fiddle for the same:

https://jsfiddle.net/qo1vwL6k/1/

I really appreciate your efforts and time in making me understand the concepts.

Regards

Atish