<script type = "text/javascript">
                                        // Set the dimensions of the canvas / graph
                        var margin = {top: 30, right: 20, bottom: 30, left: 50},
                                width = 400 - margin.left - margin.right,
                                height = 400 - margin.top - margin.bottom;

                        // Parse the date / time
                        //var parseDate = d3.time.format("%d-%b-%y").parse;
        // Set the ranges
                        var x = d3.scale.linear()
                                                .domain([0,width])
                                                .range([0, width]);
                        var y = d3.scale.linear()
                                                .domain([height,0])
                                                .range([height, 0]);

                        // Define the axes
                        var xAxis = d3.svg.axis().scale(x)
                                .orient("bottom").ticks(0);

                        var yAxis = d3.svg.axis().scale(y)
                                .orient("left").ticks(0);

                        // Define the line
                        var valueline = d3.svg.line()
                                .x(function(d) { return x(d.x); })
                                .y(function(d) { return y(d.y); });

                        // Adds the svg canvas
                        var svg = d3.select("body")
                                .append("svg")
                                        .attr("width", width + margin.left + margin.right)
                                        .attr("height", height + margin.top + margin.bottom)
                                        .style("border", "1px solid black")
                                .append("g")
                                        .attr("transform",
                                                  "translate(" + margin.left + "," + margin.top + ")");


                        var path;
                        var circle;
                        var text;

                        // Get the initial data
                        d3.json("homewalkdatafromdb.php", function(error, data) {

                                console.log("Beginning database call");
                                data.forEach(function(d) {
                                        d.x = +d.x;
                                        d.y = +d.y;
           });

                                // Scale the range of the data
                                x.domain(d3.extent(data, function(d) { return d.x; }));
                                y.domain([0, d3.max(data, function(d) { return d.y; })]);

                                // Add the valueline path.
                                path =svg.append("path")
                                        .attr("class", "line")
                                        .attr("d", valueline(data))
                                        .transition()
                                        .duration(data.length*100)
                                        .attrTween("d", pathTween);
                        //      console.log(path);
                                        function pathTween() {
                                                var interpolate = d3.scale.quantile()
                                                        .domain([0,1])
                                                        .range(d3.range(1, data.length + 1));
                                                        //console.log(t);
                                                return function(t) {

                                                        return valueline(data.slice(0, interpolate(t)));
                                                };
                                        }

                                //add circle
                        circle = svg.append("circle")
                                .data(data.slice(0,1))
                                .attr("r", 7)
                                .style("fill","red");
                                //.attr("transform", "translate(" + data[0] + ")");

                        transition();

                                function transition() {
                                  circle.transition()
                                          .duration(data.length*100)
                                          .attrTween("transform", translateAlong(path.node()))
                                          .each("end", runNewData);

                                }

                                        function translateAlong(path) {
                                        //  var l = path.getTotalLength();
                                        //console.log("l = " + l + " data.length*100 = " + data.length*100);
                                        //console.log(pastDataRunning);
                                          return function(d, i, a) {
                                                return function(t) {
                                                  var p = path.getPointAtLength(t*data.length*100);
                                                  return "translate(" + p.x + "," + p.y + ")";
  };
                                          };
                                        }

                        text = svg.append("text")
                                .data(data)
                                .style("fill","red");
                        transition1();
                        function transition1(){
                                text.transition()
                                    .duration(data.length*100)
                                   .attrTween("transform",translateAlong1())
                                    .each("end", runNewData);
                        }
                        function translateAlong1(path){
                                return function(d,i,a){
                                        return function(t){
                                                var p1 = path.getPointAtLength(t*data.length*100);
                                                return "X is " +p1.x+ "Y is "+p1.y+;
                                        };
                                };
                        }



				//to complete the room
                                svg.append("g")
                                        .attr("class", "x axis")
                                        .attr("transform", "translate(0," + (height) + ")")
                                        .call(xAxis);

                                // to complete the room
                                         svg.append("g")
                                        .attr("class", "x axis")
                                        .attr("transform", "translate(0," + 0 + ")")
                                        .call(xAxis);

                                // Add the Y Axis
                                svg.append("g")
                                        .attr("class", "y axis")
                                        .call(yAxis);

                                // to complete room
                                svg.append("g")
                                        .attr("class", "y axis")
                                        .attr("transform", "translate("+ width +",0)")
                                        .call(yAxis);


        //      update(function(d){return "X: "+ d.x+", Y: "+d.y + ". Activity: "+d.z+". T: "+d.t+". V:"+d.v;});
                /*setInterval(function()
                                {
                                        update(function(d){return "X: "+ d.x+", Y: "+d.y + ". Z: "+d.z+". T: "+d.t+". V:"+d.v;});

                                },100);*/

                /*text = svg.append("text").data(data).transition().duration(1000)
                                                                .text(function(d){return "X position: "+ d.x+", Y position: "+d.y + ". Activity: "+d.z;})
                                                                .attr("font-family", "sans-serif")
                                                                .attr("x", 10)
                                                                .attr("y", height+20);*/


                        });