let spotify;

let WIDTH = 500;
let HEIGHT = 500;

let escalaA, escalaB;

function addPoly(raio) {
	let ang = (Math.PI*2)/5;
	let points = [];

	for (let i = 0; i<5; i++) {
		points.push(WIDTH/2 + Math.cos(ang*i)*raio);
		points.push(HEIGHT/2 + Math.sin(ang*i)*raio);
	}

	svg.append("polygon")
		.attr("points", points)
		.style("stroke", "lime");
}

function radar(tableA, tableB, tableC, tableD, tableE) {
	let svg = d3.select("body").append("svg")
		.attr("width", WIDTH)
		.attr("height", HEIGHT)
		.attr("class", "graph");

	addPoly(10);
	addPoly(20);

	
}

function correlate(tableA, tableB, rangeA, rangeB) {
	escalaA = d3.scaleLinear()
	.domain(rangeA)
	.range([30, WIDTH-30]);

	escalaB = d3.scaleLinear()
	.domain(rangeB)
	.range([30, WIDTH-30]);


	let svg = d3.select("body").append("svg")
		.attr("width", WIDTH)
		.attr("height", HEIGHT)
		.attr("class", "graph");

	svg.selectAll("circle")
		.data(spotify)
		.enter()
		.append("circle")
		.attr("r", 3)
		.attr("cx", function(d) {
			return escalaA(d[tableA]);
		})
		.attr("cy", function(d) {
			return HEIGHT-escalaB(d[tableB]);
		})
		.attr("fill", function(d) {
			if (tableB=="key") {
				if (d.mode==0) {
					return "red";
				} else {
					return "orange";
				}
			} else {
				return "black";
			}
		});

	svg.append("text")
		.text(tableA)
		.attr("x", WIDTH/2)
		.attr("y", HEIGHT-10)
		.attr("text-anchor", "middle");

	svg.append("text")
		.text(tableB)
		.attr("text-anchor", "middle")
		.style("transform", "translate(10px, "+HEIGHT/2+"px) rotate(90deg)")
		.attr("color", "red");
}

d3.csv("spotify.csv").then(function(data) {
	console.log(data);
	spotify = data

	correlate("energy", "danceability", [0,1], [0,1]);
	correlate("speechiness", "instrumentalness", [0,1], [0,1]);
	correlate("danceability", "valence", [0,1], [0,1]);
	correlate("acousticness", "energy", [0,1], [0,1]);
	correlate("tempo", "energy", [0,170], [0,1]);
	correlate("valence", "key", [0,1], [0,11]);


	radar();
})


