Exercise Module 5

<!DOCTYPE html>
<html lang="en">
<head>
		<meta charset="utf-8">
		<title>Exercise Module 5 -Scatterplot</title>
		<script type="text/javascript" src="https://d3js.org/d3.v3.js"></script>

h1 {
				font-size: 24px;
				margin: 0;
			}

p {
				font-size: 14px;
				margin: 10px 0 0 0;
			}

.key {
				font-size: 12px;
				margin: 10px 0 0 0;
			}

svg {
				background-color: Ghostwhite;
			}

circle:hover {
				fill: #339933;
				opacity: 0.5;

}
			
			.axis path,
			.axis line {
				fill: none;
				stroke: gray;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 10px;
			}

.y.axis path,
			.y.axis line {
				opacity: 1;
			}

</style>

</head>

<body>
		<h1>Barcelona family income 2013</h1>

<p>The family income in Barcelona by neighborhoods vs. the percentage of population between 25 to 64 years old</a></p>
		<p class="key">Source: <a href="https://opendata.bcn.cat/opendata/es">OpenDataBCN</a> and own calculations. (Index RFD Barcelona = 100)</p>
</br>

var xScale = d3.scale.linear()
								.range([ padding[3], w - padding[1] ]);
			
			var yScale = d3.scale.linear()
								.range([ padding[0], h - padding[2] ]);

var xAxistop = d3.svg.axis() // top function axis
							.scale(xScale)
							.orient("top");

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

var yAxis = d3.svg.axis()
							.scale(yScale)
							.orient("left")
							.tickFormat(function(d) {
								return d + "%";
							});

var yAxisright = d3.svg.axis()
							.scale(yScale)
							.orient("right")
							.tickFormat(function(d) {
								return d + "%";
							});

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

d3.csv("BCN_Demographics_perc_2013_family_Income.csv", function(data) {

/* això carrega les dades a la consola del navegador
console.log(data);
console.log(data.map(function(d) { return d.anys_25a64_perc; } ));
*/
				data.sort(function(a, b) {
					return d3.ascending(+a.Ordre, +b.Ordre);

});

xScale.domain([ 0,
						 d3.max(data, function(d) {
								return +d.Renda_familiar;
								}) +10
						 ]);
				yScale.domain([ d3.max(data, function(d) {
									return +d.anys_25a64_perc;
								}) +1
								, d3.min(data, function(d) {
									return +d.anys_25a64_perc;
								}) -1
						 ]);

var circles = svg.selectAll("circle")
								.data(data)
								.enter()
								.append("circle");

circles.attr("cx", function(d) {
				   		return xScale(d.Renda_familiar)
				   	})
					.attr("cy", 0)
					.attr("r", 0.1)
					.attr("fill", "red")
					.append("title")
					.text(function(d) {
						return d.Barri + " (" + d.Codibarri + ") " + " del Districte " + d.Districte + " té una renda familiar de " + d.Renda_familiar + " % i la franja de 25 a 64 anys és el " + d.anys_25a64_perc + "%";
					});

// transitions
					circles
					.sort(function(a, b) {
						return d3.ascending(+a.anys_25a64_perc, +b.anys_25a64_perc);
					})
						.transition()
						.duration(3000)
						.delay(function(d, i) {
								return i * 50;
							})
						.attr("r",15)
						.attr("cy", function(d) {
							return yScale(d.anys_25a64_perc);
						})
						.attr("fill","steelblue")
						.attr("opacity", 0.3);

// ejes

// hori es para desplazar el eje derecho
				var hori = d3.max(data, function(d) {
						   		return xScale(d.Renda_familiar)
						   	}) +19 ;

svg.append("g") // Axis on the top of the chart
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (paddingaxis[0] + padding[2]) + ")")
					.call(xAxistop);

svg.append("g")
					.attr("class", "x axis")
					.attr("transform", "translate(0," + (h - paddingaxis[1] - padding[2]) + ")")
					.call(xAxis)
					.append("text")
                    .attr("x", w - 80)
                    .attr("y", -6)
                    .style("text-anchor", "end")
                    .text("Index RFD Barcelona = 100");

svg.append("g")
					.attr("class", "y axis")
					.attr("transform", "translate(" + padding[3] + ",0)")
					.call(yAxis)
					.append("text")
					.attr("transform", "rotate(-90)")
                    .attr("x", -25)
                    .attr("y", 7)
                    .attr("dy", ".71em") 
                    .style("text-anchor", "end")
                    .text("% of population between 25 to 64 years old");

svg.append("g") // Axis on the right of the chart
					.attr("class", "y axis")
					.attr("transform", "translate(" + hori + ",0)")
					.call(yAxisright);

});

</script>

</body>
</html>

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

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