Vocab/Year Scatterplot

<!DOCTYPE html>
<html lang="en">
	<head>
		<meta charset="utf-8">
		<title>Scatterplot</title>
		<script src="https://d3js.org/d3.v4.min.js"></script>
    <style type = "text/css">
      circle:hover {
        	fill: blue;
      }
      
      #tooltip {
        	position: absolute;
        	width: 200px;
        	height: auto;
        	padding: 10px;
        	background-color: white;
        	-webkit-border-radius: 10px;
					-moz-border-radius: 10px;
					border-radius: 10px;
					-webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
					-moz-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
					box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
					pointer-events: none;
      }
      
      #tooltip.hidden {
				display: none;
			}
			
			#tooltip p {
				margin: 0;
				font-family: sans-serif;
				font-size: 11px;
				line-height: 20px;
			}
      </style>
	</head>
	<body>
      <div id="tooltip" class="hidden">
				<p><strong><span id = "title"> </span></strong></p>
				<p><span id="artist"></span></p>
      	<p>First appearance: <span id="first_app"></span></p>
      	<p>Number of appearances: <span id="num_apps"></span></p>
			</div>
		<script type="text/javascript">
      
    //to-do
/*
	bring highlighted song to front (append)
	use color to highlight the songs by the same artist (use class)
  legend for color
  sync colors
  rewrite labels with css
*/
	
		var width = 700;
		var height = 500;
		var padding = 100;
    var xLabel = "Year";
    var yLabel1 = "Number";
    var yLabel2 = "of words";
    var title = "Unique Word Count of Top Songs";
		
		var dataset, xScale, yScale, zScale, color, xAxis, yAxis;
      
		//strings to dates
		var parseTime = d3.timeParse("%Y-%m-%d");
		
		//dates to strings
		var formatTime = d3.timeFormat("%Y");
		
		//Function for converting CSV values from strings to Dates and numbers
			var rowConverter = function(d) {
				return {
          song_name: d.song_name,
          artist: d.artist,
					first_app: parseTime(d.first_app),
					vocab: parseInt(d.vocab),
					num_apps: parseInt(d.num_apps)
				};
			}
      
    //to smooth transitions 
    var t = d3.transition()
    		//.duration(150)
    		.ease(d3.easeLinear);

d3.csv("https://raw.githubusercontent.com/azywong/lyricalnotes/master/processed-data/viz2.csv", rowConverter, function(data) {
				//Copy data into global dataset
      dataset = data;

//Get start and end dates in dataset
				var startDate = d3.min(dataset, function(d) { return d.first_app; });
      console.log(startDate);
				var endDate = d3.max(dataset, function(d) { return d.first_app; });
				//Create scale functions
				xScale = d3.scaleTime()
							   .domain([
									d3.timeYear.offset(startDate, -1),  //startDate minus one year for padding
									d3.timeYear.offset(endDate, 1)	  //endDate plus one year for padding
								])
							   .range([padding, width - padding]);
				yScale = d3.scaleLinear()
							   .domain([
									0,  //zero baseline
									d3.max(dataset, function(d) { return d.vocab; })
								])
							   .range([height - padding, padding]);
      
      	zScale = d3.scaleLinear()
							   .domain([
									0,  //zero baseline
									d3.max(dataset, function(d) { return d.num_apps; })
								])
							   .range([2, 10]);
      
      	color = d3.scaleQuantize()
      					.domain([d3.min(dataset, function(d){ return d.num_apps; }), 															 d3.max(dataset, function(d){ return d.num_apps; })])

.range(["rgb(107,183,255)", "rgb(28,188,0)", "rgb(255,242,127)", "rgb(255,195,127)", "rgb(255,127,135)"]); //sync colors with group
      
				//Define X axis
				xAxis = d3.axisBottom()
								  .scale(xScale)
								  .ticks(10)
								  .tickFormat(formatTime);
				//Define Y axis
				yAxis = d3.axisLeft()
								  .scale(yScale)
								  .ticks(10);
      
				//Create SVG element
				var svg = d3.select("body")
							.append("svg")
							.attr("width", width)
							.attr("height", height);
				//Generate guide lines
				svg.selectAll("line")
				   .data(dataset)
				   .enter()
				   .append("line")
				   .attr("x1", function(d) {
				   		return xScale(d.first_app);
				   })
				   .attr("x2", function(d) {
				   		return xScale(d.first_app);
				   })
				   .attr("y1", height - padding)
				   .attr("y2", function(d) {
				   		return yScale(d.vocab);
				   })
				   .attr("stroke", "#ddd")
				   .attr("stroke-width", 1);
      
				//Generate circles last, so they appear in front
				var circles = svg.selectAll("circle")
				   .data(dataset)
				   .enter()
				   .append("circle")
        	 .attr("id", function(d) { return d.artist; })
				   .attr("cx", function(d) {
				   		return xScale(d.first_app);
				   })
				   .attr("cy", function(d) {
				   		return yScale(d.vocab);
				   })
				   .attr("r", function(d) {
          		//return zScale(d.num_apps);
          		return d.num_apps * 0.1;
        	 })
        	 .attr("fill", function(d){
             return color(d.num_apps);
           })
        	 .on("mouseover", function(d) {
             circles.transition()
             				.attr("fill", "LightGray");

//Get x/y values
					var xPosition = parseFloat(d3.select(this).attr("cx"));
					var yPosition = parseFloat(d3.select(this).attr("cy")) / 2 + height / 2;
					//Update the tooltip position and value
					var tooltip = d3.select("#tooltip")
						.style("left", xPosition + "px")
						.style("top", yPosition + "px")
          
          tooltip.select("#title")
          			 .text(d.song_name)
          
          tooltip.select("#artist")
								 .text(d.artist)
            
          tooltip.select("#first_app")
           			 .text(formatTime(d.first_app));
             
          tooltip.select("#num_apps")
          			 .text(d.num_apps);  
        
   
					//Show the tooltip
					d3.select("#tooltip").classed("hidden", false);
        	 })
        	 .on("mouseout", function(d) {
          	d3.select("#tooltip").classed("hidden", true);
            circles.transition(t)
            		 .attr("fill", function(d) {
            			return color(d.num_apps);
           });
            			 //.attr("fill", "black");
        });
	   			
	   			//Create X axis
	   			svg.append("g")
	   				.attr("class", "axis")
	   				.attr("transform", "translate(0," + (height - padding) + ")")
	   				.call(xAxis);
	   			
	   			//Create Y axis
	   			svg.append("g")
	   				.attr("class", "axis")
	   				.attr("transform", "translate(" + padding + ",0)")
	   				.call(yAxis);
      
      
      		//rewrite below with css later
      
      		//x-axis label
      		svg.append("text")
          	 .attr("x", width/2 - 20)
          	 .attr("y", height - 50)
          	 .attr("font-family", "sans-serif")
          	 .attr("font-size", "12px")
          	 .text(xLabel);
      
      		//y-axis label
      		svg.append("text")
          	 .attr("x", 10)
          	 .attr("y", height/2)
          	 .attr("font-family", "sans-serif")
          	 .attr("font-size", "12px")
          	 .text(yLabel1);
      
      		svg.append("text")
          	 .attr("x", 10)
          	 .attr("y", height/2 + 20)
          	 .attr("font-family", "sans-serif")
          	 .attr("font-size", "12px")
          	 .text(yLabel2);
      
      		svg.append("text")
          	 .attr("x", width/4)
          	 .attr("y", 50)
          	 .attr("font-family", "sans-serif")
          	 .attr("font-size", "24px")
          	 .text(title);
      
			});
		</script>
	</body>
</html>

https://d3js.org/d3.v4.min.js