Interactive sunburst chart with dynamic sizing for child nodes in JSON data

I utilized the following code: root = d3.hierarchy(root); root.sum(d => d.size);

However, my JSON does not include the size value for children nodes. How can I create a proper D3 Zoomable sunburst visualization?

Here is the code snippet:

const width = window.innerWidth, height = window.innerHeight, maxRadius = (Math.min(width, height) / 2) - 5;

const formatNumber = d3.format(',d');

const x = d3.scaleLinear().range([0, 2 * Math.PI]).clamp(true);

const y = d3.scaleSqrt() .range([maxRadius*.1, maxRadius]);

const color = d3.scaleOrdinal(d3.schemeCategory20);

const partition = d3.partition();

... (code continues)

Thanks in advance!

Answer №1

Swap out the line "root = d3.hierarchy(root); root.sum(d => d.size);" with the code snippet below

let newRoot = d3.hierarchy(root, function(node) { return node.children }) .sum( function(node) {
if(node.children) { return 0 } else { return 1 } });

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

A Webpage that is permanently open, with no option to close it. The only option is to watch the video in

Currently, I am designing web pages for artists to showcase their work in an upcoming exhibition. The pages are ready, but now the artists are requesting that each piece be accompanied by a laptop displaying a single webpage with a video providing informat ...

Spinning a rectangular grid with JavaScript

I am currently developing my own version of Tetris. My main focus at the moment is creating a function that can rotate a 2D variable array by 90 degrees (or -90). For instance, if we have an array like: "-T-", "TTT" The expected outpu ...

Disabling and enabling a link before and after an AJAX call using jQuery

I have been trying to disable a link before making an ajax call and then re-enable it right after receiving the response. However, my current approach doesn't seem to be working as expected: jQuery(this).prop('disabled', false); Here is my ...

Tips on Creating a Display None Row with a Sliding Down Animation Using Javascript

I am working with a table that has some hidden rows which only appear when the "show" button is clicked. I want to know how I can make these hidden rows slide down with an effect. Here's the snippet of my code: function toggleRow(e){ ...

Using jQuery to run code when a key is pressed and returning it to its original state upon release

In order to combine regular keys with modifier keys if they are being pressed simultaneously, the concept is to use key codes like c along with Ctrl c The following solution has been tested and proven effective: let increment = 10; $(document).keydown(f ...

Is it possible to track traffic using Alexa or SimilarWeb on a single-page application?

We are currently grappling with the challenge of how to effectively track traffic and user engagement within our classified sites on a single-page application built in angularJS. While we have successfully managed SEO and tracking with Google Analytics, we ...

Javascript encountered an error upon attempting to return from the main function

I have a function that calls the database to perform an action: function callQuery(query) { db.query(query, (err, res) => { if (err) { // Error connecting to DB console.log(err.stack) } else { // Return the results ret ...

Creating dynamic components with constructor parameters in Angular 9

Having trouble passing a value to the constructor in the component generation code. Check out the original code here: https://stackblitz.com/edit/angular-ivy-tcejuo private addComponent(template: string) { class TemplateComponent { @ViewChild( ...

What is the best way to enhance the class following this condition in JavaScript?

Initially, the original script worked perfectly with just one class being added: function check_btn_charge() { if (parseInt(jQuery(".total-change-price").text()) >= 0) { jQuery(".btn-action-save-charge"+" "+"btn-danger" ...

What is the optimal method for assigning a value to a specific key within a JavaScript JSON object?

Below is the information stored in a file called "fokontanys.json": { "vzdveg643": { "lldistrict":"Ambilobe", "id_province": 7, "id": null }, "vzvsdv5327": { "lldistrict ...

Grid items in Material UI are not positioned next to each other

I am encountering an issue with the Grid component in material-ui. The grid items are currently stacking below each other instead of beside each other, and I'm unsure of what is causing this behavior. My intention is for the grid items to stack on top ...

Use jQuery to update the field without affecting the observable

Greetings to the wonderful stackoverflow community! I recently delved into using knockout just a few days back. Currently, I am utilizing it to create a dynamic menu builder for a CMS project that I'm deeply engrossed in. If you'd like to take ...

Can I use react-image-crop to resize an image on the web?

I am wondering if it's possible to use the npm package react-image-crop to crop an image that is hosted online rather than locally stored on my computer. I know how to crop local images, but I'm curious about cropping images using their URL. Is t ...

An AJAX request will only occur if there is an alert triggered on a particular computer

Here's an interesting issue I encountered with my company's CMS newsletter system. It seems that the AJAX call to send an email works flawlessly in all modern browsers and operating systems, except for one client. This particular client is using ...

Having trouble accessing and setting the values of a JSON array retrieved using $.get method in JavaScript outside of the function

Executing the following code snippet results in the desired values being displayed in console.log: var q; $.get('/ajax_subscribers', { code: 'qyhskkcnd'}, function(returnedData){ q = returne ...

utilizing PhoneGap for transforming a website into a mobile application

My website is already built and fully functional using ajax, jquery, html, and php. When converting it over to PhoneGap, I'm wondering if I need to create all new php files to attach to the PhoneGap server, or if I can just use the existing files from ...

Automatically play a video on a CardMedia component using react material-ui

I am working with a Material UI Card component and I want to include an autoplaying mute video (webm) inside it. In the documentation for the CardMedia component, it states that any HTML element can be used as the component element type, so I have specifi ...

How can you sift through an array of objects by looking at the elements within another nested array? Are you utilizing Vanilla JS, lodash, or another tool from the

Hey, I'm currently working on a React app where I have a list of projects that are associated with specific technologies. What I want to achieve is allowing the user to select certain technologies using checkboxes and have the project list automatical ...

What is the best placement for JavaScript code when using styled components?

Struggling to find the right place to insert this sorting code for my employee list in a styled component. Typically, I would just add it above the return statement of a functional component. However, React seems to be rejecting this approach. import style ...

Tips for verifying the input field with specific requirements in Angular 6

There is an input field that needs to validate text based on certain logic conditions: No spaces should be allowed in the formula. The operators (and,or) must be lowercase and enclosed in curly brackets {}. The number of opening '(&apos ...