I'm practicing trying to replicate the USA Chorleth map (/)
When I run their code snippet where it links to the CSV file (.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=".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>
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./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>
1 Answer
Reset to default 3change 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.
发布者：admin，转转请注明出处：http://www.yc00.com/questions/1745397448a4625944.html
评论列表（0条）