Blank x and y values in JS

plotly.js
1

Hi, I’ve been trying to make a scatter plot in HTML using JS and it shows up empty whenever I pass in the arrays for the x and y axis values. However, when hardcoding the data it works just fine. What seems to be the issue here? I’m pretty new to Plotly and JS so this could be a pretty simple question.
For reference, this is what my code looks like:

var fs = require(‘fs’);

var data = fs.readFileSync(‘python/1st.csv’)
.toString()
.split(‘\n’)
.map(e => e.trim())
.map(e => e.split(‘,’).map(e => e.trim()));

var x_axis =
var y_axis =
for (var i = 0; i < data.length; i++){
x_axis.push(data[i][1])
y_axis.push(data[i][2])
}

function Graph1(){
var data = [{
x: x_axis,
y: y_axis,
mode: ‘markers’,
type: ‘scatter’,
marker: { size: 12 }
}];

var layout = {

title:‘Rookies’
};

Plotly.newPlot(‘Graphfstpick’, data, layout);

}

2

Hi,

Welcome to the community!

Is your data parsed correctly? I would recommend you to use e.g. d3-dsv instead of doing it manually (and d3-fetch if you want to fetch the csv async).

3

Hi, both x_axis and y_axis are arrays of floats which is what they should be for it to work, no?
I also have been having some issues with d3, that’s why I’m not using it in the first place. I opened a thread in StackOverflow on this. Here’s the link for more information:

Thanks

4

Yes, they should be arrays… Can you confirm that they are arrays inside Graph1 (console.log(x_axis)) when the graph is empty?

Not sure about your d3 error, sounds like it is not imported… Please share your html file as well, so I can see how you are importing it.

5

This is what x_axis and y_axis look like when running the file:
xy axis

This is what the HTML looks like:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="rooks.css">
    <link rel="preconnect" href="https://fonts.googleapis.com">
    <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
    <link href="https://fonts.googleapis.com/css2?family=Montserrat:wght@400&display=swap" rel="stylesheet">
    <title>Rooks</title>
    <script src="https://d3js.org/d3.v7.min.js"></script>
    <script src="rooks.js"></script>
    
    <script src="plotly-2.12.1.min.js"></script>
    <script src="https://cdn.jsdelivr.net/npm/chart.js@3.9.1/dist/chart.min.js"></script>
    
   


 


    
</head>
<body>

   </div>
   <div class="container5">
    <div class="titlecont5">...VERSUS PAST YEARS' SELECTIONS</div>
    
    <div id="Graphfstpick"></div>
    
    <script>
       Graph1()
 	
    </script>

   </div>
</body>
</html>
6

I just noticed that you are trying to use fs to open the file and using the node syntax to import it. I don’t think these things work in the browser…

Here is one simple example on how to import the file with d3.csv:

You should be able to adapt your example using a local csv (just use the relative path as you are doing) and your own parameters for the plot.

7

I actually have already tried doing that and I still can’t get it to work, both when using the sample code you provided with no alterations and when using my own csv file. I just get an empty plot, like this:

Screenshot 2022-08-15 115859
Screenshot 2022-08-15 115859477×843 11.5 KB

If it helps, this is the local csv file:

Name, MPG, PPG, TS, BPM
Kwame Brown,14.3,4.5,0.45,-4.0
Yao Ming,29.0,13.5,0.57,2.2
LeBron James,39.5,20.9,0.488,1.7
Dwight Howard,32.6,12.0,0.571,0.0
Andrew Bogut,28.6,9.4,0.555,0.4
Andrea Bargnani,25.1,11.6,0.546,-1.8
Derrick Rose,37.0,16.8,0.516,-0.4
John Wall,37.8,16.4,0.494,-0.8
Kyrie Irving,30.5,18.5,0.566,4.1
Anthony Davis,28.8,13.5,0.559,2.5
Anthony Bennett,12.8,4.2,0.425,-7.4
Andrew Wiggins,36.2,16.9,0.517,-2.4
Karl-Anthony Towns,32.0,18.3,0.59,2.2
Markelle Fultz,18.1,7.1,0.416,-2.6
Deandre Ayton,30.7,16.3,0.608,0.2
Zion Williamson,27.8,22.5,0.616,2.1
Anthony Edwards,32.1,19.3,0.523,-2.1
Cade Cunningham,32.6,17.4,0.504,-1.6

I’m keeping the code as is, except for the x.push and y.push parameters, which I’m changing to row[‘MPG’] and row[‘PPG’], respectively (and I’m also changing the ‘myDiv’ id to the one I want the graph to be displayed in, in my HTML file).

8

Try this instead, but be careful that you have spaces in your csv headers (you should remove them):

function Graph1() {
  d3.csv("static/stats.csv").then(function (data) {
    var plotData = [
      {
        x: data.map(d => d["MPG"]),
        y: data.map(d => d["PPG"]),
        mode: "markers",
        type: "scatter",
        marker: { size: 12 },
      },
    ];

    var layout = {
      title: "Rookies",
    };

    Plotly.newPlot("Graphfstpick", plotData, layout);
  });
}

Does it work?

Note: I believe the plotly example is using a older version of d3.

9

It does work! Thank you so much!