Two csv http URL data same chart in D3

Question

I am trying to combine two or multiple csv data from URL Http request using D3.js of different days but with the code above only get the first chart data.How could do that?,what i am doing wrong?:

d3.csv("https://website.com/entry.csv?start=2015-11-30%2020:30:00&end=2015-12-01%2008:30:00",
        function (error, data) {
            data.forEach(function (d) {
                d.date = (d.created_at);
                d.value = +d.field1;
            });
            d3.csv("https://website.com/entry.csv?start=2015-12-01%2020:30:00&end=2015-12-02%2008:30:00",
                function (error, data1) {                    
                    data1.forEach(function (d) {
                        d.date1 = (d.created_at);
                        d.value1 = +d.field1;                           
                    });

    //How to edit this line to avoid chart the two csv url data?       x.domain((data).map(function (d) { return (d.date); }));                  
                    y.domain([0, d3.max(data, function (d) { return d.value; })]);


                    svg.append("g")
                        .attr("class", "x axis")
                        .attr("transform", "translate(0," + height + ")")
                        .call(xAxis)
                      .selectAll("text")
                        .style("text-anchor", "end")
                        .attr("dx", "-.9em")
                        .attr("dy", "-.55em")
                        .attr("transform", "rotate(-90)");

                    svg.append("g")
                        .attr("class", "y axis")
                        .call(yAxis)
                      .append("text")
                        .attr("transform", "rotate(-90)")
                        .attr("y", 6)
                        .attr("dy", ".71em")
                        .style("text-anchor", "end")
                        .text("Nº Personas");
//Or edit the next part of code to avoid chart the two csv data?    
                        svg.selectAll("bar")
                        .data(data)
                        .enter().append("rect")
                        .style("fill", "steelblue")
                        .attr("x", function (d) { return x(d.date); })
                        .attr("width", 14)
                        .attr("y", function (d) { return y(d.value); })
                        .attr("height", function (d) { return height - y(d.value); });


                    });

            });

Thanks in advance.

Answer 1

As @Cyril explains, you have to combine the data from your d3.csv requests. If you're going to pull an arbitrary number of files, you probably should use a promise library like Q to stay sane.

Let's say you have an array containing your urls :

var urls = [
    "https://website.com/entry.csv?start=2015-11-30%2020:30:00&end=2015-12-01%2008:30:00",
    "https://website.com/entry.csv?start=2015-12-01%2020:30:00&end=2015-12-02%2008:30:00"
];

you can then build an array of promises representing those requests:

var promises = urls.map(function(url) {
    return Q.nfcall(d3.csv, url);  
});

and then combine them to produce the final data :

Q.all(promises).then(function(arrays) {
    // when all reuqests have resolved, combine the results
    var data = [].concat.apply([], arrays);
    return data;
}).then(function(data) {
    // build your chart here

    data.forEach(function (d) {
        d.date = (d.created_at);
        d.value = +d.field1;
    });

    x.domain((data).map(function (d) { return (d.date); }));                  
    y.domain([0, d3.max(data, function (d) { return d.value; })]);

    // and so on
});

Answer 2

You need to do this to merge your data

data.forEach(function (d) {
                d.date = (d.created_at);
                d.value = +d.field1;
            });
            d3.csv("https://website.com/entry.csv?start=2015-12-01%2020:30:00&end=2015-12-02%2008:30:00",
                function (error, data1) {                    
                    data1.forEach(function (d) {
                        d.date1 = (d.created_at);
                        d.value1 = +d.field1;                           
                    });
                    data.push(data1);//adding the data1 to data
                    //flatten the array since data array holds data1 array within it.
                    data = [].concat.apply([], data);
                    //continue with your processing 

Hope this helps!