function canvas_02() {
	byHours = d3.group(db, d => d.work_hours);
	salaryAvgByHour = [];
	avg = averageSalary(db);
	ordered_avg = Object.keys(avg).sort();

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

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

	size = 500;

	salary_line = canvas2.append("g")
	.attr("height", 600);
	salary_line.selectAll("rect")
	.data(avg)
	.enter()
	.append("rect")
	.style("fill", "#FF9534")
	.style("opacity", function(d, i) {
		console.log(avg[ordered_avg[i]]);
		return map(avg[ordered_avg[i]], 0, 95541, 0, 1);
	})
	.attr("x", function(d, i) {
		if (i > 0) {
			total = 0;
			for (var j = 1; j <= i; j++) {
				console.log(ordered_avg[i-j]);
				total += 200;
			}
		return total;
		} else {
			return 0;
		}
	})
	.attr("y", function(d, i) {
		return (600-(avg[ordered_avg[i]] / size)) / 2;
	})
	.attr("width", function (d, i) {
		return 200;
	})
	.attr("height", function(d, i) {
		return avg[ordered_avg[i]] / size;
	});

	salary = canvas2.append("g");
	salary.selectAll("text")
	.data(avg)
	.enter()
	.append("text")
	.attr("fill", "white")
	.attr("x", function(d, i) {
		return 50+ i*200;
	})
	.attr("y", function(d, i) {
		return (600-(avg[ordered_avg[i]] / size)) / 2 + ((avg[ordered_avg[i]] / size)/2);
	})
	.text(function(d, i) {
		return "$ " + avg[ordered_avg[i]].toString().substr(0, 4) + "0";
	});

	hours = canvas2.append("g");
	hours.selectAll("text")
	.data(avg)
	.enter()
	.append("text")
	.attr("fill", "white")
	.attr("x", function(d, i) {
		return 50+ i*200;
	})
	.attr("y", function(d, i) {
		return 20+(600-(avg[ordered_avg[i]] / size)) / 2 + ((avg[ordered_avg[i]] / size)/2);
	})
	.text(function(d, i) {
		return ordered_avg[i];
	});

	
}