Include varying number of tags for each attribute in a data input sequence

Question

Include varying number of tags for each attribute in a data input sequence

I have a collection of objects structured like this:

all_data = [
 {  
    title: "Hello", 
    slices: { 
        A: 50, 
        B: 70, 
        C: 40
     }
 },
 {  
    title: "Goodbye", 
    slices: { 
        A: 100, 
        B: 80, 
        C: 50
     }
 },
 {  
    title: "My title", 
    slices: { 
        A: 100, 
        B: 80, 
        C: 50,
        D: 200
     }
 },

//continue.. ]

How can I divide these data sets into n groups with rectangles scaled accordingly to match the slice values? Despite my attempts so far, I'm at a standstill and need guidance.

d3.select("body")
.append("svg")
.data(all_data)
.enter()
.append("g")
.whatDoIDo()

I am struggling to figure out how to expand each item in the data structure to include multiple rectangle tags based on certain criteria.

javascript d3.js

Answer 1

Answer №1

To achieve this, one approach would involve iterating through the slices object to build an array that will be utilized in a new data join operation.

For instance, if we consider the dataset provided in your inquiry, you can generate a hierarchical structure of nested SVG and G elements with the following code snippet. The second data join leverages the data already associated with the g.title components:

    let svg = d3.select("body")
      .append("svg")

    let titles = svg.selectAll(".title")
      .data(all_data)
      .enter()
      .append("g")
        .attr("class", "title")

    let slices = titles.selectAll(".slice")
        .data(function(d) {
          let arr = []
          for (let [key, value] of Object.entries(d.slices)) {
              // construct an array using the key-value pairs from the slices object
              arr.push([key, value]);
            }
          return arr
        })
      .enter()
      .append("g")
        .attr("class", "slice")

Answer 2

To achieve this, one approach would involve iterating through the slices object to build an array that will be utilized in a new data join operation.

For instance, if we consider the dataset provided in your inquiry, you can generate a hierarchical structure of nested SVG and G elements with the following code snippet. The second data join leverages the data already associated with the g.title components:

    let svg = d3.select("body")
      .append("svg")

    let titles = svg.selectAll(".title")
      .data(all_data)
      .enter()
      .append("g")
        .attr("class", "title")

    let slices = titles.selectAll(".slice")
        .data(function(d) {
          let arr = []
          for (let [key, value] of Object.entries(d.slices)) {
              // construct an array using the key-value pairs from the slices object
              arr.push([key, value]);
            }
          return arr
        })
      .enter()
      .append("g")
        .attr("class", "slice")

Include varying number of tags for each attribute in a data input sequence

Answer №1

Similar questions

Guide to setting up an admin state in your React app with Firebase integration

How to dynamically modify a list box with JavaScript

Share edited collection with Observer

Avoid creating empty blocks in ASP.NET MVC

Is there a way to eliminate a tag that includes all attributes except for certain ones?

Is there a way to make $animate.removeClass function within a directive without needing to use $eval

Vue and Moment JS facing a challenge with today's date validation

What is the best way to simulate our services for controller testing?

Developing a feature to organize content by categories and implement a functionality to load more data efficiently using NodeJS routes

What is the best way to incorporate parallax scrolling in the center of a webpage?

What could be causing WidgEditor, the JavaScript text editor, to fail to submit any values?

Bits of code and the internet

What steps should I follow to update this React Navigation v5 code to v6?

The styling of the close button in Ngb-bootstrap alerts is not being implemented correctly

Is there a way to eliminate the quotes from the JavaScript output?

Determine the number of elements in an array that are equivalent to the Boolean value of

Node.js and Express constantly face the challenge of Mongoose connecting and disconnecting abruptly

Which event in the listbox should I trigger to adjust the scroll position?

D3.js: Exploring the beauty of layered legends

Can we retrieve props that have not been explicitly passed down?