Skip to content

Instantly share code, notes, and snippets.

@hlvoorhees

hlvoorhees/README.md

Last active April 14, 2018 16:51
Show Gist options
  • Save hlvoorhees/9d58e173825aed1e0218 to your computer and use it in GitHub Desktop.
Save hlvoorhees/9d58e173825aed1e0218 to your computer and use it in GitHub Desktop.
Download ZIP
process local csv file example
Raw
README.md

This example uses FileReader to process a local file instead of one provided by the server. To demonstrate, click "Choose File" and select a file. It will succeed on Chrome and Firefox, but not Internet Explorer (even a recent version).

In IE, an "Access is denied" error occurs when calling request.open() in d3_xhr.send() which occurs when calling d3.csv() with the data URL.

Can anyone suggest how to fix this for IE?

Edit: Found a workaround by using FileReader.readAsText() instead of readAsDataURL().

Raw
index.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="chrome=1" />
<meta http-equiv="Content-Type" content="text/html;charset=utf-8"/>
<!--this doesn't seem to help-->
<meta http-equiv="Access-Control-Allow-Origin" content="*"/>
<title>Process local CSV file</title>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var rowToHtml = function( row ) {
var result = "";
for (key in row) {
result += key + ": " + row[key] + "<br/>"
}
return result;
}
var previewCsvUrl = function( csvUrl ) {
d3.csv( csvUrl, function( rows ) {
d3.select("div#preview").html(
"<b>First row:</b><br/>" + rowToHtml( rows[0] ));
})
}
d3.select("html")
.style("height","100%")
d3.select("body")
.style("height","100%")
.style("font", "12px sans-serif")
.append("input")
.attr("type", "file")
.attr("accept", ".csv")
.style("margin", "5px")
.on("change", function() {
var file = d3.event.target.files[0];
if (file) {
var reader = new FileReader();
reader.onloadend = function(evt) {
var dataUrl = evt.target.result;
// The following call results in an "Access denied" error in IE.
previewCsvUrl(dataUrl);
};
reader.readAsDataURL(file);
}
})
d3.select("body")
.append("div")
.attr("id", "preview")
.style("margin", "5px")
// Initialize with csv file from server
previewCsvUrl("test.csv")
</script>
</body>
</html>
Raw
test.csv
column_1 column_2 column_3 column_4
this is row 1
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment