d3.js stacked bar chart custom height for Category

Question

I am using recently d3.js and I came up with an problem, for which I can´t find an solution.

I need an stacked Bar/column where I can configure how long an Category (a part of one line) is and which color it has. This length is computed from an formula. This formula is the same for the whole Line and chart.

I would like to knew how to assign an custom length to that categories and colors. At the beginning I only have a Matrix, whose data is used by the formula. I suppose I have to do something with the data. -Attribute. Btw, the formula takes also the graph height, and width into account so it is possible that the data has to be recomputed at runtime.

I can show no code, since I have no idea where to begin.

EDIT:

Here it´s written that you have to use .stack() to use stacked bars. And [here][2] is .stack() used, but here it´s not. I don´t get why those in link3 don´t need the stack() function? Furthermore it´s written that I have to provide data in

      var dataset = [
    [ { x: 0, y: 5 },
      { x: 1, y: 4 },      
    ],
    [
     { x: 0, y: 10 },...]

form, my data is like that matrix = [[val1,val2,.....,val10], [val1,...val10]]

The data in one inner Array should be stacked, that Martix has around 5k entries. Do I have to make an Matrix with 10 inner Array where each Array consists of 5k entries? And at last, that values are from 0 to 1, is it better to control the height of the bars with style or with scale?

Answer 1

D3js' examples are all really great. There is a ton of them, and they all contain the source code and sample data.

I would start there and see if you can find one to your liking.

This one is my best guess of the closest one to what you want.

He rearranges the width of the bars, so he already supplies you with a function to change the size, you just have to make it work with your data.

Update

In the first example you linked to, the .stack() function is used for data that is already in the format that you provided in your answer. Therefore, that function won't be of much help to you.

The second example he states that he avoids using the .stack() function because you can do it manually.

This example doesn't use d3.layout.stack because it's easy to just stack each state independently via array.forEach.

I'm not sure what you mean by one inner Array should be stacked .

In the examples, the data is stacked like so (I changed the names and added comments for clarity):

var dataset = [
    // Columns a, b, and c
    { a: 5, b: 10, c: 22 }, // row 1
    { a: 4, b: 12, c: 28 }, // row 2
    { a: 2, b: 19, c: 32 }, // row 3
    { a: 7, b: 23, c: 35 }, // row 4
    { a: 23, b: 17, c: 43 } // row 5
];


var bars_dataset = [
    // Stacked Bar #1
    [
            { x: 0, y: 5 }, // row 1, column a
            { x: 1, y: 4 }, // row 2, column a
            { x: 2, y: 2 }, // row 3, column a
            { x: 3, y: 7 }, // row 4, column a
            { x: 4, y: 23 } // row 5, column a
    ],
    // Stacked Bar #2
    [
            { x: 0, y: 10 }, // row 1, column b
            { x: 1, y: 12 }, // row 2, column b
            { x: 2, y: 19 }, // row 3, column b
            { x: 3, y: 23 }, // row 4, column b
            { x: 4, y: 17 }  // row 5, column b
    ],
    // Stacked Bar #3
    [
            { x: 0, y: 22 }, // row 1, column c
            { x: 1, y: 28 }, // row 2, column c
            { x: 2, y: 32 }, // row 3, column c
            { x: 3, y: 35 }, // row 4, column c
            { x: 4, y: 43 }  // row 5, column c
    ]
];

As I think you figured out already, there are three rows in the bars_dataset because there are three columns in the dataset . If this is how you want your bars to be stacked, then yes, you will have a bars_dataset with 10 arrays that consist of ~5k objects.

However, if you want the first array with 10 values in your matrix to make up the first bar, and so on... Then you will need to have a bars_dataset of ~5k arrays with 10 objects in each of them.

From the way you worded your question, it seems you want the second solution, and not the first. Whichever way you plan on stacking them, let me know and I will update my answer with some sample code.