Learning how to pass multiple rows of data using d3 is essential for effective data

Here is some code that I am working with:

var row = 4;
var col = 4;
var stack = d3.layout.stack();
var layers = stack( d3.range(row).map(function() {
    return CmcLayer(col); 
}));

function CmcLayer(col) {
    var a = [1, 2, 3, 4];
    return a.map(function(d, i) { return {x: i, y: d}; });
}

Ideally, I would like to pass in data in this format or something similar:

var a = [[1, 2, 3, 4], 
         [4, 3, 2, 1],
         [1, 2, 3, 4],
         [4, 3, 2, 1]];

What modifications are required to make it accept multiple rows?

Answer №1

Cracked the code! Sharing the solution for future reference.

    var pile = d3.layout.pile();
    var strata = pile( LayerData() );

    function LayerData() {
        var info = [[1, 2, 3, 4], // base
                    [1, 2, 3, 4],
                    [1, 2, 3, 4],
                    [4, 2, 3, 4]]; // top

        info = info.map(function(d) { 
            return d.map(function(i, j) { 
                return {x:j, y:i, y0:0};
            });
        });

        return info;
    }

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

The change event for Bootstrap 4 switches is not functioning as expected

I am facing an issue with multiple Bootstrap 4 switches that are dynamically loaded onto the page using JS append. I need to call a function when the switch changes. The example below works fine when the switches are added in HTML, but it doesn't work ...

I'm trying to find the official documentation for the Mongoose save() method. Can

When it comes to working with Mongoose, saving data is a common task. However, the official documentation for the save method seems to be elusive. A quick Google search brings up: https://mongoosejs.com/docs/models.html and https://mongoosejs.com/docs/d ...

Effortless Like/Unlike feature with a text button option enhanced with ajax functionality and

Struggling to create a simple Like/Unlike button in PHP without refreshing the page. Despite an abundance of tutorials on AJAX and jQuery, implementation remains elusive due to lack of experience. Uncertain where each part of the code goes within which fil ...

Display the cover image of the page as you scroll through the content

Trying to implement a scrolling effect where the content covers an image from this tutorial video. The issue I'm encountering is that the image is not a background image but an actual image tag. Here's my current code: <section id="home" clas ...

Make sure that the click event listener is set up on the anchor element so that it also affects its children

Currently, I have implemented a click event listener on my anchor elements. However, the anchors contain a span element within them, and the event listener does not function properly if you click on the span inside the anchor. document.addEventListene ...

What's the best way to include various type dependencies in a TypeScript project?

Is there a more efficient way to add types for all dependencies in my project without having to do it manually for each one? Perhaps there is a tool or binary I can use to install all types at once based on the dependencies listed in package.json file. I ...

Ways to restrict user access to internal pages without login in Reactjs

I have been working on a project using Reactjs with the nextjs framework. Currently, I am focusing on implementing a login and logout module. My goal is to redirect any user attempting to access an inner page without being "logged in" to the "index/login ...

Having trouble with jQuery's show/hide methods not functioning properly

Check out my codepen for everyone to experiment with.... CodePen.io I'm having trouble displaying the #play-again button after a game is over using $('#play-again').show(). Any suggestions on this issue??? Update Included raw html link ...

Using Node.JS, Sequelize, and Moment.JS to format dates

Seeking help on formatting a date loaded from Sequelize in my database. I'm working on a blog and need to display the creation date of an article. Here's my route: app.get("/", (req,res) =>{ Article.findAll({ order:[ [ ...

Comparing the Length of JavaScript Arrays

I have code that checks for similar values in two arrays, and if there are any, they are not displayed in the result. However, when I switch the lengths of the arrays so that Array2 is longer than Array1, I end up with an empty result array. How can I achi ...

Incorporating SEO for a Flash-Based Website

After reading through various discussions on this topic, it seems like my question still remains unanswered. We are gearing up to revamp our company's website in the coming months. Currently, our site is mostly text-based, which has helped us achieve ...

Preventing a JavaScript timer function from executing multiple times when triggered by an 'in viewport' function

I am trying to create a website feature where a timer starts counting up once a specific div is scrolled into view. However, I am encountering an issue where scrolling away restarts the timer, and I would like the final value that the timer reaches to rema ...

Ways to invoke a class method by clicking on it

My initialization function is defined as follows: init: function() { $("#editRow").click(function() { <code> } $(".removeRow").click(function() { <code> } } I am trying to find a way to call the class method removeRow directly in the onc ...

Unlocking the TypeScript UMD global type definition: A step-by-step guide

I have incorporated three@^0.103.0 into my project, along with its own type definitions. Within my project's src/global.d.ts, I have the following: import * as _THREE from 'three' declare global { const THREE: typeof _THREE } Additio ...

Trouble with populating Ext.grid.Panel from ExtJS4 JSON data

Despite researching various posts on the topic, I am still facing issues. Even after attempting to create a Panel with minimal data, I cannot seem to make it work. This problem is really puzzling me. Below is the code snippet that I am currently working wi ...

The Keyup Filter in the FromEvent function is malfunctioning and not behaving as anticipated

I have created a simple search function for my app using the FromEvent KeyUp and debounceTime features as shown in the code below: <input matInput #inputSearch> @ViewChild('inputSearch', { static: false }) input: ElementRef; fromEvent(th ...

Is it possible for AngularJS to automatically update a view when a persistent model (stored in a server database) is altered by an external application?

I'm just beginning to explore AngularJS, however, I am interested in creating a web application that can automatically update the user interface in real-time without needing to refresh the page whenever there is a change in the server-side database. ...

generate JSON containing a nested array of data and headings using NodeJS express

My Node.js API is currently returning JSON in the following format: [ { "id" : "1", "tstamp": "2017-06-01T00:00:00.000Z", "dmemberprofiles","48400" "dgroupprofiles","4800" "msclprofiles","400" }, { ...

Error message: Unauthorized request error with the change.org JavaScript API

I am currently working on integrating the javascript API from change.org in order to retrieve all of my signed petitions for display on my source forge page. However, I am encountering an unauthorized request response from the change.org API. Despite tryi ...

Tips for maintaining the browser scroll bar at the top when switching routes in AngularJS

How can I ensure that the scrollbar is always at the top when a user is redirected to a different page after scrolling down on the home page? The autoscroll feature in the code below doesn't seem to be working. Any suggestions would be greatly appreci ...