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

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

	size = 300;

	salary_line = canvas2.append("g")
	.attr("height", 600);
	salary_line.selectAll("rect")
	.data(avg)
	.enter()
	.append("rect")
	.attr("x", function(d, i) {
		return i*200;
	})
	.attr("y", function(d, i) {
		return (600-(avg[Object.keys(avg)[i]] / size)) / 2;
	})
	.attr("width", 200)
	.attr("height", function(d, i) {
		return avg[Object.keys(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[Object.keys(avg)[i]] / size)) / 2 + ((avg[Object.keys(avg)[i]] / size)/2);
	})
	.text(function(d, i) {
		console.log(i);
		return "$ " + avg[Object.keys(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 60+ (600-(avg[Object.keys(avg)[i]] / size)) / 2 + ((avg[Object.keys(avg)[i]] / size)/2);
	})
	.text(function(d, i) {
		console.log(i);
		return Object.keys(avg)[i];
	});

	
}