using CSV instead of TSV data in d3.js

Question

I'm trying to work with a pie chart example by Mike Bostock, however when I was trying to convert the data to csv it isn't working, and I'm not sure why?

Here is a plnk and offending code;

http://plnkr.co/edit/C0bJ0gM1Q9gIGxVe0vyF?p=preview

  d3.csv("data.csv", type, function(error, data) {
  if (error) throw error;

  var path = svg.datum(data).selectAll("path")
    .data(pie)
    .enter().append("path")
    .attr("fill", function(d, i) {
      return color(i);
    })
    .attr("d", arc)
    .each(function(d) {
      this._current = d;
    }); // store the initial angles

  d3.selectAll("input")
    .on("change", change);

  var update = function() {
    d3.select("input[value=\"oranges\"]").property("checked", true).each(change);
  };

  function change() {
    var value = this.value;
    clearTimeout(update);
    pie.value(function(d) {
      return d[value];
    }); // change the value function
    path = path.data(pie); // compute the new angles
    path.transition().duration(750).attrTween("d", arcTween); // redraw the arcs
  }
});

function type(d) {
  return {
      apples: d.apples,
  oranges: d.oranges
  };
}

// Store the displayed angles in _current.
// Then, interpolate from _current to the new angles.
// During the transition, _current is updated in-place by d3.interpolate.
function arcTween(a) {
  var i = d3.interpolate(this._current, a);
  this._current = i(0);
  return function(t) {
    return arc(i(t));
  };
}

Also, as you can probably guess I am new to d3. I was wondering what would be more effective, using raw csv data from an excel file or converting it into JSON and parsing data through to d3 that way? (I know this is subjective, just hoping to attain a couple of opinions, it's not important in regards to the coding problem).

Thanks for your time

I prefer JSON, easier to read and i think it may be faster, maybe ..... As for the conversion, why are you trying to convert to csv ? — thatOneGuy
– thatOneGuy, Commented May 17, 2016 at 9:04
I also prefer JSON. I can build the JSON according to the dataviz I'll create, it's way more convenient, but involves more work. — Gerardo Furtado
– Gerardo Furtado, Commented May 17, 2016 at 9:07

Community · Accepted Answer · 2017-05-23 12:31:40Z

You view isn't working as your CSV is wrong.

CSV : Comma Seperated Values, no spaces.

Where is your CSV you have spaces after each comma. So all the apples values work fine as they have no spaces but doesn't work when it comes to oranges as for starters it reads 'oranges' as ' oranges' (notice the space) and all the values also have a space behind.

Change to this it will work fine :

apples,oranges
53277,200
28479,200
19697,200
24037,200
40245,200

http://plnkr.co/edit/P3loEGu4jMRpsvTOgCMM?p=preview

As for what data type to use see this example : What are the relative merits of CSV, JSON and XML for a REST API?

The second answer has a good comparison of a few data types, for example, CSV, JSON, XML.

Here is a snippet :

Advantages:

XML - Lots of libraries, Devs are familiar with it, XSLT, Can be easiily Validated by both client and server (XSD, DTD), Hierarchical Data

JSON - easily interpreted on client side, compact notation, Hierarchical Data

CSV - Opens in Excel(?)

Disadvantages:

XML - Bloated, harder to interpret in JavaScript than JSON

JSON - If used improperly can pose a security hole (don't use eval), Not all languages have libraries to interpret it.

CSV - Does not support hierarchical data, you'd be the only one doing it, it's actually much harder than most devs think to parse valid csv files (CSV values can contain new lines as long as they are between quotes, etc).

Collectives™ on Stack Overflow

using CSV instead of TSV data in d3.js

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related