line = {

}

labels = {
}


function addNode(field) {
	extraction = groupToDictionary(field);
	extraction = initializeWith(extraction);

	n = Object.keys(line).length+1;

	line["node_"+n] = extraction;
	labels["node_"+n] = field;
}


function canvas_03() {

	line = {

	}

	labels = {
	}

	
	addNode("design_work_years");

	addNode("LGBTQIA+");

	addNode("gender");
	addNode("race");

	addNode("organisation_members");

	

	

	function nextProfile(node, entry) {
		n = node[entry][0];
		
		//console.log(node[entry]);
		node[entry][0]  += 1;

		
		//node_1[node][1] = !node_1[node][1];

		if (node[entry][1]) {
			//node_1[node][0] = 0-node_1[node][0];
		}



		return n / 40;
	}

	function resetProfile(node, entry) {
		node[entry][0] = 0;
	}


	designer_profile = db;

	var lineGenerator = d3.line();

	

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

	size = 300;

	let curva = {name: 'curveBasis', curve: d3.curveBasis, active: false, lineString: '', clear: true, info: 'Interpolates the points with a cubic spline which are monotonic (i.e. always increasing or always decreasing) in y.'};



	lineGenerator.curve(curva.curve);

	for (var num = 1; num <= Object.keys(line).length-1; num++) {

		
		node = canvas3.append("g")
		.attr("class", "test");

		node_viz = node.append("g")
		.attr("height", 600)
		.attr("class", "viz");

		node_viz.selectAll("path")
		.data(designer_profile)
		.enter()
		.append("path")
		.attr('d', function(d, i) {

			let x1 = 0;
			let x2 = 0;

			for (var j = 0; j < Object.keys(line["node_"+num]).length; j++) {
				if (designer_profile[i][labels["node_"+num]] == Object.keys(line["node_"+num]).sort()[j]) {
					sep = 1000 / Object.keys(line["node_"+num]).length;
					x1 = (sep*j) + nextProfile(line["node_"+num], Object.keys(line["node_"+num]).sort()[j]);
				}
			}

			for (var j = 0; j < Object.keys(line["node_"+(num+1)]).length; j++) {
				sep = 1000 / Object.keys(line["node_"+(num+1)]).length;
				if (designer_profile[i][labels["node_"+(num+1)]] == Object.keys(line["node_"+(num+1)]).sort()[j]) {
					x2 = (sep*j) + nextProfile(line["node_"+(num+1)], Object.keys(line["node_"+(num+1)]).sort()[j]);
				}
			}
			points = [[x1, num*500], [x1, (num*500)+100], [x2,(num*500)+400], [x2,(num*500)+500]];
			curva.lineString = lineGenerator(points.slice(0, points.length));


			return curva.lineString;

		})
		.attr("class", "line");

		node_desc = node.append("g");

		node_desc.selectAll("text")
		.data(Object.keys(line["node_"+num]).sort())
		.enter()
		.append("text")
		.attr("x", 0)
		.attr("y", 0)
		.attr("transform", function (d, i) {
				sep = 1000 / Object.keys(line["node_"+(num)]).length;
				return "translate("+ (i*sep) + ", "+ (30+(num)*500) + ")";
			})
		.text(function (d) {
			return d;
		});

		if (num == Object.keys(line).length-1) {
			node_final = node.append("g");
			console.log(Object.keys(line["node_"+(num+1)]));
			node_final.selectAll("text")
			.data(Object.keys(line["node_"+(num+1)]))
			.enter()
			.append("text")
			.attr("transform", function (d, i) {
				sep = 1000 / Object.keys(line["node_"+(num+1)]).length;
				return "translate("+ (i*sep) + ", "+ (30+(num+1)*500) + ")";
			})
			.text(function (d) {
				return d;
			});
		}



		for (var i = 0; i < designer_profile.length; i++) {
			for (var j = 0; j < Object.keys(line["node_"+(num+1)]).length; j++) {
				if (designer_profile[i][labels["node_"+(num+1)]] == Object.keys(line["node_"+(num+1)]).sort()[j]) {
					resetProfile(line["node_"+(num+1)], Object.keys(line["node_"+(num+1)]).sort()[j]);
				}
			}
		}

	}




	






	
	

	
}