Javascript d3.js reading local CSV file

Question

So I need to read a .CSV file using a HTML webpage loaded locally (e.g with file:///) and plot the contants on a graph using d3.js. So far I have attempted to join two examples together without success...

If you open it, it is able to read the contents of the local csv file, but for some reason the graph does not appear.

Any help much appreciated!

<!DOCTYPE html>
<style> /* set the CSS */

body { font: 12px Arial;}

path { 
    stroke: steelblue;
    stroke-width: 2;
    fill: none;
}

.axis path,
.axis line {
    fill: none;
    stroke: grey;
    stroke-width: 1;
    shape-rendering: crispEdges;
}

</style>

<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="d3.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(event1) {
                  var dataUrl = event1.target.result;
                  // The following call results in an "Access denied" error in IE.
                  previewCsvUrl(dataUrl);
                  rendergraph(dataUrl);
              };
             reader.readAsDataURL(file);
            }
         })

      d3.select("body")
       .append("div")
         .attr("id", "preview")
         .style("margin", "5px")


var svg = d3.select("svg"),
    margin = {top: 20, right: 20, bottom: 30, left: 50},
    width = +svg.attr("width") - margin.left - margin.right,
    height = +svg.attr("height") - margin.top - margin.bottom,
    g = svg.append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")");

var parseTime = d3.timeParse("%d-%b-%y");

var x = d3.scaleTime()
    .rangeRound([0, width]);

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

var line = d3.line()
    .x(function(d) { return x(d.date); })
    .y(function(d) { return y(d.close); });

var rendergraph = function( url1 ) {
d3.csv(url1, function(d) {
  d.date = parseTime(d.date);
  d.close = +d.close;
  return d;
}, function(error, data) {
  if (error) throw error;

  x.domain(d3.extent(data, function(d) { return d.date; }));
  y.domain(d3.extent(data, function(d) { return d.close; }));

  g.append("g")
      .attr("transform", "translate(0," + height + ")")
      .call(d3.axisBottom(x))
    .select(".domain")
      .remove();

  g.append("g")
      .call(d3.axisLeft(y))
    .append("text")
      .attr("fill", "#000")
      .attr("transform", "rotate(-90)")
      .attr("y", 6)
      .attr("dy", "0.71em")
      .attr("text-anchor", "end")
      .text("Price ($)");

  g.append("path")
      .datum(data)
      .attr("fill", "none")
      .attr("stroke", "steelblue")
      .attr("stroke-linejoin", "round")
      .attr("stroke-linecap", "round")
      .attr("stroke-width", 1.5)
      .attr("d", line);
});

}

    </script>
  </body>
</html>

you need a local web server running – sparta93 Jun 12 '17 at 13:51 — sparta93, Jun 12 '17 at 13:51

score 0 · Answer 1 · answered Jun 12 '17 at 15:43

svg is being selected here but its not there in dom:

var svg = d3.select("svg"),

Either add svg element in the html or append to body using d3 by replacing the above code with:

var svg = d3.select("body").append('svg').attr('width', 300).attr('height', 300),

Javascript d3.js reading local CSV file

1 Answers1