Navigating through an array with multiple dimensions and varying lengths using d3

Question

Navigating through an array with multiple dimensions and varying lengths using d3

I am working with a multidimensional array of integer values to create a dynamic bar graph using d3.js. The challenge lies in the fact that each row can have a variable number of values. My goal is to generate color-coded rectangles for each row based on the value of the elements, with the height of each rectangle depending on both the number of values in a row and the average value of that row.

You can visualize how the bar graph should look like by visiting this link: https://i.sstatic.net/gYZAe.png

In the provided image, each column represents the values in a row within the multidimensional array. However, my current struggle lies in iterating over the multidimensional array when executing the following code:

bar = svg.selectAll(".bar")
.data(allrankings)
.enter().append("rect")

Please note that 'allrankings' refers to the multidimensional array.

Currently, I am resorting to creating a separate large array containing all rankings in one dimension and iterating through it while keeping track of which row each element belongs to. I am wondering if there might be a more efficient approach to resolving this issue?

javascript arrays d3.js multidimensional-array

Answer 1

Answer №1

To access multidimensional data, utilize svg groups and make multiple .data calls. For more information, refer to Mike Bostock's tutorial on nested selections available at:

In the scenario where allrankings is structured as a multidimensional array like [[0,1,2,3],[2,3]], one way to manipulate the data could be:

// Transform the data to display average and number of elements for each bar
var data = allrankings.map(function(rankings){
    var avg;
    avg = rankings.reduce(function(a,b){ return a+b; })/rankings.length;
    return rankings.map(function(d){
        return {val: d, avg: avg, numBars: rankings.length};
    });
});

var barGroups = svg.selectAll(".bar-groups")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d, i){
     return "translate("+ i*20 + ",0)"; // Scales can be used for precision
   })
  .classed("bar-groups",true);

var bars = barGroups
  .selectAll(".bars")
  .data(function(d){ 
    return d; // Returns a one-dimensional array of objects
   })
  .enter()
  .append("rect");

Subsequently, you can assign values using the .avg, .val, and .numBars properties (e.g.

bars.attr("height", function(d){ return d.avg/d.numBars; });

An example similar to this approach utilized in stacked bar charts was described by Gilsha. It can be viewed at: https://bl.ocks.org/mbostock/3886208

Answer 2

To access multidimensional data, utilize svg groups and make multiple .data calls. For more information, refer to Mike Bostock's tutorial on nested selections available at:

In the scenario where allrankings is structured as a multidimensional array like [[0,1,2,3],[2,3]], one way to manipulate the data could be:

// Transform the data to display average and number of elements for each bar
var data = allrankings.map(function(rankings){
    var avg;
    avg = rankings.reduce(function(a,b){ return a+b; })/rankings.length;
    return rankings.map(function(d){
        return {val: d, avg: avg, numBars: rankings.length};
    });
});

var barGroups = svg.selectAll(".bar-groups")
  .data(data)
  .enter()
  .append("g")
  .attr("transform", function(d, i){
     return "translate("+ i*20 + ",0)"; // Scales can be used for precision
   })
  .classed("bar-groups",true);

var bars = barGroups
  .selectAll(".bars")
  .data(function(d){ 
    return d; // Returns a one-dimensional array of objects
   })
  .enter()
  .append("rect");

Subsequently, you can assign values using the .avg, .val, and .numBars properties (e.g.

bars.attr("height", function(d){ return d.avg/d.numBars; });

An example similar to this approach utilized in stacked bar charts was described by Gilsha. It can be viewed at: https://bl.ocks.org/mbostock/3886208

Navigating through an array with multiple dimensions and varying lengths using d3

Answer №1

Similar questions

Using jQuery, eliminate a single value from all drop down options

The AngularJS $resource is taking the entire object and embedding it into the URL

Choose2 - Dynamic search with auto-complete - keep track of previous searches

React with TypeScript: The children prop of this JSX tag is specifically looking for a single child of type ReactNode, but it seems that multiple children were passed instead

Issue with formik onchange event not filling data in Material UI TEXTFIELD component

Transforming raw data into an object in Angular: A step-by-step guide

Tips for managing static resources using webpack on the server side?

Can you explain the distinction between these two methods of slicing in a numpy array?

Sort a 2D integer array using the qsort function in C

The state variable is not accurately captured as it passes through various components

disable hover effect

Struggling with passing a function along with parameters to a component in React has been a challenge for me

When the update button is clicked, the textfield is hidden; it reappears upon refreshing the page

Error encountered in Angular JS: $parse:syntax Syntax Error detected

Animating objects in three.js along the projection plane

Customize Vuetify Menu by adding a unique custom keypad component for editing text fields

Troubleshoot: Why is my Google Chrome not playing videos? Uncover the solution with a

Customize the width of a DataTable cell in VuetifyJS

Generate the entity and then transfer the data into an array

Find the matching value of the first element in an array by comparing it with values in another array using