D3 Examples - Compact Perf

xxxxxxxxxx
 
<html>
    <head>
        <title>Perf</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
        <script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
        <style>
            svg {
                            font: 11px "Helvetica Neue", Helvetica, Arial, sans-serif;
                        }
          
            .line {
                fill: none;
                stroke: #154579;
                stroke-width: 3px;
                shape-rendering: optimizeSpeed;
                stroke-linejoin: round;
            }
            .below {
                fill:deepskyblue;
                fill-opacity: 0.3;
            }
            .above {
                fill:coral;
                fill-opacity: 0.3;
            }
            .axis path,
            .axis line {
                fill: none;
                stroke: #aaa;
                shape-rendering: crispEdges;
            }
​
            .axis text {
                fill: #aaa;
            }
​
            .x.axis text {
                font-family: sans-serif;
                font-size: 11px;
                fill: #aaa;
            }
​
            .x.axis path { 
                fill: skyblue;
            }
        </style>
    </head>
    <body>
    </body>
    <script type="text/javascript">
        var w = 750,
            h = 300;
​
        var margin = {top: 20, right: 20, left: 20, bottom: 20};
​
        var width = w - margin.left - margin.right;
        var height = h - margin.top - margin.bottom;
​
        var svg = d3.select('body')
                .append('svg')
                .attr("height", h)
                .attr("width", w)
                .append("g")
                .attr("transform", "translate(" + margin.left + "," + margin.top + ")");
​
        var timeFormat = d3.time.format("%m-%d").parse;
​
        var yScale = d3.scale.linear()
                .range([height, 0]);
​
        var xScale = d3.time.scale()
                .range([0, width]);
​
        var xAxis = d3.svg.axis()
                .scale(xScale)
                .orient("bottom")
                .tickValues(d3.time.month.range(
                        new Date("1900 02"),
                        new Date("1901 01")),
                        1);
        var yAxis = d3.svg.axis()
                .scale(yScale)
                .orient("left");
​
        var line = d3.svg.line()
                .x(function (d) {
                    return xScale(d.date)
                })
                .y(function (d) {
                    return yScale(d.value)
                });
​
        var area = d3.svg.area()
                .x(function (d) {
                    return xScale(d.date);
                })
                .y1(function (d) {
                    return yScale(d.value)
                })
//                .y0(function (d) {
//                    return yScale(0)
////                    return height; //Clip Above
////                    return 0;   //Clip Below
//                });
​
        function drawAxis(params) {
            this.append("g")
                    .classed("x axis", true)
                    .attr("transform", "translate(0, " + params.scale.y(0) + ")")
                    .style("stroke", "white")
                    .call(params.axis.x);
​
            this.append("g")
                    .classed("x axis", true)
                    .attr("transform", "translate(0, " + params.scale.y(0) + ")")
                    .call(params.axis.x);
​
            this.append("g")
                    .classed("y axis", true)
                    .style("stroke", "white")
                    .call(params.axis.y)
                    .append('text')
                    .text("Degree Day (ºC)")
                    .attr("transform", "rotate(90)")
                    .attr("transform", "translate(7, " + height + ") rotate(90)")
                    .attr("text-anchor", "end");
​
            this.append("g")
                    .classed("y axis", true)
                    .call(params.axis.y)
                    .append('text')
                    .text("Degree Day (ºC)")
                    .attr("transform", "rotate(90)")
                    .attr("transform", "translate(7, " + height + ") rotate(90)")
                    .attr("text-anchor", "end");
        }
​
        function drawLegend() {
            var g = this.append("g")
                    .attr("transform", "translate(" + ((width / 2)) + "," + (margin.top) + ")");
​
            var g = this.append("g")
                    .attr("transform", "translate(" + ((width / 4) - 100) + "," + (height - margin.bottom) + ")");
​
​
            var g = this.append("g")
                    .attr("transform", "translate(" + ((3 * width / 4) - 100) + "," + (height - margin.bottom) + ")");
        }
​
        d3.csv("data.csv", function (error, data) {
            gdata = data;
            data.forEach(function (d) {
                d.date = timeFormat(d.date);
                d.value = +d.value - 18;
            });
            xScale.domain(d3.extent(data, function (d) {
                return d.date
            }));
            yScale.domain(d3.extent(data, function (d) {
                return d.value
            }));
​
            svg.datum(data);
​
            svg.append('clipPath')
                    .attr('id', 'clip-above')
                    .append('path')
                    .attr('d', area.y0(height));
​
            svg.append('clipPath')
                    .attr('id', 'clip-below')
                    .append('path')
                    .attr('d', area.y0(0));
​
            svg.append('path')
                    .classed('line', true)
                    .attr('d', line);
​
            svg.append('path')
                    .classed('area above', true)
                    .attr('clip-path', 'url(#clip-above)')
                    .attr('d', area.y0(yScale(0)));
​
            svg.append('path')
                    .classed('area below', true)
                    .attr('clip-path', 'url(#clip-below)')
                    .attr('d', area.y0(yScale(0)));
​
            drawAxis.call(svg, {
                scale: {
                    x: xScale,
                    y: yScale
                },
                axis: {
                    x: xAxis,
                    y: yAxis
                },
            });
​
            drawLegend.call(svg);
        });
​
    </script>
</html>
​
    