let pos = [];

function canvas_01() {
	count = countField(db, "industries");

	for (var i = count.length - 1; i >= 0; i--) {
		pos[i] = [randomInterval(-200, 200), randomInterval(-200, 200)];
	}

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

	industries = canvas1.append("g");

	industries.selectAll("text")
	.data(count)
	.enter()
	.append("text")
	.attr("x", function(d, i) {
		return pos[i][0];
	})
	.attr("y", function(d, i) {
		return pos[i][1];
	})
	.style("font-size", function(d, i) {
		return count[Object.keys(count)[i]] / 60;
	})
	.text(function (d, i) {
		if (Object.keys(count)[i] == "Digital products + services (web design, app design, software design)") {
			return "Digital products + services"
		} else {
			return Object.keys(count)[i];
		}
	});
}

function canvas_01_update(ev) {
	//d3.pointer(event);
	ind = document.getElementById("industries");
	let mouseX = map(ev.clientX - ind.getBoundingClientRect().x, 0, ind.clientWidth, -100, 100);
	console.log(mouseX);
	let mouseY = map(ev.clientY - ind.getBoundingClientRect().y, 0, 800, -100, 100);

	for (var i = count.length - 1; i >= 0; i--) {
		size = count[Object.keys(count)[i]];
		pos[i] = [(ind.clientWidth/2) + (mouseX / 50) * size/50, 400+(mouseY / 50) * size/50];
		ind.children[0].children[i].style.transform = "translate("+ pos[i][0] +"px , "+ pos[i][1] +"px)";
	}	
}

