Группировка значений x на линейном графике с помощью Plotly on JS - PullRequest
Новая
       81

Группировка значений x на линейном графике с помощью Plotly on JS

1 голос
/ 06 августа 2020

У меня проблемы с группировкой значений по оси X. Я пытаюсь получить агрегированные значения по месяцам, а не просматривать ежедневно.

Вот пример того, что я создал прямо сейчас:

JS версия (What У меня есть прямо сейчас)

Вот пример того, как я хочу, чтобы он отображался:

Как я хочу отображать график

Это это текущий код, который у меня есть прямо сейчас. Я не уверен, нужно ли мне редактировать что-либо в макете или создавать функцию. 

$(document).ready(function() {
makeChart(2018);


$('#yearFilter').change(function() {
    let year = $(this).val();
    makeChart(year);
})

});

function makeChart (year) {

d3.select("#line-graph").empty();
d3.select("#line-graph").append();

url = "https://data.cityofnewyork.us/resource/833y-fsy8.json?"

var date = `$where=occur_date%20between%20%27${year}-01-01T00:00:00%27%20and%20%27${year+1}-01-01T00:00:00%27`;

var fullUrl = url + date;


var boroughs = []
var fatalities = []


d3.json(fullUrl).then(function(response) {
    console.log(data);

    var boroughs = response.map(x => x.occur_date);
    boroughs = [...new Set(boroughs)];

    var murderData = {};
    var nonFatalData = {};

    boroughs.forEach(borough => {
        let specBorough = response.filter(x => x.occur_date === borough);
        let totalFatals = specBorough.map(x => x.statistical_murder_flag).reduce((a, b) => a + b);
        murderData[borough] = totalFatals;

        console.log(boroughs);
        let nonFatals = specBorough.length - totalFatals;
        nonFatalData[borough] = nonFatals;
    });


    var trace1 = {
        x: Object.keys(nonFatalData),
        y: Object.values(nonFatalData),
        name: 'NonFatal Shootings',

        type: 'line',
        marker: {
            color: 'rgb(165,0,0)'

        }
    };

    var trace2 = {
        x: Object.keys(murderData),
        y: Object.values(murderData),
        name: 'Fatal Shootings',

        type: 'line',
        marker: {
            color: 'rgb(198, 36, 28)'
        }
    };

    var data = [trace1];

    var layout = {
        title: 'Total Shootings By Year',
        //barmode: 'stack'
    };

    Plotly.newPlot('line-graph', data, layout);
});

};

Любая помощь приветствуется, спасибо.

...