基于另一列值的着色标记 - plotly.js

Question

我目前正在为工作编写一个报告仪表板，由于所支持的内容发生了一些变化，我的花哨和动态 RShiny 应用程序是行不通的，所以我试图将它全部移植到 javascript.我几乎不懂 js，把我知道的一切都写在 python 和 R 中，这引起了严重的头痛。

问题：我正在导入一个 csv 并尝试动态生成的图表显示各种事物，并由特定的列值着色。

为了简单起见，（此时真正的 csv 有将近二十列和几百行数据）假设我有：

#X.sample_id, key, project_type, manual_interventions
BulBa, 152, AAA, 12000
CharZard, 100, AAB, 5000
PikaChu, 117, AAA, 10
SquirTle, 090, AAB, 1000

将 X.sample_id 绘制为 X 轴，将 manual_interventions 绘制为 Y 轴，最重要的是我需要将它们着色为 project_type。现在我知道这和 python 和 R 中的任何事情一样简单，问题是我不想制作几十张图表来显示同一事物的变化（y 轴将有选项一些不同的事情），尤其是当这可以动态完成时。

到目前为止我已经写了：

<select onchange="selectedY()"  style="right: 10px; top: 20px;" id="dataBtn" title="Choose data">
    <option value="">Choose options</option>
    <option value="X.sample_id">TolID</option>
    <option value="key">GRIT Key</option>
    <option value="manual_interventions">Manual Interventions</option>
</select>

    <div class="card-body" id="chart"></div>
    <script>
        var data = [];
        var layout= {title: 'Graph', 'xaxis': {'title': 'X-axis'},
        autosize: true,
        width: 500,
        height: 500};
        var allRows = null

        Plotly.d3.csv('assets/data/pulled_data_sorted.csv', function(err, data){
                                        allRows = data
                                    });

        Plotly.plot("chart", data, layout, type="scatter", mode="markers");

            function selectedY() {
                var axisValue = $("#dataBtn :selected").val();
                var x_row = [], y_data = [];
                for (var i=0; i<allRows.length; i++) {
                    xrow = i;
                    row = allRows[i];
                    x_row.push(xrow);
                    y_data.push(+row[axisValue]);

                    var dataRow = {
                        x: x_row,
                        y: y_data,
                        mode: 'markers',
                        type: 'scatter',
                        line: {
                            color: '#62B5E5',
                            width: 2
                        }
                    };
               }

               layout['yaxis'] = {'title': {'text': axisValue}}
               Plotly.restyle('chart', 'y', [[]]);
               Plotly.plot("chart", [dataRow], layout, type="scatter", mode="markers");
              }
</script>

这会产生：

这与它需要的出版水平相去甚远。

诚然，这是改编自其他人的作品，因为我发现很难掌握它，而且我认为没有太多信息显示 csv 和 plotly 的任何特定深入使用（也许我我没找对地方，我不知道）。

所以最后我没有正确格式化 X 轴，我需要添加一个选项来更改 X 轴使用的数据列，project_type 没有颜色，我无法理解如何更进一步。

非常感谢任何帮助。谢谢。

Answer 1

我现在已经解决了这个问题，我依赖于它的工作方式，就像 Python 或 R 一样，其中颜色基本上是由脚本计算出来的，而不是明确地赋予它。

我知道这仍然很粗糙，我还有很多东西要学，但我发布这个以防它能帮助任何未来的潜在 js 学生。

<select onchange="selected()"  style="right: 10px; top: 20px;" id="dataBtn" title="Choose data">
       <option value="#sample_id">Tol</option>
       <option value="key">Key</option>
       <option value="manual_interventions">Manual Interventions</option>
</select>

<select onchange="selected()"  style="right: 10px; top: 20px;" id="dataBtn2" title="Choose data">
       <option value="manual_interventions">Manual Interventions</option>
       <option value="length change">Percentage Genome Length Change</option>
</select>

<select onchange="selected()"  style="right: 10px; top: 20px;" id="dataBtn3" title="Choose data">
       <option value="project_type">Project Type</option>
       <option value="'prefix">Clade Prefix</option>
</select>

<script>
        function selected() {
              makeplot()
        }

        function makeplot() {
              Plotly.d3.csv('CSV FILE',
              function(data){ processData(data) });
        }

        var layout = {
            autosize: true,
            width: 800,
            height: 800,
            xaxis:
                 {title: {text: "ID"}},
            yaxis:
                 {title: {text: "manual_interactions"}}
        }

        function processData(allRows) {
            console.log(allRows);
            var x = [], y = [], colour = [];
            var xaxis = $("#dataBtn").val()
            var yaxis = $("#dataBtn2").val()
            var colaxis = $("#dataBtn3").val()

            for (var i=0; i<allRows.length; i++) {
                 row = allRows[i];
                 x.push( row[xaxis] );
                 y.push( row[yaxis] );
                 colour.push( getColour(row[colaxis]) );
            }
            console.log( 'X',x, 'Y',y, 'colour', colour);
            makePlotly( x, y, colour, layout );
         }

         function rand_colour () {
             var r = Math.random()*255;
             var g = Math.random()*255;
             var b = Math.random()*255;
             return 'rgb('+r+','+g+','+b+')'
         }

         var colour_map = {}

         function getColour(project) {
             console.log(colour_map)
             if (project in colour_map) {return colour_map[project]}
                 colour_map[project] = rand_colour();
                 console.log(colour_map[project]);
                 return colour_map[project]
         }

         function makePlotly( x, y, colour, layout){
             var traces = [{
                 x: x,
                 y: y,
                 type: "scatter",
                 mode: "markers",
                 marker: {
                          color: colour,
                          width: 2
                         }
              }];
              Plotly.react('chart', traces, layout, {displayModeBar: true});
         }

         makeplot();
</script>

这导致生成了以下内容，它并不完美，但绝对比以前更接近我需要的东西。它按使用中的项目数量着色。

基于另一列值的着色标记 - plotly.js

Colouring markers based on value of another column - plotly.js

javascript

plotly

plotly.js