D3.js - Transitions on a Streamgraph using CSV data

Question

This question is based of Bostocks Steamgraph transition example, where uses a random generator as a data source.

Another user VividD edited Bostocks example here to use a CSV as the datasource, except it doesn't have a transition.

Here I'm simply trying to transition between two similar CSV datasets (based off VividDs example) but I'm geting this error within the transition() function:

Error: Problem parsing d=""

Here is the main file

    <!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">         
<title></title>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.10.4/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link type="text/css" href="http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" rel="stylesheet">

<style>
    body {
        font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
        margin: 0;
        position: relative;
        width: 100px;
        background-color:#FFFFFF; 
        /*<!--#053749;-->*/
    }

    button {
        position: absolute;
        right: 10px;
        top: 10px;
    }
    svg{
        margin-top: 50px;
    }

</style>

<body>
    <div id="layerTitle"></div>
    <button onclick="transition()">Update</button>
    <script type="text/javascript">

        var format = d3.time.format("%m/%d/%Y");
        var dataset1, dataset2, layers0, layers1, area;
        d3.csv("data/streamdata.csv", function(error, data) {
            data.forEach(function(d) {
                d.date = format.parse(d.date);
                d.y = parseInt(d.num_visitors) + 1;
                d.x = parseInt(d.index);
            });
            dataset1 = data;
            // window.data = data;
            generateViz();
              $("path").tooltip({
                'container': 'body',
                'placement': 'bottom'
            });
        });
        d3.csv("data/streamdata2.csv", function(error, data) {
            data.forEach(function(d) {
                d.date = format.parse(d.date);
                d.y = parseInt(d.num_visitors) + 1;
                d.x = parseInt(d.index);
            });
            dataset2 = data;
            //window.data = data;

            $("path").tooltip({
                'container': 'body',
                'placement': 'bottom'
            });
        });

        function generateViz() {
            var nest = d3.nest()
                    .key(function(d) {
                        return d.venue;
                    });

            // var n = window.data.length;

            // number of layers, online, guestbook & museum
            var stack = d3.layout.stack().offset("wiggle")
                    .values(function(d, i) {
                        return d.values;

                    });
            //group data by venue
            layers0 = stack(nest.entries(dataset1));
            layers1 = stack(nest.entries(dataset2));

            var m = layers0[0].values.length; // number of samples per layer

            var allValues = layers0[0].values.concat(layers0[1].values).concat(layers0[2].values);
            var allValues2 = layers1[0].values.concat(layers1[1].values).concat(layers1[2].values);
            var allValues3 = allValues.concat(allValues2);
            //            console.log(m);

            var yDomain = d3.max(allValues3, function(d) {
                return d.y0 + d.y;
            });

            var width = 600, height = 200;

            var x = d3.scale.linear()
                    .domain([0, m - 1])
                    .range([0, width]);

            var y = d3.scale.linear()
                    .domain([1, yDomain])
                    .range([height, 0]);

            var color = d3.scale.linear()
                    .range(["#053749", "#6bb9d6"]);

            area = d3.svg.area()
                    .x(function(d) {
                        return x(d.x);
                    })
                    .y0(function(d) {
                        return y(d.y0);
                    })
                    .y1(function(d) {
                        return y(d.y0 + d.y);
                    })
                    .interpolate("cardinal")
                    .tension(0.6);

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

            svg.selectAll("path")
                    .data(layers0)
                    .enter().append("path")
                    .attr("d", function(d) {
                        return area(d.values);
                    })
                    .attr("id", function(d) {
                        return d.key;
                    })
                    .attr("title", function(d) {
                        return "visitors from " + d.key;
                    })
                    .style("fill", function() {
                        return color(Math.random());
                    });

        }

        function transition() {
            d3.selectAll("path")
                    .data(function() {
                        var d = layers1;
                        layers1 = layers0;
                        return layers0 = d;
                    })
                    .transition()
                    .duration(3500)
                    .attr("d", area);
        }

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

Heres is first CSV: streamdata.csv

index   date    venue   num_visitors
0   04/08/2013  online  1721
0   04/08/2013  museum  826
0   04/08/2013  guestbook   333
1   04/09/2013  online  1377
1   04/09/2013  museum  840
1   04/09/2013  guestbook   61
2   04/10/2013  online  1849
2   04/10/2013  museum  539
2   04/10/2013  guestbook   191
3   04/11/2013  online  1205
3   04/11/2013  museum  810
3   04/11/2013  guestbook   65
4   04/12/2013  online  1960
4   04/12/2013  museum  957
4   04/12/2013  guestbook   221
5   4/13/2013   online  1215
5   4/13/2013   museum  658
5   4/13/2013   guestbook   384
6   4/14/2013   online  1565
6   4/14/2013   museum  621
6   4/14/2013   guestbook   94
7   4/15/2013   online  1678
7   4/15/2013   museum  710
7   4/15/2013   guestbook   35
8   4/16/2013   online  1267
8   4/16/2013   museum  964
8   4/16/2013   guestbook   8
9   4/17/2013   online  1781
9   4/17/2013   museum  896
9   4/17/2013   guestbook   238
10  4/18/2013   online  1185
10  4/18/2013   museum  712
10  4/18/2013   guestbook   318
11  4/19/2013   online  1097
11  4/19/2013   museum  753
11  4/19/2013   guestbook   132
12  4/20/2013   online  1053
12  4/20/2013   museum  927
12  4/20/2013   guestbook   399
13  4/21/2013   online  1738
13  4/21/2013   museum  653
13  4/21/2013   guestbook   78
14  4/22/2013   online  1491
14  4/22/2013   museum  568
14  4/22/2013   guestbook   72
15  4/23/2013   online  1403
15  4/23/2013   museum  997
15  4/23/2013   guestbook   184
16  4/24/2013   online  1335
16  4/24/2013   museum  987
16  4/24/2013   guestbook   26
17  4/25/2013   online  1964
17  4/25/2013   museum  753
17  4/25/2013   guestbook   239
18  4/26/2013   online  1260
18  4/26/2013   museum  815
18  4/26/2013   guestbook   249
19  4/27/2013   online  1404
19  4/27/2013   museum  817
19  4/27/2013   guestbook   360
20  4/28/2013   online  1790
20  4/28/2013   museum  840
20  4/28/2013   guestbook   163
21  4/29/2013   online  1698
21  4/29/2013   museum  700
21  4/29/2013   guestbook   129
22  4/30/2013   online  1479
22  4/30/2013   museum  921
22  4/30/2013   guestbook   347
23  05/01/2013  online  1093
23  05/01/2013  museum  720
23  05/01/2013  guestbook   278
24  05/02/2013  online  1148
24  05/02/2013  museum  655
24  05/02/2013  guestbook   162
25  05/03/2013  online  1521
25  05/03/2013  museum  806
25  05/03/2013  guestbook   267
26  05/04/2013  online  1365
26  05/04/2013  museum  662
26  05/04/2013  guestbook   232
27  05/05/2013  online  1809
27  05/05/2013  museum  659
27  05/05/2013  guestbook   398
28  05/06/2013  online  1078
28  05/06/2013  museum  999
28  05/06/2013  guestbook   51
29  05/07/2013  online  1477
29  05/07/2013  museum  512
29  05/07/2013  guestbook   385

An here is the second csv streamdata2.csv:

    index   date    venue   num_visitors
0   04/08/2013  online  2721
0   04/08/2013  museum  626
0   04/08/2013  guestbook   533
1   04/09/2013  online  1977
1   04/09/2013  museum  740
1   04/09/2013  guestbook   41
2   04/10/2013  online  1149
2   04/10/2013  museum  239
2   04/10/2013  guestbook   291
3   04/11/2013  online  1905
3   04/11/2013  museum  510
3   04/11/2013  guestbook   25
4   04/12/2013  online  1260
4   04/12/2013  museum  757
4   04/12/2013  guestbook   121
5   4/13/2013   online  1915
5   4/13/2013   museum  458
5   4/13/2013   guestbook   284
6   4/14/2013   online  1965
6   4/14/2013   museum  421
6   4/14/2013   guestbook   34
7   4/15/2013   online  1278
7   4/15/2013   museum  310
7   4/15/2013   guestbook   55
8   4/16/2013   online  1967
8   4/16/2013   museum  264
8   4/16/2013   guestbook   10
9   4/17/2013   online  1281
9   4/17/2013   museum  496
9   4/17/2013   guestbook   138
10  4/18/2013   online  1585
10  4/18/2013   museum  412
10  4/18/2013   guestbook   218
11  4/19/2013   online  1497
11  4/19/2013   museum  453
11  4/19/2013   guestbook   232
12  4/20/2013   online  1453
12  4/20/2013   museum  427
12  4/20/2013   guestbook   299
13  4/21/2013   online  1238
13  4/21/2013   museum  453
13  4/21/2013   guestbook   88
14  4/22/2013   online  1891
14  4/22/2013   museum  468
14  4/22/2013   guestbook   42
15  4/23/2013   online  1203
15  4/23/2013   museum  907
15  4/23/2013   guestbook   104
16  4/24/2013   online  1035
16  4/24/2013   museum  907
16  4/24/2013   guestbook   6
17  4/25/2013   online  1064
17  4/25/2013   museum  453
17  4/25/2013   guestbook   209
18  4/26/2013   online  1060
18  4/26/2013   museum  315
18  4/26/2013   guestbook   149
19  4/27/2013   online  1004
19  4/27/2013   museum  517
19  4/27/2013   guestbook   160
20  4/28/2013   online  1090
20  4/28/2013   museum  240
20  4/28/2013   guestbook   103
21  4/29/2013   online  1098
21  4/29/2013   museum  400
21  4/29/2013   guestbook   109
22  4/30/2013   online  1079
22  4/30/2013   museum  221
22  4/30/2013   guestbook   147
23  05/01/2013  online  1893
23  05/01/2013  museum  520
23  05/01/2013  guestbook   178
24  05/02/2013  online  1548
24  05/02/2013  museum  855
24  05/02/2013  guestbook   262
25  05/03/2013  online  1021
25  05/03/2013  museum  406
25  05/03/2013  guestbook   167
26  05/04/2013  online  1065
26  05/04/2013  museum  462
26  05/04/2013  guestbook   132
27  05/05/2013  online  1009
27  05/05/2013  museum  259
27  05/05/2013  guestbook   198
28  05/06/2013  online  1978
28  05/06/2013  museum  499
28  05/06/2013  guestbook   41
29  05/07/2013  online  1077
29  05/07/2013  museum  212
29  05/07/2013  guestbook   285

Any suggestions would be great, Thankyou.

Its a CSV. I pasted it from Excel which must of removed the commas. — user1744863, Feb 22 '14 at 19:22

score 0 · Answer 1 · answered Feb 23 '14 at 17:29

Your generateViz() method is being called as soon as your first data file has been read in. However, within that method you are doing the data manipulation for both data sets. But since the second dataset is still undefined at the time that code is run, your layer-stack calculations are also returning undefined or empty values, causing the error when you later try to use them.

You have two options on how to proceed:

Option 1, wait until both files are available before running your visualization code. Declare a boolean variable to indicate that you're ready, initially false. Within each d3.csv() callback function, check if ready is true, and if so call the visualization code, if not, set ready=true so that the other callback function will know that it is safe to proceed. At the end of the generateViz() function you can then safely enable your transition button.

Option 2, separate out all the graphing code that depends on the second dataset into that file's callback function. You'll need to re-calculate the maximum value and possibly adjust your y-scale accordingly. You should still keep track of whether both code blocks have successfully run so that your transition() function doesn't run before everything is ready.

For small data sets like this, Option 1 is probably easiest. Option 2 would be preferred if you expected the second data set to take a long time to download.

Roman · Answer 2 · 2014-06-10T20:32:09.833

0

Firstly, your generateViz() function's closing bracket { should be after transition(), otherwise it does not know what data is.

Secondly, Open your CSV file with a text editor, and check what delimiter is being used. It should be a comma.

If you used LibreOffice to edit the CSV and saved it, chances are that the delimiter was automatically changed to a semicolon.

edited Jun 10 '14 at 20:32

answered Jun 10 '14 at 20:24

Roman

8,826
10
63
103

D3.js - Transitions on a Streamgraph using CSV data

2 Answers2

Linked