oliverlundquist · October 22, 2015 10:29
diff --git a/gistfile1.txt b/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>