function canvas_03() {

	var color_gradient = d3.scaleLinear()
	.domain([0, 5])
	.range(["#DE3131", 'rgb(50, 0, 0)']);


	salaryAvgByHour = [];
	avg = averageSalary(db);
	ordered_avg = Object.keys(avg).sort();

	varia = ordered_avg.splice(4, 1);
	ordered_avg.unshift(varia[0]);


	satisfaction_hours = satisfactionByWorkHours(db);

	canvas3 = d3.select("#canvas3").append("svg")
	.attr("class", "graph")
	.attr("id", "salary");

	scale = 220;
	larg = 150;

	maing_g = canvas3.append("g");

	g = maing_g.selectAll("g")
	.data(avg)
	.enter()
	.append("g")
	.attr("height", 600);

	g.append("rect")
	.style("fill", "rgb(255, 149, 52)")
	.attr("x", function(d, i) {
		if (i > 0) {
			total = 0;
			for (var j = 1; j <= i; j++) {
				total += larg;
			}
		return total;
		} else {
			return 0;
		}
	})
	.attr("y", function(d, i) {
		return (600-(avg[ordered_avg[i]] / scale)) / 2;
	})
	.attr("width", function (d, i) {
		return larg;
	})
	.attr("height", function(d, i) {
		return avg[ordered_avg[i]] / scale;
	});




	g.append("text")
	.attr("text-anchor", "middle")
	.attr("fill", "white")
	.attr("x", function(d, i) {
		return (i*larg) + (larg/2);
	})
	.attr("y", function(d, i) {
		return (600-(avg[ordered_avg[i]] / scale)) / 2 + ((avg[ordered_avg[i]] / scale)/2);
	})
	.text(function(d, i) {
		return "$ " + avg[ordered_avg[i]].toString().substr(0, 4) + "0";
	});

	g.append("text")
	.attr("text-anchor", "middle")
	.attr("fill", "white")
	.attr("x", function(d, i) {
		return (i*larg) + (larg/2);
	})
	.attr("y", function(d, i) {
		return 20+(600-(avg[ordered_avg[i]] / scale)) / 2 + ((avg[ordered_avg[i]] / scale)/2);
	})
	.text(function(d, i) {
		return ordered_avg[i];
	});


	details = g.append("g")
	.attr("class", "details")
	.style("opacity", 0)
	.attr("num", function(d, i) {
		return i;
	})
	.on("mouseover", function () {
		d3.select(this)
		.style("opacity", 1);
	})
	.on("mouseleave", function () {
		d3.select(this)
		.style("opacity", 0);
	});




y_val = [0, 0, 0, 0, 0];
	for (var ite = 0; ite < 5; ite++) {
		
		details.append("rect")
		.style("fill", function (d, i) {
			return color_gradient(ite);
		})
		.attr("x", function(d, i) {
			if (i > 0) {
				total = 0;
				for (var j = 1; j <= i; j++) {
					total += larg;
				}
			return total;
			} else {
				return 0;
			}
		})
		.attr("y", function (d, i) {
			return  (600-(avg[ordered_avg[i]] / scale)) / 2 + y_val[i];
		})
		.attr("width", larg)
		.attr("height", function(d, i) {
			id = Object.keys(satisfaction_hours).sort()[i];
			num = satisfaction_hours[id][Object.keys(satisfaction_hours[id]).sort()[ite]];
			mapping = map(num, 0, satisfaction_hours[id].length, 0, avg[ordered_avg[i]] / scale);;
			y_val[i] += mapping;
			return mapping //(avg[ordered_avg[i]] / scale);
		})
		.attr("sat", function (d, i) {
			id = Object.keys(satisfaction_hours).sort()[i];
			return [Object.keys(satisfaction_hours[id]).sort()[ite]];
		});
	}

	maing_g.style("transform", function () {
		return "translateX( calc(30vw - "+ this.getClientRects()[0].width/2 +"px))";
	});


	desc_g = canvas3.append("g");

	for (var i = 4; i >= 0 ; i--) {
		lbl_g = desc_g.append("g")
		.style("transform", function () {
			return "translateY(" + i* 40 + "px)";
		});
		lbl_g.append("rect")
		.style("fill", function () {
			return color_gradient(i);
		})
		.attr("width", 25)
		.attr("height", 40);

		lbl_g.append("text")
		.attr("y", 23)
		.attr("x", 40)
		.text(function () {
			return Object.keys(satisfaction_hours["Less than 40 hours"]).sort()[i];
		})
	}



	desc_g.style("transform", function () {
		return "translate(60vw, 25vh)";
	});;
	
}