mikehadlow/README.md

## README.md

      
    Raw
  

              README.md
            
          
    The results of playing with building graphs using D3js. This doesn't really predict your awesomeness over the next 100 days, it's entirely random, so if you don't like the results, just hit refresh to see if you get a better prediction :)

  
## index.html
<!DOCTYPE html>
<html xmlns:xlink="http://www.w3.org/1999/xlink">
    <head>
        <title>SVG Test</title>
    <style>

        body {
          font: 10px sans-serif;
        }

        .axis path,
        .axis line {
          fill: none;
          stroke: #000;
          shape-rendering: crispEdges;
        }

        .x.axis path {
          display: none;
        }

        .line {
          fill: none;
          stroke: steelblue;
          stroke-width: 2px;
        }

        .circle {
            fill: white;
            stroke: steelblue;
            stroke-width: 2px;
        }

        .area {
            fill: steelblue;
            stroke: none;
            opacity: 0.1;
        }

        .zeroline {
            fill: none;
            stroke: red;
            stroke-width: 0.5px;
            stroke-dasharray: 5 5;
        }

        .zerolinetext {
            fill: red;
        }

    </style>
    </head>
    <body>
    </body>
    <script src="http://d3js.org/d3.v3.min.js"></script>
    <script>

        // generate some awesomeness data

        var data = [];
        var currentValue = 100;
        var random = d3.random.normal(0, 20.0);

        for(var i=0; i<100; i++) {
            var currentDate = new Date();
            currentDate.setDate(currentDate.getDate() + i);

            data.push([currentDate, currentValue]);
            currentValue = currentValue + random();
        }

        // create the graph

        var containerHeight = 400, containerWidth = 800;

        var svg = d3.select("body").append("svg")
            .attr("width", containerWidth)
            .attr("height", containerHeight);

        var margin = { top: 50, left: 50, right: 50, bottom: 50 };

        var height = containerHeight - margin.top - margin.bottom;
        var width = containerWidth - margin.left - margin.right;

        var parseDate = d3.time.format("%Y-%m-%d").parse;

        var xDomain = d3.extent(data, function(d) { return d[0]; })
        var yDomain = d3.extent(data, function(d) { return d[1]; });

        var xScale = d3.time.scale().range([0, width]).domain(xDomain);
        var yScale = d3.scale.linear().range([height, 0]).domain(yDomain);

        var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
        var yAxis = d3.svg.axis().scale(yScale).orient('left');

        var line = d3.svg.line()
            .x(function(d) { return xScale(d[0]); })
            .y(function(d) { return yScale(d[1]); });

        var area = d3.svg.area()
            .x(function(d) { return xScale(d[0]); })
            .y0(function(d) { return yScale(d[1]); })
            .y1(height);

        var g = svg.append('g').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

        g.append('path')
            .datum(data)
            .attr('class', 'area')
            .attr('d', area);

        g.append('g')
            .attr('class', 'x axis')
            .attr('transform', 'translate(0, ' + height + ')')
            .call(xAxis);

        g.append('g')
            .attr('class', 'y axis')
            .call(yAxis)
            .append('text')
                .attr('transform', 'rotate(-90)')
                .attr('y', 6)
                .attr('dy', '.71em')
                .attr('text-anchor', 'end')
                .text('Awesomeness');

        g.append('path')
            .datum(data)
            .attr('class', 'line')
            .attr('d', line);

        g.selectAll('circle').data(data).enter().append('circle')
            .attr('cx', function(d) { return xScale(d[0]); })
            .attr('cy', function(d) { return yScale(d[1]); })
            .attr('r', 5)
            .attr('class', 'circle');

        if(yDomain[0] < 0) {
            g.append('line')
                .attr('x1', xScale(xDomain[0]))
                .attr('y1', yScale(0))
                .attr('x2', xScale(xDomain[1]))
                .attr('y2', yScale(0))
                .attr('class', 'zeroline');
            g.append('text')
                .attr('x', xScale(xDomain[1]))
                .attr('y', yScale(0))
                .attr('dy', '1em')
                .attr('text-anchor', 'end')
                .text('OMG Negative Awesomeness')
                .attr('class', 'zerolinetext');
        }

    </script>
</html>
	<!DOCTYPE html>
	<html xmlns:xlink="http://www.w3.org/1999/xlink">
	<head>
	<title>SVG Test</title>
	<style>

	body {
	font: 10px sans-serif;
	}

	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}

	.x.axis path {
	display: none;
	}

	.line {
	fill: none;
	stroke: steelblue;
	stroke-width: 2px;
	}

	.circle {
	fill: white;
	stroke: steelblue;
	stroke-width: 2px;
	}

	.area {
	fill: steelblue;
	stroke: none;
	opacity: 0.1;
	}

	.zeroline {
	fill: none;
	stroke: red;
	stroke-width: 0.5px;
	stroke-dasharray: 5 5;
	}

	.zerolinetext {
	fill: red;
	}

	</style>
	</head>
	<body>
	</body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script>

	// generate some awesomeness data

	var data = [];
	var currentValue = 100;
	var random = d3.random.normal(0, 20.0);

	for(var i=0; i<100; i++) {
	var currentDate = new Date();
	currentDate.setDate(currentDate.getDate() + i);

	data.push([currentDate, currentValue]);
	currentValue = currentValue + random();
	}

	// create the graph

	var containerHeight = 400, containerWidth = 800;

	var svg = d3.select("body").append("svg")
	.attr("width", containerWidth)
	.attr("height", containerHeight);

	var margin = { top: 50, left: 50, right: 50, bottom: 50 };

	var height = containerHeight - margin.top - margin.bottom;
	var width = containerWidth - margin.left - margin.right;

	var parseDate = d3.time.format("%Y-%m-%d").parse;

	var xDomain = d3.extent(data, function(d) { return d[0]; })
	var yDomain = d3.extent(data, function(d) { return d[1]; });

	var xScale = d3.time.scale().range([0, width]).domain(xDomain);
	var yScale = d3.scale.linear().range([height, 0]).domain(yDomain);

	var xAxis = d3.svg.axis().scale(xScale).orient('bottom');
	var yAxis = d3.svg.axis().scale(yScale).orient('left');

	var line = d3.svg.line()
	.x(function(d) { return xScale(d[0]); })
	.y(function(d) { return yScale(d[1]); });

	var area = d3.svg.area()
	.x(function(d) { return xScale(d[0]); })
	.y0(function(d) { return yScale(d[1]); })
	.y1(height);

	var g = svg.append('g').attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');

	g.append('path')
	.datum(data)
	.attr('class', 'area')
	.attr('d', area);

	g.append('g')
	.attr('class', 'x axis')
	.attr('transform', 'translate(0, ' + height + ')')
	.call(xAxis);

	g.append('g')
	.attr('class', 'y axis')
	.call(yAxis)
	.append('text')
	.attr('transform', 'rotate(-90)')
	.attr('y', 6)
	.attr('dy', '.71em')
	.attr('text-anchor', 'end')
	.text('Awesomeness');

	g.append('path')
	.datum(data)
	.attr('class', 'line')
	.attr('d', line);

	g.selectAll('circle').data(data).enter().append('circle')
	.attr('cx', function(d) { return xScale(d[0]); })
	.attr('cy', function(d) { return yScale(d[1]); })
	.attr('r', 5)
	.attr('class', 'circle');

	if(yDomain[0] < 0) {
	g.append('line')
	.attr('x1', xScale(xDomain[0]))
	.attr('y1', yScale(0))
	.attr('x2', xScale(xDomain[1]))
	.attr('y2', yScale(0))
	.attr('class', 'zeroline');
	g.append('text')
	.attr('x', xScale(xDomain[1]))
	.attr('y', yScale(0))
	.attr('dy', '1em')
	.attr('text-anchor', 'end')
	.text('OMG Negative Awesomeness')
	.attr('class', 'zerolinetext');
	}

	</script>
	</html>