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;

	if (field == "age") {
		
	} else {}
}


function canvas_02() {

	line = {

	}

	labels = {
	}

	
	addNode("age");

	addNode("race");

	addNode("gender");

	addNode("LGBTQIA+");

	addNode("opportunities");

	addNode("jobs_before");

	addNode("design_work_years");

	

	

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

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



		return n / 40;
	}

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


	designer_profile = db;

	var lineGenerator = d3.line();

	

	canvas3 = d3.select("#canvas2").append("svg")
	.attr("class", "graph")
	.attr("id", "profile")
	.on("mouseover", function (d) {
		//console.log(d);
	});

	size = 300;
	graph_width = 1100;

	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);

	node_g = canvas3.append("g");

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

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


		desc_g = node.append("g")
		.attr("class", "desc");


		desc_g.append("text")
		.attr("x", graph_width/2)
		.attr("y", 30+(num-1)*800)
		.style("font-size", 30)
		.attr("text-anchor", "middle")
		.text(labels["node_"+num].replaceAll("_", " "));

		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 (labels["node_"+(num)] == "age") {
					dados = Object.keys(line["node_"+num])[j];
				} else {
					dados = Object.keys(line["node_"+num]).sort()[j];
				}

				if (designer_profile[i][labels["node_"+num]] == dados) {
					sep = graph_width / (Object.keys(line["node_"+num]).length-1);
					x1 = (sep*j) + nextProfile(line["node_"+num], dados);
				}
			}

			for (var j = 0; j < Object.keys(line["node_"+(num+1)]).length; j++) {
				sep = graph_width / (Object.keys(line["node_"+(num+1)]).length-1);
				
				dados = Object.keys(line["node_"+(num+1)]).sort()[j];

				if (designer_profile[i][labels["node_"+(num+1)]] == dados) {
					x2 = (sep*j) + nextProfile(line["node_"+(num+1)], dados);
				}
			}
			y1 = (num-1)*800;
			points = [[x1, y1+100], [x1, y1+300], [x2, y1+600], [x2, y1+900]];
			curva.lineString = lineGenerator(points.slice(0, points.length));


			return curva.lineString;

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

		node_desc = desc_g.append("g");

		node_desc.selectAll("text")
		.data(Object.keys(line["node_"+num]).sort())
		.enter()
		.append("text")
		.style("fill", "rgb(255, 149, 52)")
		.attr("x", 0)
		.attr("y", 0)
		.attr("text-anchor", "middle")
		.attr("transform", function (d, i) {
				sep = graph_width / (Object.keys(line["node_"+(num)]).length-1);
				if (i%2==0) {
					off = 20;
				} else {
					off = 0;
				}
				return "translate("+ (i*sep) + ", "+ ((60+(num-1)*800) + off)+ ")";
			})
		.text(function (d) {
			return d;
		});

		if (num == Object.keys(line).length-1) {
			node_final = node.append("g");
			node_final.selectAll("text")
			.data(Object.keys(line["node_"+(num+1)]))
			.enter()
			.append("text")
			.style("fill", "rgb(255, 149, 52)")
			.attr("transform", function (d, i) {
				sep = graph_width / (Object.keys(line["node_"+(num+1)]).length-1);
				if (i%2==0) {
					off = 20;
				} else {
					off = 0;
				}
				return "translate("+ (i*sep) + ", "+ ((120+(num)*800) + off) + ")";
			})
			.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]);
				}
			}
		}

		

	}

	node_g.style("transform", function (d, i) {
			return "translateX(calc(50% - "+ 600 +"px))";
		});

	desc_g.append("text")
		.attr("x", graph_width/2)
		.attr("y", 30+(Object.keys(line).length-1)*800)
		.style("font-size", 30)
		.attr("text-anchor", "middle")
		.text(labels["node_"+Object.keys(line).length].replaceAll("_", " "));


	

	canvas3.style("height", Object.keys(labels).length * 800);
	
}



function canvas_02_onmousemove(ev) {
	//d3.pointer(event);
	el = document.getElementById("profile");
	
}
