qmx/index.html

## index.html
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <style type="text/css">
            svg {
                font: 10px sans-serif;
            }
            path {
                fill: steelblue;
            }
            .axis path,
            .axis line {
                fill: none;
                stroke: #000;
                shape-rendering: crispEdges;
            }
            .mean path {
                fill: none;
                stroke: red;
            }
        </style>
    </head>
    <body>
        <script src="http://d3js.org/d3.v3.min.js"></script>
        <script type="text/javascript">
            var data = [
                {day: 0, minutes:   0},
                {day: 1, minutes:  30},
                {day: 2, minutes:   0},
                {day: 3, minutes:   0},
                {day: 4, minutes:   0},
                {day: 5, minutes:   0},
                {day: 6, minutes: 240},
                {day: 7, minutes:   0}
            ];
            var weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
            var margin = 30,
            width = 400 - (margin * 2),
            height = 300 - (margin * 2);

            var x = d3.scale.linear()
            .domain([0, data.length])
            .range([0, width]),
            y = d3.scale.linear()
            .domain([0, d3.max(data, function(datum) {
                return datum.minutes;
            })])
            .rangeRound([height, 0]),
            xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function (tick) {
                return weekdays[tick % 7];
            }),
            yAxis = d3.svg.axis().scale(y).orient("left");

            var area = d3.svg.area()
            .interpolate("monotone")
            .x(function (d) {
                return x(d.day);
            })
            .y0(height)
            .y1(function (d) {
                return y(d.minutes);
            });

            var line = d3.svg.line()
            .x(function (d) {
                return x(d.day);
            })
            .y(function (d) {
                return y(d.minutes);
            });

            var svg = d3.select("body")
            .append("svg")
            .attr("width", width + margin *2)
            .attr("height", height + margin * 2);

            var focus = svg.append("g")
            .attr("transform", "translate(" + margin + "," + margin + ")");

            focus.append("path")
            .datum(data)
            .attr("d", area);

            var mean = svg.append("g")
            .attr("class", "mean")
            .attr("transform", "translate(" + margin + "," + margin + ")");

            var meanValue = d3.mean(data, function (d) {
                return d.minutes;
            });
            mean.append("path")
            .datum(data.map(function (d) {
                return {day:d.day, minutes:meanValue};
            }))
            .attr("d", line);

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

            focus.append("g")
            .attr("class", "y axis")
            .call(yAxis);

        </script>
    </body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8" />
	<style type="text/css">
	svg {
	font: 10px sans-serif;
	}
	path {
	fill: steelblue;
	}
	.axis path,
	.axis line {
	fill: none;
	stroke: #000;
	shape-rendering: crispEdges;
	}
	.mean path {
	fill: none;
	stroke: red;
	}
	</style>
	</head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script type="text/javascript">
	var data = [
	{day: 0, minutes: 0},
	{day: 1, minutes: 30},
	{day: 2, minutes: 0},
	{day: 3, minutes: 0},
	{day: 4, minutes: 0},
	{day: 5, minutes: 0},
	{day: 6, minutes: 240},
	{day: 7, minutes: 0}
	];
	var weekdays = ['Sun', 'Mon', 'Tue', 'Wed', 'Thu', 'Fri', 'Sat'];
	var margin = 30,
	width = 400 - (margin * 2),
	height = 300 - (margin * 2);

	var x = d3.scale.linear()
	.domain([0, data.length])
	.range([0, width]),
	y = d3.scale.linear()
	.domain([0, d3.max(data, function(datum) {
	return datum.minutes;
	})])
	.rangeRound([height, 0]),
	xAxis = d3.svg.axis().scale(x).orient("bottom").tickFormat(function (tick) {
	return weekdays[tick % 7];
	}),
	yAxis = d3.svg.axis().scale(y).orient("left");

	var area = d3.svg.area()
	.interpolate("monotone")
	.x(function (d) {
	return x(d.day);
	})
	.y0(height)
	.y1(function (d) {
	return y(d.minutes);
	});

	var line = d3.svg.line()
	.x(function (d) {
	return x(d.day);
	})
	.y(function (d) {
	return y(d.minutes);
	});

	var svg = d3.select("body")
	.append("svg")
	.attr("width", width + margin *2)
	.attr("height", height + margin * 2);

	var focus = svg.append("g")
	.attr("transform", "translate(" + margin + "," + margin + ")");

	focus.append("path")
	.datum(data)
	.attr("d", area);

	var mean = svg.append("g")
	.attr("class", "mean")
	.attr("transform", "translate(" + margin + "," + margin + ")");

	var meanValue = d3.mean(data, function (d) {
	return d.minutes;
	});
	mean.append("path")
	.datum(data.map(function (d) {
	return {day:d.day, minutes:meanValue};
	}))
	.attr("d", line);

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

	focus.append("g")
	.attr("class", "y axis")
	.call(yAxis);

	</script>
	</body>
	</html>