2

I try to use DC.js, but I don't manage to load an external csv using d3.csv.

Here is the JSfiddle working (with no external csv) : http://jsfiddle.net/nicart/6k96mzta/1/

But I can't call the csv spendData.csv (host here : https://raw.githubusercontent.com/nicart/DC-js-chart/master/spendData.csv) I try some code, but i'm new to JS, sorry... I thought this was ok but nothing happened.

d3.csv('https://raw.githubusercontent.com/nicart/DC-js-chart/master/spendData.csv', function(error, spendData) {
      spendData.forEach(function(d) {
       d.Spent = d.Spent.match(/\d+/);
      });

Is there a possibility to make something like this ? 

var spendData = d3.csv('https://raw.githubusercontent.com/nicart/DC-js-chart/master/spendData.csv')

Thanks.

Nicolaï Van Lennepkade
  • 124
  • 11

2 Answers2

3

Thanks to Ami Tavory I manage to load external CSV. I pull in the 

d3.csv("spendData.csv", function(error, spendData) {
    console.log(error);
    console.log(spendData);
// normalize/parse data
spendData.forEach(function(d) {

After the { I add all the rest of the script, so it render like this : 

d3.csv("spendData.csv", function(error, spendData) {
    console.log(error);
    console.log(spendData);
// normalize/parse data
spendData.forEach(function(d) {
    d.Spent = d.Spent.match(/\d+/);
});
// set crossfilter
var ndx = crossfilter(spendData),
    yearDim  = ndx.dimension(function(d) {return +d.Year;}),
    spendDim = ndx.dimension(function(d) {return Math.floor(d.Spent/10);}),
    nameDim  = ndx.dimension(function(d) {return d.Name;}),
    spendPerYear = yearDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendPerName = nameDim.group().reduceSum(function(d) {return +d.Spent;}),
    spendHist    = spendDim.group().reduceCount();
yearRingChart
    .width(200).height(200)
    .dimension(yearDim)
    .group(spendPerYear)
    .innerRadius(50);
spendHistChart
    .width(300).height(200)
    .dimension(spendDim)
    .group(spendHist)
    .x(d3.scale.linear().domain([0,10]))
    .elasticY(true);
spendHistChart.xAxis().tickFormat(function(d) {return d*10}); // convert back to base unit
spendHistChart.yAxis().ticks(2);
spenderRowChart
    .width(350).height(200)
    .dimension(nameDim)
    .group(spendPerName)
    .elasticX(true);
dc.renderAll();            
});

I think it's a dumb thing for developper but it was hard to understand for me. I update Jsfiddle, but as it is an external CSV it doesn't load, but you'll have the full code if you need (http://jsfiddle.net/nicart/6k96mzta/3/).

Nicolaï Van Lennepkade
  • 124
  • 11
  • Yes, that's the right way to go about it if your data is in a separate file. Thanks for following up. If you already have the data as a JavaScript string, it is possible to parse it synchronously using [`d3.csv.parse`](https://github.com/mbostock/d3/wiki/CSV#parse), as you wanted to do. Probably embedding data in a hidden element in the html and then loading it with `d3.csv.parse` [is the best way to deal with data in a jsfiddle](http://stackoverflow.com/a/22896088/676195). – Gordon May 30 '15 at 20:39
2

There are a couple of mistakes in your code (well, one and a half).

To begin with, the signature for csv calls for a use like

d3.csv(file_name, function(data, error) {...

note that data and error are reversed in your code.

Secondly, if nothing is displayed, you should first put in your callback function stuff like:

console.log(data);
console.log(error);

Check online for the proper way to see these log outputs in your specific browser. Otherwise, debugging Javascript is impossible.

Regarding your final question - d3 does not have an API for synchronous loading of CSV (or any other format, for that matter). Of course, you're not limited to d3 for loading CSV, but there's a reason it's not included - modern Javascript is increasingly moving away from that stuff, in order to make page responsiveness better.

Ami Tavory
  • 74,578
  • 11
  • 141
  • 185