How to select and read CSV files from your browser using D3.js

I'm not familiar with d3, so please check the graph processing yourself.Loading local files has little to do with d3.Now look at the documentation.

https://github.com/mbostock/d3/wiki/CSV

Issues an HTTP GET request for the comma-separated values (CSV) file at the specified url. The file contents are accumulated to be RFC 4180-component. The time type of the request will be "text/csv". The request is processed as expected, that this issue occurred.

The method is to issue GET for the argument url and read and parse the file in ajax.
If you want to take advantage of this, you may want to select a local file with <input type="file"/> and generate and pass objectURL from it.
Alternatively, isn't it possible to read the contents of the file in ajax and pass the csv string to d3.csv.parse?

We have prepared a sample, so please prepare the appropriate csv file and try it.

var select= document.querySelector('#selectFileInputFile');
var view= document.querySelector('#view');

select.addEventListener('change', function(){
	var file = select.files[0];
  if(file){
    var url = URL.createObjectURL(file);
    d3.csv(url, function(err,data){
    	if(!err){
        view.textContent=JSON.stringify(data, null, 4);
      }
    });
  }
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.4.11/d3.min.js"></script>

<input id="selectFileInputFile" type="file"/>
<pred="view"></pre>