Compact Perf

forked from nivas8292's block: Degree Days

<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)
                });

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>

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