let spotify;

let WIDTH = 800;
let HEIGHT = 1900;

vibration_scale = d3.scaleLinear()
	.domain([0.5, 1])
	.range([0, 20]);

size_scale = d3.scaleLinear()
	.domain([0, 1])
	.range([4, 15]);

var color_gradient = d3.scaleLinear()
  .domain([0, 0.5, 1])
  .range(['#023A50', '#2364A5', '#6189ED']);




let escalaA, escalaB;

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")
		.attr("id", "main");


	svg.selectAll("circle")
		.data(spotify)
		.enter()
		.append("circle")
		.attr("fill", function(d) {
			return color_gradient(d["valence"]);
		})
		.attr("r", function(d) {
			return size_scale(d["instrumentalness"]);
		})
		.attr("dance", function(d) {
			return d["danceability"];
		})
		.attr("cx", function(d) {
			return escalaA(d[tableA]);
		})
		.attr("cy", function(d) {
			return HEIGHT-escalaB(d[tableB]);
		});

	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 = d3.group(data, d => d.artist);

	var unique = d3.scaleOrdinal()
               .domain(data.map( function (d) { return d["artist"]; }));

    unique_arr = unique.domain();
    console.log(spotify);

    

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

		let pos = 0;

	for (var i = unique_arr.length - 1; i >= 0; i--) {
    	name = unique_arr[i];
    	data_by = spotify.get(name);
    	if (data_by.length > 4) {
    		

    		svg_artist = svg.append("svg")
    		.attr("y", pos * 150);

    		svg_artist.append("text")
			.text(name)
			.attr("x", 20)
			.attr("y", 20);

			song_n = 0;
			svg_artist.selectAll("circle")
				.data(data_by)
				.enter()
				.append("circle")
				.attr("fill", function(d) {
					return color_gradient(d["valence"]);
				})
				.attr("r", function(d) {
					return size_scale(d["instrumentalness"]);
				})
				.attr("dance", function(d) {
					return d["danceability"];
				})
				.attr("cy", 50)
				.attr("cx", function(d) {
					song_n = song_n + 1;
					return 20 + song_n*30;
				});

			pos = pos + 1;
    	}
    }

	

	main_graph = document.getElementById("main");
	setInterval(function() {
		for (var i = main_graph.children.length - 1; i >= 0; i--) {
			dance = main_graph.children[i].getAttribute("dance");
			if (dance > 0.5) {
				//main_graph.children[i].style.transform = "translate("+ Math.random() * (dance*vibration_scale(dance)) +"px, "+ Math.random() * (dance*vibration_scale(dance)) +"px)";
			}
		}
	}, 70);
})


