Plotly Javascript Not Working w Local CSV

Question

I'm practicing trying to replicate the USA Chorleth map (https://plot.ly/javascript/choropleth-maps/)

When I run their code snippet where it links to the CSV file (https://raw.githubusercontent.com/plotly/datasets/master/2011_us_ag_exports.csv) it works.

However, when I try downloading that CSV and running it with a local file path, the graph doesn't work. I'm having a hard time trying to check though since Plotly doesn't explicitly document everything (I know this somewhat uses the D3 protocols).

All I've done is change file paths.

<head>
<!-- Plotly.js -->
<script src="https://cdn.plot.ly/plotly-latest.min.js"></script>
</head>
<body>
<!-- Plotly chart will be drawn inside this DIV -->
<div id="myDiv"></div>
<script>
    Plotly.d3.csv("C:/Users/Me/Desktop/JavaScript Practice/2011_us_ag_exports.csv", function (err, rows) {
        function unpack(rows, key) {
            return rows.map(function (row) { return row[key]; });
        }

        var data = [{
            type: 'choropleth',
            locationmode: 'USA-states',
            locations: unpack(rows, 'code'),
            z: unpack(rows, 'total exports'),
            text: unpack(rows, 'state'),
            zmin: 0,
            zmax: 17000,
            colorscale: [
              [0, 'rgb(242,240,247)'], [0.2, 'rgb(218,218,235)'],
              [0.4, 'rgb(188,189,220)'], [0.6, 'rgb(158,154,200)'],
              [0.8, 'rgb(117,107,177)'], [1, 'rgb(84,39,143)']
            ],
            colorbar: {
                title: 'Millions USD',
                thickness: 0.2
            },
            marker: {
                line: {
                    color: 'rgb(255,255,255)',
                    width: 2
                }
            }
        }];

        console.log(data.locations);
        var layout = {
            title: '2011 US Agriculture Exports by State',
            geo: {
                scope: 'usa',
                showlakes: true,
                lakecolor: 'rgb(255,255,255)'
            }
        };
        Plotly.plot(myDiv, data, layout, { showLink: false });
    });
</script>

Community · Accepted Answer · 2017-05-23 12:30:24Z

3

change your path to a relative path Plotly.d3.csv("2011_us_ag_exports.csv",......

the problem isn't with plotly, but rather local file access with javascript.

edited May 23, 2017 at 12:30

CommunityBot

11 silver badge

answered Nov 4, 2016 at 17:41

Conan

6927 silver badges12 bronze badges

Sign up to request clarification or add additional context in comments.

4 Comments

James Holland Over a year ago

I tried that and it didn't work; but this is my first foray into web design. The file is located in the same folder as the html file.

Conan Over a year ago

you're probably seeing a cross-origin error in console - running a local server will solve this: stackoverflow.com/questions/21006647/…

phil Over a year ago

You can try it with firefox. I load a local tab file with firefox and it works (with d3.tsv("AFolder/file.tab")). The same example not works in chrome cause the mentioned crosse-origin error.

lovechillcool Over a year ago

You can simply use python3 (in your development folder) python -m http.server 8888 & then open your html in your browser localhost:8888/yourfile.html; make sure also change the csv file path to http://localhost:8888/path-to-csv in your js script.

Collectives™ on Stack Overflow

Plotly Javascript Not Working w Local CSV

1 Answer 1

4 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

4 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related