oliverlundquist/gist:f03661033b7327eeb3df

## gistfile1.txt
<!DOCTYPE html>
<html>
<head>
	<meta charset="utf-8">
	<title>Graph 1</title>
	<style>
		body {
			background-color:#eee;
			text-align:center;
		}
		svg {
			background-color:#fff;
		}
		#graph1 {
			display:inline-block;
		}
		/*.axis {
			font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
			font-size:8px;
			font-size:0.8rem;
			fill:#aaa;
		}
		.axis line {
			stroke: #333333;
			stroke-width: 0;
			fill: none;
		}*/
		.grid .tick {
			stroke: lightgrey;
			opacity: 0.7;
		}
		/*.grid path {
			stroke-width: 0;
		}*/

	</style>
</head>
<body>
	<div id="container">
		<!-- -->
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script>
		(function () {
			var data = {
				product_sales: [
					{ date: '2015-10-15', sales: 32000 },
					{ date: '2015-10-16', sales: 24000 },
					{ date: '2015-10-17', sales: 28000 },
					{ date: '2015-10-18', sales: 15000 },
					{ date: '2015-10-19', sales: 29000 },
					{ date: '2015-10-20', sales: 39000 },
					{ date: '2015-10-21', sales: 28000 },
				],
				schema: null,
				meta: { offset: 0, limit: 100, sort: "order_count", direction: "desc", total: 905 }
			}
			var graphData = data.product_sales;
			var dates = ['2015-10-15', '2015-10-16', '2015-10-17', '2015-10-18', '2015-10-19', '2015-10-20', '2015-10-21'];
			var graphId = 'graph';
			var chartId = 'chart';

			// set variables
			var padding     = {};
			var bounds      = {};
			var coordinates = {};

			padding = {
				left:   100,
				right:  100,
				top:    100,
				bottom: 100
			};

			bounds.full = {
				left:   0,
				right:  800,
				top:    0,
				bottom: 600
			};

			bounds.chart = {
				left:   bounds.full.left   + padding.left,
				right:  bounds.full.right  - padding.right,
				top:    bounds.full.top    + padding.top,
				bottom: bounds.full.bottom - padding.bottom
			};

			coordinates.xAxis = {
				x: 0,
				y: bounds.full.bottom - (padding.bottom * 0.8)
			}

			coordinates.yAxis = {
				x: padding.left - (padding.left * 0.2),
				y: 0
			}

			var scaleX = d3.scale.ordinal().domain(dates).rangeRoundBands([bounds.chart.left, bounds.chart.right], 0.2);
			var scaleY = d3.scale.linear().domain([0, d3.max(graphData, function (d) { return d.sales })]).range([bounds.chart.bottom, bounds.chart.top]);
			var dateFormat = d3.time.format('%m/%d');
			var div = d3.select("body")
				.append("div")
				.attr("class", "tooltip");

			d3.select("#container")
				.append("svg")
				.attr("id", graphId)
				.attr("width", bounds.full.right)
				.attr("height", bounds.full.bottom);

				var xGrid = d3.svg.axis()
					.scale(scaleX)
					.tickFormat("")
					.tickSize(bounds.chart.bottom - bounds.chart.top, 0)
					.orient("bottom");

				var yGrid = d3.svg.axis()
					.scale(scaleY)
					.tickFormat("")
					.tickSize(bounds.chart.right - bounds.chart.left, 0)
					.orient("left");

				var xAxis = d3.svg.axis()
					.scale(scaleX)
					.tickFormat(function (d) { return dateFormat(new Date(Date.parse(d))); })
					.tickSize(10, 2)
					.orient("bottom");

				var yAxis = d3.svg.axis()
					.scale(scaleY)
					.tickSize(10, 2)
					.orient("left");

				d3.select('#' + graphId)
					.append("g")
					.attr("class", "grid")
					.attr("transform", "translate(" + coordinates.xAxis.x + ", " + bounds.chart.top + ")")
					.call(xGrid);

				d3.select('#' + graphId)
					.append("g")
					.attr("class", "grid")
					.attr("transform", "translate(" + bounds.chart.right + ", " + coordinates.yAxis.y + ")")
					.call(yGrid);

				d3.select('#' + graphId)
					.append("g")
					.attr("id", chartId);

				d3.select('#' + chartId).selectAll('.pixies')
					.data(graphData)
					.enter()
					.append("rect")
					.attr("x", function (d) { return scaleX(d.date); })
					.attr("y", function (d) { return bounds.chart.bottom - scaleY(d.sales); })
					.attr("width", scaleX.rangeBand())
					.attr("height", function (d) { return scaleY(d.sales); })
					.attr("class", "pixies")
					.attr("fill", "black")
					.on("mouseover", function(d) {
						d3.select(this).attr('fill', 'steelblue');
						div.html(JSON.stringify(d));
					})
					.on("mouseout", function(d) {
						d3.select(this).attr('fill', 'black');
						div.html('');
					});

				d3.select('#' + graphId)
					.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(" + coordinates.xAxis.x + ", " + coordinates.xAxis.y + ")")
					.call(xAxis);

				d3.select('#' + graphId)
					.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + coordinates.yAxis.x + ", " + coordinates.yAxis.y + ")")
					.call(yAxis);

				d3.select('#' + graphId)
					.selectAll(".tick")
					.filter(function (d) { return d === 0;  })
					.remove();


		})();
	</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<title>Graph 1</title>
	<style>
	body {
	background-color:#eee;
	text-align:center;
	}
	svg {
	background-color:#fff;
	}
	#graph1 {
	display:inline-block;
	}
	/*.axis {
	font-family: Verdana, "ヒラギノ角ゴ ProN W3", "Hiragino Kaku Gothic ProN", "メイリオ", Meiryo, sans-serif;
	font-size:8px;
	font-size:0.8rem;
	fill:#aaa;
	}
	.axis line {
	stroke: #333333;
	stroke-width: 0;
	fill: none;
	}*/
	.grid .tick {
	stroke: lightgrey;
	opacity: 0.7;
	}
	/*.grid path {
	stroke-width: 0;
	}*/

	</style>
	</head>
	<body>
	<div id="container">
	<!-- -->
	</div>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script>
	<script>
	(function () {
	var data = {
	product_sales: [
	{ date: '2015-10-15', sales: 32000 },
	{ date: '2015-10-16', sales: 24000 },
	{ date: '2015-10-17', sales: 28000 },
	{ date: '2015-10-18', sales: 15000 },
	{ date: '2015-10-19', sales: 29000 },
	{ date: '2015-10-20', sales: 39000 },
	{ date: '2015-10-21', sales: 28000 },
	],
	schema: null,
	meta: { offset: 0, limit: 100, sort: "order_count", direction: "desc", total: 905 }
	}
	var graphData = data.product_sales;
	var dates = ['2015-10-15', '2015-10-16', '2015-10-17', '2015-10-18', '2015-10-19', '2015-10-20', '2015-10-21'];
	var graphId = 'graph';
	var chartId = 'chart';

	// set variables
	var padding = {};
	var bounds = {};
	var coordinates = {};

	padding = {
	left: 100,
	right: 100,
	top: 100,
	bottom: 100
	};

	bounds.full = {
	left: 0,
	right: 800,
	top: 0,
	bottom: 600
	};

	bounds.chart = {
	left: bounds.full.left + padding.left,
	right: bounds.full.right - padding.right,
	top: bounds.full.top + padding.top,
	bottom: bounds.full.bottom - padding.bottom
	};

	coordinates.xAxis = {
	x: 0,
	y: bounds.full.bottom - (padding.bottom * 0.8)
	}

	coordinates.yAxis = {
	x: padding.left - (padding.left * 0.2),
	y: 0
	}

	var scaleX = d3.scale.ordinal().domain(dates).rangeRoundBands([bounds.chart.left, bounds.chart.right], 0.2);
	var scaleY = d3.scale.linear().domain([0, d3.max(graphData, function (d) { return d.sales })]).range([bounds.chart.bottom, bounds.chart.top]);
	var dateFormat = d3.time.format('%m/%d');
	var div = d3.select("body")
	.append("div")
	.attr("class", "tooltip");

	d3.select("#container")
	.append("svg")
	.attr("id", graphId)
	.attr("width", bounds.full.right)
	.attr("height", bounds.full.bottom);

	var xGrid = d3.svg.axis()
	.scale(scaleX)
	.tickFormat("")
	.tickSize(bounds.chart.bottom - bounds.chart.top, 0)
	.orient("bottom");

	var yGrid = d3.svg.axis()
	.scale(scaleY)
	.tickFormat("")
	.tickSize(bounds.chart.right - bounds.chart.left, 0)
	.orient("left");

	var xAxis = d3.svg.axis()
	.scale(scaleX)
	.tickFormat(function (d) { return dateFormat(new Date(Date.parse(d))); })
	.tickSize(10, 2)
	.orient("bottom");

	var yAxis = d3.svg.axis()
	.scale(scaleY)
	.tickSize(10, 2)
	.orient("left");

	d3.select('#' + graphId)
	.append("g")
	.attr("class", "grid")
	.attr("transform", "translate(" + coordinates.xAxis.x + ", " + bounds.chart.top + ")")
	.call(xGrid);

	d3.select('#' + graphId)
	.append("g")
	.attr("class", "grid")
	.attr("transform", "translate(" + bounds.chart.right + ", " + coordinates.yAxis.y + ")")
	.call(yGrid);

	d3.select('#' + graphId)
	.append("g")
	.attr("id", chartId);

	d3.select('#' + chartId).selectAll('.pixies')
	.data(graphData)
	.enter()
	.append("rect")
	.attr("x", function (d) { return scaleX(d.date); })
	.attr("y", function (d) { return bounds.chart.bottom - scaleY(d.sales); })
	.attr("width", scaleX.rangeBand())
	.attr("height", function (d) { return scaleY(d.sales); })
	.attr("class", "pixies")
	.attr("fill", "black")
	.on("mouseover", function(d) {
	d3.select(this).attr('fill', 'steelblue');
	div.html(JSON.stringify(d));
	})
	.on("mouseout", function(d) {
	d3.select(this).attr('fill', 'black');
	div.html('');
	});

	d3.select('#' + graphId)
	.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(" + coordinates.xAxis.x + ", " + coordinates.xAxis.y + ")")
	.call(xAxis);

	d3.select('#' + graphId)
	.append("g")
	.attr("class", "y axis")
	.attr("transform", "translate(" + coordinates.yAxis.x + ", " + coordinates.yAxis.y + ")")
	.call(yAxis);

	d3.select('#' + graphId)
	.selectAll(".tick")
	.filter(function (d) { return d === 0; })
	.remove();































	})();
	</script>
	</body>
	</html>