All examples By author By category About

ienwhang

Full window Github gist

Lyrical Notes Viz2

<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">

<head>
	<title>Viz Project Scatterplot</title>	
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js"></script>
	<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,400i,600" rel="stylesheet">
	<style>

.tooltip {
		font-family: 'Poppins', sans-serif;
		font-weight: 300;
		/*transform: scale(1, 1.03);		*/
	}
	
	.labels {
		font-family: 'Poppins', sans-serif;
		font-weight: 400;
		font-size: 14px;
		letter-spacing: -0.5px;
	}

.axis path {
		stroke: rgb(220,220,220);
		opacity: 0;
	}

.title {
		font-family: 'Poppins', sans-serif;
		font-weight: 600;
		font-size: 60px;
		letter-spacing: -3.5px;
		transform: scale(1, 1.03);
	}

.subtitle {
		font-family: 'Poppins', sans-serif;
		font-weight: 400;
		font-style: italic;
		font-size: 15px;
		transform: scale(1, 1.03);
	}

.axisLabels {
		font-family: 'Poppins', sans-serif;
		font-size: 12px;
	}

.axis text {
		font-family: 'Poppins', sans-serif;
	}

.circles {
		opacity: 0.6;
	}

</style>
</head>

<body>

var data, xScale, yScale, zScale, color, xAxis, yAxis;

//strings to dates
		var parseTime = d3.timeParse("%Y-%m-%d");
		var parseDate = d3.timeParse("%Y-%m-%d");
		var parseYear = d3.timeParse("%Y");

//dates to strings
		var formatTime = d3.timeFormat("%Y");

var margin = {top: 170, right: 250, bottom: 50, left: 100},
			h = 550 - margin.top - margin.bottom,
			w = 1000 - margin.right - margin.left;

var svg = d3.select("body")
					.append("svg")
				    .attr("width", w + margin.left + margin.right)
				    .attr("height", h + margin.top + margin.bottom)
				  	.append("g");

svg.append("text")
		   .attr("class", "axisLabels")
		   .attr("x", w/2 + margin.left)
		   .attr("text-anchor", "middle")
		   .attr("y", h + margin.top + margin.bottom - margin.bottom/2 + 20)
		   .text("Year");

var yTitlePos = h/2 + margin.top;
		svg.append("text")
	       .attr("class", "axisLabels")
		   .attr("x", 0)
		   .attr("y", 0)
		   .attr("text-anchor", "middle")
		   .attr("transform", "translate(30, " + yTitlePos + ")rotate(270)") // translate and rotate y axis label
		   .text("Number of Unique Words");

svg.append("text")
	      	 .attr("x", (w+margin.right-margin.left)/2)
	      	 .attr("y", margin.top/2-20)
	      	 .attr("class", "title")
	      	 .attr("transform", "translate(" + margin.left + ", " + margin.top + ")")
	      	 .attr("text-anchor", "middle")
	      	 // .attr("font-family", "sans-serif")
	      	 .text("Vocabulary Across Time");

svg.append("text")
           .attr("class", "subtitle")
           .attr("x", (w+margin.right-margin.left)/2)
		   .attr("y", margin.top/2 + 27-20)
		   .attr("text-anchor", "middle")
		   .text("Number Of Unique Words Of The Top 200 Most Popular Songs");

// console.log("hi")

// gridlines in y axis function
		function make_y_gridlines() {		
		    return d3.axisLeft(yScale)
		    		 .ticks(5);
		}

d3.csv("viz2_v4.csv", function(dataset) {

// console.log(dataset)

dataset.forEach(function (d) {
	      		d.date = parseDate(d.date);
	      		d.year = parseYear(d.year);
	      		d.freq = +d.freq;
	      		d.vocab = +d.vocab;
	      	});

// console.log(dataset);

//Get start and end dates in dataset
			var startDate = d3.min(dataset, function(d) { return d.date; });
			var endDate = d3.max(dataset, function(d) { return d.date; });

// console.log(startDate);
			// console.log(endDate);

//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([0, w]),
			
			yScale = d3.scaleLinear() //zero baseline
					   .domain([0, Math.ceil(d3.max(dataset, function(d) { return d.vocab/50; }))*50])
					   .range([h, 0]);

zScale = d3.scaleLinear() //zero baseline
					   .domain([0, d3.max(dataset, function(d) { return d.freq; })])
					   .range([2, 10]);

var colorScale = d3.scaleLinear()
					        .domain([d3.min(dataset, function(d) { return d.freq; }), d3.max(dataset, function(d) { return d.freq; })])			
					        .range([0.4, 1]);

var rScale = d3.scaleLinear()
					       .domain([d3.min(dataset, function(d) { return d.freq; }), d3.max(dataset, function(d) { return d.freq; })])			
					       .range([3, 18]);

//Define X axis
			xAxis = d3.axisBottom()
					  .scale(xScale)
					  .ticks(d3.timeYear.every(5));

//Define Y axis
			yAxis = d3.axisLeft()
					  .scale(yScale)
					  .ticks(5);

var xPosX = margin.left,
				xPosY = margin.top + h,
				yPosX = margin.left,
				yPosY = margin.top;

// draw x axis
			svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + xPosX + ", " + xPosY + ")")
				.call(xAxis);

// draw y axis
			svg.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + 80 + ", " + yPosY + ")")
				.call(yAxis);

// add the Y gridlines
		  	svg.append("g")			
		       .attr("class", "grid")
		       .style("stroke-width", 0.5)
		       .style("opacity", 0.05)
		       .attr("transform", "translate(" + 80 + ", " + yPosY + ")")
		       .call(make_y_gridlines().tickSize(-w*1.05).tickFormat(""));

var min = d3.min(dataset, function(d) { return d.freq; }),
		    	max = d3.max(dataset, function(d) { return d.freq; }),
		    	mid = Math.floor((max + min)/2);

var legendBuffer = 70,
		   		yy = -30;

// console.log(min, max, mid);

var legendData = [{"size":18, "value": max, "x": w + margin.left + legendBuffer, "y": margin.top + h/2 + 10 + yy},
		    				  {"size":10, "value": mid, "x": w + margin.left + legendBuffer, "y": margin.top + h/2 + 50 + yy},
		    				  {"size":3, "value": min, "x": w + margin.left + legendBuffer, "y": margin.top + h/2 + 90 + yy}];

var legend = svg.selectAll(".legend")
			             	.data(legendData)
			                .enter()
			                .append("g")
			                .attr("class", "legend");

legend.append("circle")
				.attr("class", "legendC")
				.attr("cx", function(c) { return c.x})
			    .attr("cy", function(c) { return c.y})
			    .attr("r", function(c) { return c.size})
			    .style("opacity", 0.7)
			    .style("fill", "rgb(255,165,0)");

legend.append("text")
			    .attr("y", function(d){ return d.y + 4})
			    .attr("x", function(d){ return d.x + 27})
			    .attr("class", "legend")
			    .style("font-family", "Poppins")
			    .style("font-size", "12px")
			    .attr("text-anchor", "start")
			    .style("font-weight", "300")
			    .text(function(d) {return d.value});

svg.append("text")
			    .attr("y", margin.top + h/2 - 60 + yy)
			    .attr("class", "legend")
			    .attr("x", w + margin.left + legendBuffer - 18)
			    .style("font-family", "Poppins")
			    .style("font-size", "15px")
			    .attr("text-anchor", "start")
			    .style("text-decoration", "underline")
			    .style("font-weight", "400")
			    .text("Legend");

svg.append("text")
			    .attr("y", margin.top + h/2 - 45 + yy)
			    .attr("class", "legend")
			    .attr("x", w + margin.left + legendBuffer - 18)
			    .style("font-family", "Poppins")
			    .style("font-size", "12px")
			    .attr("text-anchor", "start")
			    .style("font-weight", "300")
			    .text("Number of times the");

svg.append("text")
			    .attr("y", margin.top + h/2 - 32 + yy)
			    .attr("class", "legend")
			    .attr("x", w + margin.left + legendBuffer - 18)
			    .style("font-family", "Poppins")
			    .style("font-size", "12px")
			    .attr("text-anchor", "start")
			    .style("font-weight", "300")
			    .text("song has appeared");

svg.append("text")
			    .attr("y", margin.top + h/2 - 19 + yy)
			    .attr("class", "legend")
			    .attr("x", w + margin.left + legendBuffer - 18)
			    .style("font-family", "Poppins")
			    .style("font-size", "12px")
			    .attr("text-anchor", "start")
			    .style("font-weight", "300")
			    .text("on the Hot 100");

d3.selectAll(".circles")
		     		  // .transition()
		     		  // .duration(50)
		     		  // .ease(d3.easeLinear)
		     		  .style("opacity", 0.3);

d3.select(this)
		     		  // .transition(t)
		     		  // .style("stroke-width", 2)
		     		  // .style("stroke", "black")
		     		  .style("fill", "rgb(255,120,71)")
		     		  .style("opacity", 1);

d3.selectAll(".legend") 
		     		  .transition()
		     		  .duration(100)
		     		  .ease(d3.easeLinear)
		     		  .style("opacity", 0);

//Get x/y values
					var xPosition = parseFloat(d3.select(this).attr("cx"));
					var yPosition = parseFloat(d3.select(this).attr("cy"));

var xOffset = margin.left-15;

svg.append("text")
			          .attr("class", "tooltip")
			          .attr("x", xPosition-25)
			          .attr("y", yPosition-81)
			          .attr("transform", "translate(" + xOffset + ", " + margin.top + ")")
			          .attr("text-anchor", "start")
			          .style("font-weight", 600)
			          .style("font-size", "17px")
			          // .style("font-weight", "bold")
			          .text(d.name);

svg.append("text")
			          .attr("class", "tooltip")
			          .attr("x", xPosition-25)
			          .attr("y", yPosition-64)
			          .attr("transform", "translate(" + xOffset + ", " + margin.top + ")")
			          .attr("text-anchor", "start")
			          // .style("font-weight", 400)
			          .style("font-size", "15.5px")
			          .text(d.artist);

svg.append("text")
			          .attr("class", "tooltip")
			          .attr("x", xPosition-25)
			          .attr("y", yPosition-43)
			          .attr("transform", "translate(" + xOffset + ", " + margin.top + ")")
			          .attr("text-anchor", "start")
			          .style("font-size", "12px")
			          .text("Appearances: " + d.freq);

svg.append("text")
			          .attr("class", "tooltip")
			          .attr("x", xPosition-25)
			          .attr("y", yPosition-28)
			          .attr("transform", "translate(" + xOffset + ", " + margin.top + ")")
			          .attr("text-anchor", "start")
			          .style("font-size", "12px")
			          .text("Unique Words: " + d.vocab);

})
	        	.on("mouseout", function(d) {

d3.selectAll(".tooltip").remove();

d3.selectAll(".legend") 
		     		  .transition()
		     		  .delay(700)
		     		  .duration(100)
		     		  .ease(d3.easeLinear)
		     		  .style("opacity", 1);

d3.selectAll(".legendC") 
		     		  .transition()
		     		  .delay(700)
		     		  .duration(100)
		     		  .ease(d3.easeLinear)
		     		  .style("opacity", 0.7);

d3.selectAll(".circles")
		      //   	   .style("stroke-width", 0)
		      //   	   .style("fill", function(d) {
					   // 		return d3.interpolateOranges(colorScale(d.freq));
					   // })
					   .attr("r", function(d) {
					   		return rScale(d.freq);
					   })
					   .style("fill", "rgb(255,165,0)")
					   .style("opacity", 0.6);

});

</script>
</body>

Updated missing url https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js

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

https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js