j14Eidan

<!doctype html>

<body>
		
	<script>
			var width = 500;
			var height = 500;
			var padding = 50;
			//load data
			d3.csv("data.csv", function(data){
				
				//i need just the age of each person i create new array consists ages
				//map is going through the array and build new one, i is refernce for each element in the array
				var map = data.map(function(i){	return parseInt(i.rent11);})
					//console.log(map);

//histogram
				var histogram = d3.layout.histogram()
									.bins(7)
									(map)
					//console.log(histogram);

var y = d3.scale.linear()
							.domain([0, d3.max(histogram.map(function(i) {return i.length;}))])
							.range([0, height]);

var x = d3.scale.linear()
							.domain([0,d3.max(map) ])
							.range([0, width])

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

//canvas
				var canvas = d3.select("body").append("svg")
								.attr("width", width)
								.attr("height",height + padding)
								.append("g")
									.attr("transform", "translate(20,0)");

var group = canvas.append("g")
								.attr("transform", "translate(0," + height + ")" )
								.call(xAxis);

//bind data to the documents - create a g elemen foreach data element
				var bars = canvas.selectAll(".bar")
								.data(histogram)
								.enter()
								.append("g")

bars.append("rect")
					.attr("x", function(d){return x(d.x);})//horizontal cordinate
					.attr("y",function(d){return 500 - y(d.y);})
					.attr("width", function(d){return x(d.dx)-2;}) //dx = range
					.attr("height", function(d){return y(d.y);})
					.attr("fill", "steelblue")

bars.append("text")
					.attr("x", function(d){return x(d.x);})
					.attr("y", function(d){return 500 - y(d.y);})
					.attr("dy", "20px" )
					.attr("dx", function(d){return x(d.dx)/2;})
					.attr("fill", "#fff")
					.attr("text-anchor" , "middle")
					.text(function(d){return d.y;}) //d.y = number of elements
			})

</script>

<p> x = שכירות שנת 2011</p>
<p> y = כמות מוחאים</p>
	</body>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

https://d3js.org/d3.v3.min.js