3

Are the following errors somehow related to each other?

Access to fetch at 'file:///C:/Users/Muhy/Dropbox/Scripts/data.csv' from origin 'null' has been blocked by CORS policy: Cross origin requests are only supported for protocol schemes: http, data, isolated-app, chrome-extension, chrome, https, chrome-untrusted.

Failed to load resource: net::ERR_FAILED          data.csv:1

Uncaught (in promise) TypeError: Failed to fetch at cc (d3.v7.min.js:2:100754) at Object.csv (d3.v7.min.js:2:100878) at data-script.js:20:4          d3.v7.min.js:2

I have a simple csv file in the root folder of my scripts:

enter image description here

It contains the following:

x,y,z
1,2,3
2,4,6
3,6,9
4,8,12
5,10,15
6,12,18
7,14,21
8,16,24
9,18,27
10,20,30

My simple stylesheet file contains only the following:

.legend {
    font-family: Arial, sans-serif;
    font-size: 12px;
}

My html script is also simple:

<html>

<head>
    <title>D3 Legend Scatterplot</title>

    <link rel="stylesheet" href="style-sheet.css">
</head>

<body>
    <script src="https://d3js.org/d3.v7.min.js"></script>

    <script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3-legend/2.25.6/d3-legend.min.js"></script>

    <svg id="scatterplot"></svg>
    <div id="legend"></div>

    <script src="data-script.js"></script>
</body>

</html>

My Javascript file basically sets up a scatterplot with the legend attached:

// Set up the scatter plot.
var margin = { top: 20, right: 20, bottom: 30, left: 40 };
var width = 600 - margin.left - margin.right;
var height = 400 - margin.top - margin.bottom;

var x = d3.scaleLinear()
    .range([0, width]);

var y = d3.scaleLinear()
    .range([height, 0]);

var color = d3.scaleSequential(d3.interpolateViridis);

var svg = d3.select("#scatterplot")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
    .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

d3.csv("data.csv").then(function (data, error) {
    if (error) throw error;

    data.forEach(function (d) {
        d.x = +d.x;
        d.y = +d.y;
    });

    x.domain(d3.extent(data, function (d) { return d.x; })).nice();
    y.domain(d3.extent(data, function (d) { return d.y; })).nice();
    color.domain(d3.extent(data, function (d) { return d.z; }));

    svg.selectAll(".dot")
        .data(data)
        .enter().append("circle")
        .attr("class", "dot")
        .attr("r", 3.5)
        .attr("cx", function (d) { return x(d.x); })
        .attr("cy", function (d) { return y(d.y); })
        .style("fill", function (d) { return color(d.z); });

    // Set up the legend.
    var legend = d3.legendColor()
        .labelFormat(d3.format(".2f"))
        .title("Z Value")
        .scale(color);

    svg.append("g")
        .attr("class", "legend")
        .call(legend);
});

I have already installed and activated a CORS Unblock extension on my Chrome browser. I have no idea how else I can fix these issues. Could someone please help me with this?

It's been a week and I still have not found out what I am doing wrong, so I would appreciate any help.

Muhy
  • 630
  • 1
  • 6
  • 12
  • Are you using a server? MAMP, WAMP? Also, but not related to your question, D3 uses fetch, so that `error` in your `then` has no effect. – Gerardo Furtado Mar 23 '23 at 08:38
  • No, I am only running these scripts in a Visual Studio IDE locally. Not using any server. Is that what you mean? – Muhy Mar 23 '23 at 08:49
  • So, I should remove `if (error) throw error` from my code? – Muhy Mar 23 '23 at 08:50
  • I see, so that's the expected result. Check the duplicate. I personally use MAMP, but you can use WAMP (Windows), a Python server, or any other server you want, but you cannot load local files from the browser like that. – Gerardo Furtado Mar 23 '23 at 08:51
  • Yes, regarding the `if (error) throw error` you can remove it, that's not how you catch an error with Fetch. – Gerardo Furtado Mar 23 '23 at 08:52

0 Answers0