Time Plot - Line Graph with Line/Path Animation

forked from nivas8292's block: Time Plot - Line Graph with Line/Path Animation

<html>
    <head>
        <title>D3 Time Plot</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <link rel="stylesheet" href="main.css">
        <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>        
        
        <style>
            div.tooltip {
                position: absolute;
                /*                height: 25px;
                                width: 100px;*/
                padding: 10px;
                background: lightsteelblue;
                color: white;
                border: solid 1px #aaa;
                border-radius: 10px;
                opacity: 0;
            }
        </style>
    </head>
    <body>
        <div class="tooltip"></div>
        <br><button id="animate">Animate</button><br><br>
        <script>
            var N = 10;
            var w = 700;
            var h = 420;
            var margin = {
                top: 20,
                bottom: 60,
                left: 50,
                right: 20
            };
            var width = w - margin.left - margin.right;
            var height = h - margin.top - margin.bottom;
            var dataset = [
                {key: "Jelly", value: 60, date: "2014/01/01"},
                {key: "Jelly", value: 58, date: "2014/01/02"},
                {key: "Jelly", value: 59, date: "2014/01/03"},
                {key: "Jelly", value: 56, date: "2014/01/04"},
                {key: "Jelly", value: 57, date: "2014/01/05"},
                {key: "Jelly", value: 55, date: "2014/01/06"},
                {key: "Jelly", value: 56, date: "2014/01/07"},
                {key: "Jelly", value: 52, date: "2014/01/08"},
                {key: "Jelly", value: 54, date: "2014/01/09"},
                {key: "Jelly", value: 57, date: "2014/01/10"},
                {key: "Jelly", value: 56, date: "2014/01/11"},
                {key: "Jelly", value: 59, date: "2014/01/12"},
                {key: "Jelly", value: 56, date: "2014/01/13"},
                {key: "Jelly", value: 52, date: "2014/01/14"},
                {key: "Jelly", value: 48, date: "2014/01/15"},
                {key: "Jelly", value: 47, date: "2014/01/16"},
                {key: "Jelly", value: 48, date: "2014/01/17"},
                {key: "Jelly", value: 45, date: "2014/01/18"},
                {key: "Jelly", value: 43, date: "2014/01/19"},
                {key: "Jelly", value: 41, date: "2014/01/20"},
                {key: "Jelly", value: 37, date: "2014/01/21"},
                {key: "Jelly", value: 36, date: "2014/01/22"},
                {key: "Jelly", value: 39, date: "2014/01/23"},
                {key: "Jelly", value: 41, date: "2014/01/24"},
                {key: "Jelly", value: 42, date: "2014/01/25"},
                {key: "Jelly", value: 40, date: "2014/01/26"},
                {key: "Jelly", value: 43, date: "2014/01/27"},
                {key: "Jelly", value: 41, date: "2014/01/28"},
                {key: "Jelly", value: 39, date: "2014/01/29"},
                {key: "Jelly", value: 40, date: "2014/01/30"},
                {key: "Jelly", value: 39, date: "2014/01/31"}
            ];

var dateParser = d3.time.format("%Y/%m/%d").parse;
            var yScale = d3.scale.linear()
                    .domain([0, d3.max(dataset, function (d) {
                            return d.value
                        })])
                    .range([height, 0]);

var xScale = d3.time.scale()
                    .domain(d3.extent(dataset, function (d) {
                        return dateParser(d.date)
                    }))
                    .range([0, width]);

var xAxis = d3.svg.axis()
                    .scale(xScale)
                    .ticks(d3.time.days, 7)
                    .tickFormat(d3.time.format("%m/%d"))
                    .orient("bottom");

var yAxis = d3.svg.axis()
                    .scale(yScale)
                    .ticks(5)
                    .orient("left");

var line = d3.svg.line()
                    .x(function (d) {
                        return xScale(dateParser(d.date));
                    })
                    .y(function (d) {
                        return yScale(d.value);
                    })
                    .interpolate("monotone");

var area = d3.svg.area()
                    .x(function (d) {
                        return xScale(dateParser(d.date))
                    })
                    .y0(height)
                    .y1(function (d) {
                        return yScale(d.value);
                    })
                    .interpolate("monotone");

var chart = d3.select("body")
                    .append("svg")
                    .attr("id", "chart")
                    .attr("height", h)
                    .attr("width", w)
                    .append("g")
                    .attr("transform", "translate(" + margin.left + "," + margin.top + ")");

function plot(params) {
                this.append("g")
                        .classed("x axis", true)
                        .attr("transform", "translate(0," + height + ")")
                        .call(params.axis.x);

this.append("g")
                        .classed("y axis", true)
                        .call(params.axis.y);
                //Enter
                this.selectAll('.area')
                        .data([params.data])
                        .enter()
                        .append("path")
                        .classed("area", true);

this.selectAll('.trendline')
                        .data([params.data])
                        .enter()
                        .append("path")
                        .classed("trendline", true);

this.selectAll('.point')
                        .data(params.data)
                        .enter()
                        .append("circle")
                        .attr("r", "2")
                        .classed("point", true);

//Update
                this.selectAll(".area")
                        .attr("d", function (d) {
                            return area(d);
                        });

this.selectAll(".trendline")
                        .attr("d", function (d) {
                            return line(d);
                        });

this.selectAll('.point')
                        .attr("cx", function (d, i) {
                            return xScale(dateParser(d.date));
                        })
                        .attr("cy", function (d, i) {
                            return yScale(d.value);
                        })
                        .on('mouseover', function (d) {
                            params.tooltip
                                    .style("left", d3.event.x)
                                    .style("top", d3.event.y)
                                    .transition()
                                    .duration(500)
                                    .style("opacity", 1)
                                    .text(d.date + " , " + d.value);
                        })
                        .on('mouseout', function () {
                            params.tooltip
                                    .transition()
                                    .duration(500)
                                    .style("opacity", 0);
                        });
                //Exit
                this.selectAll('.area')
                        .data(params.data)
                        .exit()
                        .remove();

this.selectAll('.trendline')
                        .data([params.data])
                        .exit()
                        .remove();

this.selectAll('.point')
                        .data(params.data)
                        .exit()
                        .remove();
            }

plot.call(chart, {
                data: dataset,
                axis: {x: xAxis, y: yAxis},
                tooltip: d3.select(".tooltip")
            });

d3.select('#animate').on('click', function () {
                var self = this;
                chart.selectAll('.trendline')
                        .style("stroke-dashoffset", w + 100)
                        .style("stroke-dasharray", w + 100)
                        .transition()
                        .duration(5000)
                        .each("start", function () {
                            d3.select(self).attr("disabled", "disabled")
                        })
                        .each("end", function () {
                            d3.select(self).attr("disabled", null)
                        })
                        .style("stroke-dashoffset", 0);
            });
        </script>
    </body>
</html>

Modified http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js to a secure url

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js