jeanlaurent/gist:7931679

## gistfile1.html
<!DOCTYPE html>
<html>
<head>
	<title>d3</title>
	<meta charset="UTF-8">
<style>
body{margin:0px;}
.h,.v{stroke:black;stroke-dasharray:4 4;stroke-width:1;stroke-opacity:.5;}
.axis path,
.axis line {
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text {
    font-family: sans-serif;
    font-size: 11px;
}
</style></head>
<body>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
<script>
	var width = 500,
    	height = 500,
    	margin = 50;
		users = [
	{
		name:"polka",
		score:[10,23,32,34,50]
	},
	{
		name:"robert",
		score:[0,0,32,35,55]
	},
	{
		name:"michel",
		score:[4,4,0,3,10]
	},
	{
		name:"albert",
		score:[7,10,21,22,23]
	},
	];
	var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

	var x=d3.scale.linear().domain([0,4]).range([margin,width-margin]);
	var y=d3.scale.linear().domain([-10,70]).range([height-margin,margin]);

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

var yAxis = d3.svg.axis()
  .scale(y)
  .orient("left");


svg.append("g")
  .attr("class", "axis")
  .attr("transform", "translate(0," + (height - margin) + ")")
  .call(xAxis);

svg.append("g")
  .attr("class", "axis")
   .attr("transform", "translate(" + margin + ",0)")
  .call(yAxis);


svg.selectAll(".h").data(d3.range(-8,10,2)).enter()
  .append("line").classed("h",1)
  .attr("x1",margin).attr("x2",height-margin)
  .attr("y1",y).attr("y2",y)

svg.selectAll(".v").data(d3.range(1,5)).enter()
  .append("line").classed("v",1)
  .attr("y1",margin).attr("y2",width-margin)
  .attr("x1",x).attr("x2",x)

	svg.selectAll("circle").data(users).enter()
  		.append("circle")
  		.attr("cx",function(d,i) {return x(i);})
  		.attr("cy",function(d,i) {return y(d.score[i]);})
  		.attr("r",11)
    	.append("title")
    	.text(String)
</script>
</body>
</html>
	<!DOCTYPE html>
	<html>
	<head>
	<title>d3</title>
	<meta charset="UTF-8">
	<style>
	body{margin:0px;}
	.h,.v{stroke:black;stroke-dasharray:4 4;stroke-width:1;stroke-opacity:.5;}
	.axis path,
	.axis line {
	fill: none;
	stroke: black;
	shape-rendering: crispEdges;
	}

	.axis text {
	font-family: sans-serif;
	font-size: 11px;
	}
	</style></head>
	<body>
	<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
	<script>
	var width = 500,
	height = 500,
	margin = 50;
	users = [
	{
	name:"polka",
	score:[10,23,32,34,50]
	},
	{
	name:"robert",
	score:[0,0,32,35,55]
	},
	{
	name:"michel",
	score:[4,4,0,3,10]
	},
	{
	name:"albert",
	score:[7,10,21,22,23]
	},
	];
	var svg = d3.select("body").append("svg").attr("width",width).attr("height",height);

	var x=d3.scale.linear().domain([0,4]).range([margin,width-margin]);
	var y=d3.scale.linear().domain([-10,70]).range([height-margin,margin]);

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

	var yAxis = d3.svg.axis()
	.scale(y)
	.orient("left");


	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(0," + (height - margin) + ")")
	.call(xAxis);

	svg.append("g")
	.attr("class", "axis")
	.attr("transform", "translate(" + margin + ",0)")
	.call(yAxis);


	svg.selectAll(".h").data(d3.range(-8,10,2)).enter()
	.append("line").classed("h",1)
	.attr("x1",margin).attr("x2",height-margin)
	.attr("y1",y).attr("y2",y)

	svg.selectAll(".v").data(d3.range(1,5)).enter()
	.append("line").classed("v",1)
	.attr("y1",margin).attr("y2",width-margin)
	.attr("x1",x).attr("x2",x)

	svg.selectAll("circle").data(users).enter()
	.append("circle")
	.attr("cx",function(d,i) {return x(i);})
	.attr("cy",function(d,i) {return y(d.score[i]);})
	.attr("r",11)
	.append("title")
	.text(String)
	</script>
	</body>
	</html>