Plotly.js - получить 4 значения y для каждого x в столбчатой ​​диаграмме с накоплением

Question

Я построил столбчатую диаграмму с накоплением для 4 значений данных, которые у меня есть для каждого штата США. Файл CSV, над которым я работал, выглядит следующим образом:

Вот код JS, который я написал для гистограммы с накоплением:

// Read the data from CSV
d3.csv('https://raw.githubusercontent.com/krithikaragha/ResPy/master/Flask%20App/static/data/tobacco_use_by_state.csv', function(data) {

    var chartData = []; // Array containing all the traces
    function makeTrace(d) {    // Function to make all 50 traces
        return {
            x: ["Smokes Everyday", "Smokes Somedays", "Former Smoker", "Never Smoked"],
            y: [d.smokesEveryday, d.smokesSomedays, d.formerSmoker, d.neverSmoked],
            name: d.state,
            type: 'bar'
        }   
    }

    // Loop through all rows of the data
    for(var i = 0; i < data.length; i++) {

        // Call makeTrace to create a trace with index i
        chartData.push(makeTrace(data[i]));

        // Define a chart layout
        var layout = {
            barmode: 'stack',
            width: 1200,
            height: 800
        };

        // Plot the stacked bar chart 
        Plotly.newPlot('bar', chartData, layout);
    }
});

Получившаяся гистограмма с накоплением в итоге выглядела так:

Результат, которого я хочу достичь: я хочу, чтобы в каждом штате США была своя полоса, на которой расположены соответствующие 4 значения (smokesEveryday, smokesSomedays, прежнийSmoker и neverSmoked)

Есть ли способ, которым я могу этого достичь? Заранее спасибо.

Answer 1

Я понял это сам.

Оказывается, мне пришлось сделать четыре отдельных следа для каждого из 4-х необходимых мне значений.Поэтому я перебрал данные и создал массивы для каждого столбца - smokedEveryday, smokesSomedays, прежнийSmoker и neverSmoked и последний массив состояний для хранения сокращений состояний.

Затем я создал 4 отдельные трассы с осью X, содержащей состоянияМассив и ось Y содержат соответствующий курительный массив.

Вот измененный фрагмент кода:

// Read the data from CSV
d3.csv('https://raw.githubusercontent.com/krithikaragha/ResPy/master/Flask%20App/static/data/tobacco_use_by_state.csv', function(data) {

    var states = [];
    var smokesEveryday = []; 
    var smokesSomedays = [];
    var formerSmoker = [];
    var neverSmoked = [];

    // Loop through all rows of the data
    for(var i = 0; i < data.length; i++) {

        states.push(data[i].abbr);
        smokesEveryday.push(data[i].smokesEveryday);
        smokesSomedays.push(data[i].smokesSomedays);
        formerSmoker.push(data[i].formerSmoker);
        neverSmoked.push(data[i].neverSmoked);
    }

    var smokesEverydayTrace = {
        x: states,
        y: smokesEveryday,
        name: 'Smokes Everyday',
        type: 'bar'
    };

    var smokesSomedaysTrace = {
        x: states,
        y: smokesSomedays,
        name: 'Smokes Somedays',
        type: 'bar'
    };

    var formerSmokerTrace = {
        x: states,
        y: formerSmoker,
        name: 'Former Smoker',
        type: 'bar'
    };

    var neverSmokedTrace = {
        x: states,
        y: neverSmoked,
        name: 'Never Smoked',
        type: 'bar'
    };
      
    var data = [neverSmokedTrace, formerSmokerTrace, smokesSomedaysTrace, smokesEverydayTrace];
    
    var layout = {
        barmode: 'stack', 
        title: "Percentage of Tobacoo Use by State",
        xaxis: {
            title: {
                text: "Tobacco Use"
            }, 
            tickangle: 45
        },
        yaxis: {
            title: {
                text: "Percentage"
            }
        },
        bargap: 0.4,
        width: 1250,
        height: 800
    };
    
    Plotly.newPlot('bar', data, layout);
    
});