Combine various hierarchies using a single JSON with d3.pack

I currently have a JSON file that I need to utilize in order to create three distinct hierarchy visualizations using d3.pack.

This JSON file contains data for eventA (1 or 0) and eventB (1 or 0). Each individual leaf also possesses a unique ID.

The hierarchies I want to display are as follows: - First hierarchy : Total population (displaying all 10000 elements). - Second hierarchy : eventA (grouping all the 1s and 0s together). - Third hierarchy : eventB, further divided based on eventA values.

Currently, I am utilizing three separate multidimensional JSON files which is not efficient, as I am simply replacing old data with new ones. However, having smooth transitions between views is crucial for my requirements, so this current method falls short.

If anyone has any suggestions on how I can achieve this more efficiently, I would greatly appreciate it!

I'm not seeking specific code examples, just looking for guidance on how best to approach solving this problem.

Below is an example of how the JSON data is structured:

{
  "name":"Total",
  "children":[
    {
      "name":"POPULATION (n=20)",
      "children":[
        {
          "id":1,
          "eventA":1,
          "eventB":1,
          "size":50
        },
        ... (rest of JSON data goes here)
      ]
    }
  ]
}
javascriptjsond3.js

Answer №1

Have you ever heard of the d3.nest method? It's a great tool to use for organizing data in a nested structure. To start, you would load your data as a flat array, similar to this:

var flatData = [
  {
    "name1": "Total",
    "name2": "POPULATION (n=20)",
    "id": 1,
    "eventA": 1,
    "eventB": 1,
    "size": 50
  },
  {
    "name1": "Total",
    "name2": "POPULATION (n=20)",
    "id": 2,
    "eventA": 1,
    "eventB": 0,
    "size": 49
  },
  {
    "name1": "Total",
    "name2": "POPULATION (n=20)",
    "id": 3,
    "eventA": 0,
    "eventB": 1,
    "size": 48
  },
  ...
]

(I used name1 and name2 placeholders since I didn't have specific labels).

To group the data as you mentioned:

d3.nest()
  .key(function(d) { return d.name1 })
  .key(function(d) { return d.name2 })
  .entries(dataset)

If you want to group by the value of eventA:

d3.nest()
  .key(function(d) { return d.eventA })
  .entries(dataset)

To create the third grouping you described (by eventB, then by eventA):

d3.nest()
  .key(function(d) { return d.eventB })
  .key(function(d) { return d.eventA })
  .entries(dataset)

The resulting structure will be similar to what you're looking for but with keys named key and values instead of name and 

children</code. You can easily remap the keys after using <code>d3.nest
.

You can also use the rollup function within d3.nest to transform values at the lowest level group. For example, to sum all sizes for each eventA group:

d3.nest()
  .key(function(d) { return d.eventA; })
  .rollup(function(values) { return d3.sum(values, function(d) { return d.size; }) })
  .entries(dataset);

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

How can I extract the value from the object returned by an AJAX call?

HTML file <div class="container"> <table id="headerTable" class="table table-bordered"> <thead> <tr> <th colspan="2">Header</th> </tr> </thead> <tbody> <c:forEach item ...

javascriptajaxjspspring-mvc

Combining two sets of data into one powerful tool: ngx-charts for Angular 2

After successfully creating a component chart using ngx-charts in angular 2 and pulling data from data.ts, I am now looking to reuse the same component to display a second chart with a different data set (data2.ts). Is this even possible? Can someone guide ...

javascriptangulartypescriptd3.js

Able to retrieve data from a JSON API

Trying to retrieve information from BayFiles.net via their API. The API call URL is: Encountering this error: 07-04 13:54:39.525: E/log_tag(588): Error parsing data org.json.JSONException: Value at error of type java.lang.String cannot be converted to ...

androidjsoneclipsenullpointerexception

The anchor tag is not being used in the function call in an Angular application

Having trouble with calling the logout function inside the login controller. The setup involves a simple login and logout system using ui-router. After successfully logging in and navigating to another page, I encountered issues with calling the logout fu ...

javascriptangularjs

Angular4 and jQuery working together for effective navigation and pagination

Trying to implement pagination in angular 4 and jQuery, but encountering an issue where clicking on the next button causes it to skip through multiple pages at once (2, then 3, then 5)... Component code: addClass(x) { $(".page-item").click(function () ...

javascriptjqueryangular

What is the best way to post an image using nodejs and express?

Recently, I've been working on a CMS for a food automation system and one feature I want to incorporate is the ability to upload pictures of different foods: <form method="post" enctype="multipart/form-data" action="/upload"> <td>< ...

javascriptjqueryhtmlnode.jsexpress

Converting MySQL DateTime to seconds in JavaScript from PHP

In my JavaScript code, I have implemented a countdown timer that relies on two variables. The first variable, currentDate, is converted to milliseconds and then has 10 minutes worth of milliseconds added to it. The second variable, d, stores the current da ...

javascriptphpmysqldatetime

Tips for submitting a form and retrieving session count without the need to refresh the page after submitting the form

I have set up a form that includes hidden input fields to send data to a PHP script. The script stores the values in an array of sessions by using AJAX to reload the page. Once the data is submitted successfully, an HTML alert message is displayed in <p ...

javascriptphphtmljqueryajax

Utilize a function within an AngularJS directive

I'm struggling to understand how to pass a function (delegate) to a directive in AngularJS and utilize it within the link-function. Any guidance or suggestions on the correct approach would be immensely appreciated. Below is the controller code: myA ...

javascriptangularjs

It appears that using JQuery's .when and .done functions may result in the code executing before the script has finished loading

Since updating the hard-coded <script> with JQuery promises, I have been encountering these errors frequently: https://i.stack.imgur.com/xkWAk.png The issue seems to be inconsistent in replicating. Sometimes, the error occurs while loading the page ...

javascriptjquerypromise

What steps are involved in utilizing a custom filter within ng-pluralize based on the count parameter?

<ng-pluralize count="data.amount | customFilter" when="{1: 'one item', 'other': '{} items'}"> </ng-pluralize> Is it possible to apply a custom filter to the count property? The customFilter function should return ...

javascriptangularjs

Issues with Bootstrap Navbar Dropdown functionality, including flickering or unresponsiveness

While working on a project, I incorporated the FlexStart Bootstrap Template. However, I encountered an issue with the Dropdown feature on the navbar. When hovering over the menu and submenu, they flicker incessantly. Despite investing a considerable amount ...

javascripthtmljquerycssbootstrap-5

Converting a string to JSON format with JavaScript

My string is structured in JSON format like this: "{""c1"": ""value1"", ""c2"": ""value2""}" After storing it in an SQLITE database, I use the following Javascript code to retrieve it back as JSON: var req= "SELECT json_column from my_table"; var re ...

javascriptjsonsqlite

Unable to assign values to textarea and checkbox in MVC5

I am currently facing an issue with setting values in JavaScript + jQuery in MVC 5 for textareas and checkboxes. Here is the JavaScript code I am using: document.getElementById("UpdatetxtDescription").value = "abc"; document.getElementById("Upda ...

javascriptjqueryasp.net-mvcasp.net-mvc-4asp.net-mvc-3

Changing the background color of a PHP input based on the webpage being viewed - here's how!

I'm in the process of creating a website where each page will have its own unique background color. Additionally, I am using a PHP input for both the header and footer sections, which need to change their background colors based on the specific webpa ...

javascriptphphtmlcssbackground-color

Working with Postgres: Extracting a specific value from a JSON array consisting of multiple JSON objects

Within my table, there is a column named additional_info, housing a JSON object structured as follows: { "dbSources": [{ "destIp": "10.10.10.29", "serviceType": "PostgreSql&qu ...

sqlarraysjsonpostgresql

Utilizing Laravel to Send Table Data to Modal for Form Submission to Controller

In our users table, there is an edit modal that needs to retrieve specific user data from the table list and display it within the modal's input fields. This requires using Laravel logic to edit the data and submit it back to the controller as a form. ...

javascriptlaravellaravel-8

The PHP server is having trouble accepting a JavaScript object sent via AJAX

Hey there, I'm currently facing an issue with sending fields from a form saved in a JavaScript object to a PHP server. I have set up the AJAX communication, but when I try to access the object in PHP, I notice that the length is showing as 0 during de ...

javascriptphpajax

Ensure that the hover div remains open even after the mouse leaves, and only closes when clicked outside of the div window or on a

I have a jQuery script that controls the opening and closing of the "shopping_cart" div when hovering over the "shopping_button". $('#shopping_button, .shopping_cart').on('mouseenter',function(){ $(this).css('z-index',&apos ...

javascriptjqueryhtmlcss

What is the best way to integrate a Svelte component into a vanilla JS project without including Svelte as a dependency in the main project?

Is there a way to import a Svelte component into a project that does not have Svelte as a dependency? Imagine creating an npm package with a Svelte component and installing it in different projects without needing to add Svelte as a dependency. The package ...

javascriptnpmes6-modulessvelte-component