katsumitakano/index.html

## index.html
<!doctype html>
<html lang="ja">
<head>
	<meta charset="UTF-8">
	<title>グラフを表示する</title>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

<style type="text/css">
div.card{
	width: 320px;
	float: left;
	margin: 5px;
	padding: 5px;
	border: 5px solid #fa0;
}
.axis path, .axis line{
	fill: none;
	stroke: black;
}
.axis text{
	font-size: 9px;
}
</style>
</head>
<body>

<script>
$(function(){
var dataset = [
	{legend:"apple", value:100},
	{legend:"orange", value:150},
	{legend:"banana", value:200}
];

var w = 300;
var h = 150;

var xScale = d3.scale.linear()
		.domain([0, d3.max(dataset.map(function(data){return data.value}))])
		.range([0, w])

var xAxis = d3.svg.axis()
		.scale(xScale)
		.orient("bottom")

var svg = d3.select("body").append("svg")
		.attr({
			width: w,
			height: h
		})

svg.append("g")
	.attr({
		class: "axis",
		transform: "translate(0, "+ (h-30) +")"
	})
	.call(xAxis);

svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr({
		x: 0,
		y: function(d, i){ return i*30; },
		width: function(d){ return d.value; },
		height: 20,
		fill: "green"
	})

svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d){ return d.legend; })
	.attr({
		x: 0,
		y: function(d, i){ return i*30+15; },
		fill: "white",
	})
});
</script>
</body>
</html>
	<!doctype html>
	<html lang="ja">
	<head>
	<meta charset="UTF-8">
	<title>グラフを表示する</title>
	<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

	<style type="text/css">
	div.card{
	width: 320px;
	float: left;
	margin: 5px;
	padding: 5px;
	border: 5px solid #fa0;
	}
	.axis path, .axis line{
	fill: none;
	stroke: black;
	}
	.axis text{
	font-size: 9px;
	}
	</style>
	</head>
	<body>

	<script>
	$(function(){
	var dataset = [
	{legend:"apple", value:100},
	{legend:"orange", value:150},
	{legend:"banana", value:200}
	];

	var w = 300;
	var h = 150;

	var xScale = d3.scale.linear()
	.domain([0, d3.max(dataset.map(function(data){return data.value}))])
	.range([0, w])

	var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")

	var svg = d3.select("body").append("svg")
	.attr({
	width: w,
	height: h
	})

	svg.append("g")
	.attr({
	class: "axis",
	transform: "translate(0, "+ (h-30) +")"
	})
	.call(xAxis);

	svg.selectAll("rect")
	.data(dataset)
	.enter()
	.append("rect")
	.attr({
	x: 0,
	y: function(d, i){ return i*30; },
	width: function(d){ return d.value; },
	height: 20,
	fill: "green"
	})

	svg.selectAll("text")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d){ return d.legend; })
	.attr({
	x: 0,
	y: function(d, i){ return i*30+15; },
	fill: "white",
	})
	});
	</script>
	</body>
	</html>