HTML5 FileReader output to D3.js chart

Question

I'm trying to use a local CSV file to populate my D3.js pie chart. The CSV file simply consists of

label,count
Monday,379130
Tuesday,424923
Wednesday,430728
Thursday,432138
Friday,428295
Saturday,368239
Sunday,282701

The d3.js chart is the simple pie chart explained here at ZeroViscosity:

http://zeroviscosity.com/d3-js-step-by-step/step-4-loading-external-data

So far I have,

 (function(d3) {
   ...

<input type="file" id="file_input" accept=".csv"/>
    <div id="output_field"></div>    
    <script type="text/javascript" src="js/read-csv.js"></script>

    <div id="chart"></div>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

I'm not sure how to get the data and then pass this on to the chart. How would I set this up?

So, where's the code?

Ismael Miguel
– Ismael Miguel

2016-05-16 20:29:56 +00:00
Commented May 16, 2016 at 20:29 — Ismael Miguel
– Ismael Miguel, Commented May 16, 2016 at 20:29

Fabricator · Accepted Answer · 2016-05-16 20:08:13Z

Use file API to load the file as data URL. See tutorial. Then, it can used like before d3.csv(url, ...):

function handleFileSelect(evt) {
  var file = evt.target.files[0];
  var reader = new FileReader();
  reader.onload = (function(theFile) {
    return function(e) {
      drawChart(e.target.result);
    };
  })(file);

  reader.readAsDataURL(file);
}

document.getElementById('file_input').addEventListener('change', handleFileSelect, false);

function drawChart(url) {
  var width = 360;
  var height = 360;
  var radius = Math.min(width, height) / 2;
  var donutWidth = 75;
  var legendRectSize = 18;
  var legendSpacing = 4;
  var color = d3.scale.category20b();
  var svg = d3.select('#chart')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
    .append('g')
    .attr('transform', 'translate(' + (width / 2) +
      ',' + (height / 2) + ')');

  var arc = d3.svg.arc()
    .innerRadius(radius - donutWidth)
    .outerRadius(radius);

  var pie = d3.layout.pie()
    .value(function(d) {
      return d.count;
    })
    .sort(null);

  d3.csv(url, function(error, dataset) { // NEW
    dataset.forEach(function(d) { // NEW
      d.count = +d.count; // NEW
    }); // NEW
    var path = svg.selectAll('path')
      .data(pie(dataset))
      .enter()
      .append('path')
      .attr('d', arc)
      .attr('fill', function(d, i) {
        return color(d.data.label);
      });

    var legend = svg.selectAll('.legend')
      .data(color.domain())
      .enter()
      .append('g')
      .attr('class', 'legend')
      .attr('transform', function(d, i) {
        var height = legendRectSize + legendSpacing;
        var offset = height * color.domain().length / 2;
        var horz = -2 * legendRectSize;
        var vert = i * height - offset;
        return 'translate(' + horz + ',' + vert + ')';
      });
    legend.append('rect')
      .attr('width', legendRectSize)
      .attr('height', legendRectSize)
      .style('fill', color)
      .style('stroke', color);

    legend.append('text')
      .attr('x', legendRectSize + legendSpacing)
      .attr('y', legendRectSize - legendSpacing)
      .text(function(d) {
        return d;
      });
  });
}

<input type="file" id="file_input" accept=".csv" />
<div id="output_field"></div>

<div id="chart"></div>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Wow, thanks. I was trying to load it as text for the longest time >.<

Collectives™ on Stack Overflow

HTML5 FileReader output to D3.js chart

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related