Using data from Socket.io for data visualisation with d3

Question

I wonder how I can use the data from a database received via Socket.io from a Node.js server for a data visualisation with d3. I´ve read some posts about using PHP and JSON for that. Do I really need JSON? And how can I do this without the need of PHP? Actually the data received from Socket.io is already stored in the array values_array . But this array is not accepted by d3. So far I tried a getter function and tried to rewrite the array – without success. Any advice would be appreciated. Below you see the client-side HTML-code:

!doctype html>
<html>
    <head>

        <script src='//code.jquery.com/jquery-1.7.2.min.js'></script>
        <script src='//localhost:3000/socket.io/socket.io.js'></script>
        <script type="text/javascript" src="d3.v3.min.js"></script>
        <script>

            window.onload=function(){

            var socket = io();
            var values_array = new Array();


            socket.on('server2browser', function(data)      //  receive
            {
                fkt_values_array(data);   
            });



            function fkt_values_array(data)
            {
                 $.each(data, function(i, obj) 
                 {
                     values_array[i] = obj.numbers;     
                 });

                 $('#arrayprint_values').text(values_array); 
            }


            setTimeout(function() 
            {
                dynamicData = values_array;
            }, Math.random() * 1000);


            dynamicData = [22,33,33];       // This works
            // dynamicData = values_array;  // But I can´t get data from Socket.io into d3






            // Data visualisation (d3)

            var dataset = dynamicData;

            //Width and height
            var w = 500;
            var h = 200;
            var barPadding = 1;

            var svg = d3.select("#diagram")
                .append("svg")
                .attr("width", w)
                .attr("height", h);

            svg.selectAll("rect")
                .data(dataset)
                .enter()
                .append("rect")
                .attr("y", function(d) {
                    return h - (d * 4);  //Höher
                })
                .attr("width", w / dataset.length - barPadding)
                .attr("height", function(d) {
                    return d * 4;
                })
                .attr("x", function(d, i) {
                    return i * (w / dataset.length);
                })
                .attr("fill", function(d) {
                    return "rgb(" + (d * 10) + ", 0, " + (d * 10) + ")";
                });


            svg.selectAll("text")
                .data(dataset)
                .enter()
                .append("text")
                .text(function(d) {
                    return d;
                })
                .attr("x", function(d, i) {
                    return i * (w / dataset.length) + (w / dataset.length - barPadding) / 2;
                })
                .attr("y", function(d) {
                    return h - (d * 4) + 14;  //15 is now 14
                })
                .attr("font-family", "sans-serif")
                .attr("font-size", "11px")
                .attr("fill", "white")
                .attr("text-anchor", "middle");
            }
        </script>
    </head>
    <body>
        <div id='arrayprint_values'> Placeholder Text</div>   // Here the array is successfully printed out
        <div id="diagram"> Placeholder </div>                 // Here the diagram is displayed, but only with static data            
    </body>
</html>

Answer 1

Well, everything in JavaScript is JSON so it just kind of makes sense to use it.

And you don't need PHP. You seem to already have a Node server up, just use that :). However, your valuesArray is instantiated to an empty list and then reassigned a bunch of times to other objects. You may want to change that to increase code clarity. A possible error source is that D3 expects an array of numbers, but your function is getting strings or JSON. That is, either ["1", "2"] or [{number : 1}, {number : 2}] as opposed to [1,2] . Place console.log(obj.numbers) in fkt_values_array and see what it looks like

Using data from Socket.io for data visualisation with d3

Question

1 answers

solution1
0 ACCPTED 2014-11-17 03:39:53

Using data from Socket.io for data visualisation with d3

Question

1 answers

solution1 0 ACCPTED 2014-11-17 03:39:53

solution1
0 ACCPTED 2014-11-17 03:39:53