Utilize D3's pie chart to showcase the data in JSON's individual collections

I am currently working on creating a pie chart that displays the distribution of collections based on their names. I have come across an issue where d3.layout.pie().value() only evaluates specified array values. Is there a solution available to extract the size of values from JSON data? For example,

[
    {
        "name": "json",
        "Lead": 
        [
            {"a": "aaa"},
            {"b": "bbb"},
            {"c": "ccc"},
            {"d": "ddd"}
        ],
        "Costs": 
        [
            {
                "actual": "222"
            },
            {
                "plan": "333"
            }
        ],
        "Budget": 
        [
            {
                "actual": "111"
            },
            {
                "plan": "333"
            }
        ]
    }
]

Therefore, the data that needs to be mapped for the value would be [4, 4, 2]

javascriptjsond3.js

Answer №1

To find the length of arrays in your JSON data, first convert it to a JavaScript object.

var temp = [
{
    "name": "json",
    "Lead": 
    [
        {"a": "aaa"},
        {"b": "bbb"},
        {"c": "ccc"},
        {"d": "ddd"}
    ],
    "Costs": 
    [
        {
            "actual": "222"
        },
        {
            "plan": "333"
        }
    ],
    "Budget": 
    [
        {
            "actual": "111"
        },
        {
            "plan": "333"
        }
    ]
}
];

 var data = [temp[0].Lead.length,temp[0].Costs.length,temp[0].Budget.length];

You can then use this data to create a pie chart visualization.

I hope this explanation is helpful to you :)

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

Steps to display a div element periodically at set time intervals

I've created a user greeting message that changes based on the time of day - saying Good Morning, Good Afternoon, or Good Evening. It's working well, but I'm wondering how I can make the message hide after it shows once until the next part o ...

javascriptphphtmlcsssetinterval

What causes functions operating on mapped objects with computed keys to not correctly infer types?

If you are seeking a way to convert the keys of one object, represented as string literals, into slightly modified keys for another expected object in Typescript using template string literals, then I can help. In my version 4.9.5 implementation, I also ma ...

javascripttypescript

Stop the form from submitting when the enter key is pressed using VueJS and Semantic UI

After spending the past two days searching for a solution to this persistent issue, none of the suggested remedies have proven effective so far. My form's HTML structure is as follows: <form id="quote_form" action="" method="get" class="ui large ...

javascriptjqueryformsvue.jssemantic-ui

Loop through the array and eliminate the identification solely

{ "productGroupVariantss": [ { "id": 1378, "name": "No oF Poles", "variantsAttributeses": [ { "id": 391, "variantsId": null, "variantsValue": "1p" }, { "id": 392, ...

javascriptangularjs

Is there a straightforward method to retrieve all information from Vue.js?

Is there a way to extract all of this data? I've attempted using this._data.forEach but it doesn't seem to be effective. Thank you! data() { return { childData: '', credit: '', company: '', email: ...

javascriptvue.jsaxios

The slicing of jQuery parent elements

Hey there! I recently created a simulated "Load More" feature for certain elements within divs. However, I've encountered an issue where clicking on the Load More button causes all elements in both my first and second containers to load simultaneously ...

javascriptjquerycssjquery-selectors

Sending information to a component through navigationPassing data to a component

When attempting to move from one component to another page using routes and needing to send parameters along with it, I have experimented with passing them as state through history.push(..) like the following code. However, it does not seem to be working a ...

javascriptreactjsreact-router

Error: The $filter function in AngularJS is not recognized

I have been attempting to inject a filter into my controller and utilize it in the following manner: angular .module('graduateCalculator', []) .filter('slug', function() { return function(input) { ...

javascriptangularjs

How can I sync changes between two variables in node.js?

Is there a method to create a shared variable in JavaScript? Here is an example of what I am attempting to achieve: var id = 5; var player = new Player(id); var array1[0] = player; var array2[0] = player; array1[0].id = 8 console.log(array1[0]); // ...

javascriptnode.jsvariables

Master the art of automatically formatting incorrect JSON using code in your Flutter project

I am currently facing an issue while trying to parse a json response. The problem lies in the presence of a trailing comma at the end of the response, causing errors during decoding. Is there a way to automatically format it from the code and remove the co ...

jsonflutterdart

Developing middleware for managing event handlers

Scenario: I am tasked with managing multiple events that necessitate an "available client". Therefore, in each event handler, my first step is to attempt to acquire an available client. If no client is available, I will send a "Service unavailable" messag ...

javascriptnode.jstypescript

Tips on obtaining the JSON format of an object containing an array variable

In my class, I have three variables including an array. I created a method specifically for use with json_encode(). public function getJSONString(){ return [ 'id' => $this->id, 'name' => $this->name, ...

phparraysjson

"Learn the trick to easily switch between showing and hiding passwords for multiple fields in a React application

I am looking to implement a feature that toggles the visibility of passwords in input fields. It currently works for a single input field, but I am unsure how to extend this functionality to multiple input fields. My goal is to enable the show/hide passwo ...

javascriptreactjsreact-hooksmaterial-ui

What is the best way to display a chosen item in a text input field?

https://i.stack.imgur.com/Qe5Ds.png Looking to create a similar design, but lacking the necessary expertise. What steps should I take or what is the specific term for this style? Seeking assistance in implementing this using jQuery, PHP, or JavaScript. A ...

javascriptphpjqueryhtml

Deno -> What steps should I take to ensure my codes run smoothly without any errors?

Trying to import locally Experimenting with Deno v1.6.0 in a testing environment Attempting local imports using Deno language Local directory structure: . └── src └── sample ├── hello_world.ts ├── httpRequest. ...

javascripttypescriptdeno

Performance issues when fetching data from ASP.NET Core 6 Web API controller

In our ASP.NET Core 6 Web API project using C#, we encountered an interesting issue after upgrading from ASP.NET Core 3.1. The problem lies in the performance of certain APIs that utilize: return new JsonResult(data) This operation is unusually slow, taki ...

c#jsonasp.net-core-webapi.net-6.0

What are some techniques for locating an element in Selenium when it has no tags?

I'm facing a challenge in my code where I need to ensure that the message "Product successfully added to your shopping cart" appears after adding an item to the cart. Here, there is no specific tag enclosing the text, making it tricky to target for ve ...

javascriptseleniumselenium-webdriverxpathwebdriverwait

Is it possible for the $.post function to overwrite variables within the parent function?

Recently, I delved into the world of JavaScript and my understanding is quite limited at this point. So, please bear with me as I learn :-) I am working on a basic booking system that saves dates and user IDs in MySQL. The system checks if a particular da ...

javascriptjquerypost

PHP code for formatting a JsonArray

I am currently unable to format it the way I would like. Initially, it appears as follows: {"success":true,"user":"tom","gender":"male","age":"2"} {"success":true,"user":"anna","gender":"female","age":"3"} However, the desired format is shown below: ...

phpandroidarraysjson

Encountering a 304 status error in the HTTP GET response after deploying a React app on Netlify

After deploying my react application on Netlify, I used the npm run build command to create the local scripts and manually deployed them in production mode on Netlify. The build scripts were generated on my local machine and then uploaded to the Net ...

javascriptreactjsnpmnetlify