All examples By author By category About

keboice

Full window Github gist

Final Project: Motion Chart

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

<title>Motion Chart</title>
<style>
html {
	text-align: center;
}

body {
	padding: 0 20px 20px 20px;
	background: #fcfcfa;
  color: #333;
  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
  margin: 1em auto 4em auto;
  position: relative;
 
	
}

h1 {
	text-align: left;
	font-weight: normal;
font-size: 22px;
}

p.note {
	text-align: left;
	margin-top: -10px;
	font-size: 14px;
}
	
#chart {
	width: 960px;
  height: 406px;
  margin-left: -40px;  
}

.label{
	font: 14pt sans-serif;
}

text {
  font: 11px sans-serif;
}

.dot {
  fill-opacity: .7;
  transition: opacity 0.3s;
  
}

.dot:hover {
	fill-opacity: 1;
	transition: opacity 0.3s;
}

.active {
  fill-opacity: 1;
  stroke-width: 1;
  stroke-opacity: 1;
}

.legend {
	opacity: .7;
	transition: opacity 0.3s;
}

.axis path {
	display: none;
}

.axis line {
  stroke-width:1px;
  stroke: #ccc;
  stroke-dasharray: 2px 2px;
}

.label {
  fill: #666;
}

.year.label {
  font: 500 100px "Helvetica Neue"; 
  fill: #ddd;
}

.year.label.active {
  fill: #aaa;
}

.overlay {
  fill: none;
  pointer-events: all;
  cursor: ew-resize;
}

input[type=range] {
  -webkit-appearance: none;
  margin: 10px 0;
  width: 100%;
}
input[type=range]:focus {
  outline: none;
}
input[type=range]::-webkit-slider-runnable-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  background: #ddd;
  border-radius: 25px;
  border: 0px solid #000101;
}
input[type=range]::-webkit-slider-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 7px;
  background: #337ab7;
  cursor: pointer;
  -webkit-appearance: none;
  margin-top: -4.6px;
}
input[type=range]:focus::-webkit-slider-runnable-track {
  background: #ddd;
}
input[type=range]::-moz-range-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  box-shadow: 0px 0px 0px #ccc, 0px 0px 0px #ccc;
  background: #ddd;
  border-radius: 25px;
  border: 1px solid #ccc;
}
input[type=range]::-moz-range-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #2e6da4;
  height: 20px;
  width: 20px;
  border-radius: 7px;
  background: #337ab7;
  cursor: pointer;
}
input[type=range]::-ms-track {
  width: 100%;
  height: 10px;
  cursor: pointer;
  animate: 0.2s;
  background: transparent;
  border-color: transparent;
  border-width: 39px 0;
  color: transparent;
  float: right;
}
input[type=range]::-ms-fill-lower {
  background: #ddd;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-fill-upper {
  background: #ddd;
  border: 0px solid #000101;
  border-radius: 50px;
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
}
input[type=range]::-ms-thumb {
  box-shadow: 0px 0px 0px #000000, 0px 0px 0px #0d0d0d;
  border: 0px solid #000000;
  height: 20px;
  width: 20px;
  border-radius: 7px;
  background: #337ab7;
  cursor: pointer;
}
input[type=range]:focus::-ms-fill-lower {
  background: #ddd;
}

input[type=range]:focus::-ms-fill-upper {
  background: #ddd;
}

button {
	background-color: rgb(53, 135, 212);
	padding: 3px 9px;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.5;
	float: left;
	vertical-align: middle;
	cursor: pointer;
	display: inline-block;
	color: #fff;
	background: #337ab7;
	border: 1px solid #2e6da4;
	border-radius: 4px;
	}

.controls {
	width: 700px;
	display: block;
	float: left;
	padding: 0;
	margin: 0;
	height: 25px;
}

.controls div {
	display: inline-block;
	float: right;
	margin-left: 10px;
	width: 635px;
	padding: 0;
	height: 25px;
}

.tooltip {
    background-color: #f7f7f7;
    padding: 3px 12px;
    font-family: sans-serif;
    border: 1px solid #bbbbbb;
    box-shadow: 1px 1px 4px #bbbbbb;
  }
  
.tooltip_title {
    font-weight: bold;
    font-size: 14px;
    margin: 5px 0;
    max-width: 300px;
    word-wrap: normal;
	padding: 5px 0;
	margin: -3px -12px 5px -12px;
	color: #fff;
  }
  
  pre {
	  font-family: Gotham, "Helvetica Neue", Helvetica, Arial, sans-serif;
	  font-size: 12px;
  }
  
  .tooltip_body {
    font-weight: normal;
    margin: 5px 0;
	text-align: left;
  }

</style>

<h1>2000-2007 CSU Comparisons: Graduation Rate, Achievement Gap, and % Pell</h1>
<p class="note">Circle Size = % Pell</p>
<p id="chart"></p>

</div>

$(document).ready(function()	{
	// Various accessors that specify the four dimensions of data to visualize.
	function x(d) { return d.gradrate; }
	function y(d) { return d.gap; }
	function radius(d) { return d.pell; }
	function color(d) { return d.campus; }
	function key(d) { return d.campus; }

// Chart dimensions.
	var margin = {top: 19.5, right: 200, bottom: 19.5, left: 39.5},
		width = 860 - margin.right,
		height = 400 - margin.top - margin.bottom;

// Various scales. These domains make assumptions of data, naturally.
	var xScale = d3.scale.linear().domain([10, 80]).range([0, width]),
		yScale = d3.scale.linear().domain([-15, 25]).range([height, 0]),
		radiusScale = d3.scale.sqrt().domain([0, 75]).range([0, 25]),
		colorScale = d3.scale.category20();
		//strokeScale = d3.scale.linear().domain([25, 80]).range([1,6]);
		//colorScale = d3.scale.linear()
    	//	.range(["#9e0142","#fdae61","#66c2a5","#3288bd","#5e4fa2"])
  		//	.domain([70, 55, 35, 15, 5])
    	//	.interpolate(d3.interpolateHsl);
	var formatPercent = d3.format(".0%");
	var excluded_groups = [];
	
	// The x & y axes.
	var xAxis = d3.svg.axis().orient("bottom").scale(xScale).ticks(12).tickFormat(function(d) { return parseInt(d, 10) + "%"; }).tickSize(-height),
		yAxis = d3.svg.axis().scale(yScale).orient("left").tickFormat(function(d) { return parseInt(d, 10) + "%"; }).tickSize(-width);

// Create the SVG container and set the origin.
	var svg = d3.select("#chart").append("svg")
		.attr("width", width + margin.left + margin.right)
		.attr("height", height + margin.top + margin.bottom)
		.append("g")
		.attr("transform", "translate(" + margin.left + "," + margin.top + ")");
		
	//Tooltip
	var tooltip = d3.select("body")
		.append("div")
		.attr("class", "tooltip")
		.style("position", "absolute")
		.style("z-index", "10")
		.style("visibility", "hidden");

// Add the x-axis.
	svg.append("g")
		.attr("class", "x axis")
		.attr("transform", "translate(0," + height +")")
		.call(xAxis);

// Add the y-axis.
	svg.append("g")
		.attr("class", "y axis")
		.call(yAxis);

// Add an x-axis label.
	svg.append("text")
		.attr("class", "x label")
		.attr("text-anchor", "end")
		.attr("x", width)
		.attr("y", height - 6)
		.text("Graduation Rate");

// Add a y-axis label.
	svg.append("text")
		.attr("class", "y label")
		.attr("text-anchor", "end")
		.attr("y", 6)
		.attr("dy", ".75em")
		.attr("transform", "rotate(-90)")
		.text("Achievement Gap");

// Add the year label; the value is set on transition.
	var label = svg.append("text")
		.attr("class", "year label")
		.attr("text-anchor", "end")
		.attr("y", height - 35)
		.attr("x", width)
		.text(2000);
	
	// Load the data. 
	d3.json("campus.json", function(error, data) {
	
		if (error) return console.warn(error);
		console.log(data);

// A bisector since many nation's data is sparsely-defined.
		var bisect = d3.bisector(function(d) { return d[0]; });
		
		
		// Add a dot per nation. Initialize the data at 1800, and set the colors.
		var dot = svg.append("g")
			.attr("class", "dots")
			.selectAll(".dot")
			.data(interpolateData(2000))
			.enter().append("circle")
			.attr("class", "dot")
			.attr("id", function(d) { return "tag" + d.campus.replace(/\s+/g, '') })
			.style("fill", function(d) { return colorScale(color(d)); })
			.style("stroke", function(d) { return colorScale(color(d)); })
			.call(position)
			.sort(order)
			
			
			 .on("mouseover", function(d) {
				tooltip.html("");
				tooltip.append("h3").attr("class", "tooltip_title")
				.style("background-color", colorScale(color(d)))
				tooltip.append("pre").attr("class", "tooltip_body");
				tooltip.select(".tooltip_title")
				.text(d.campus);
				
				tooltip.select(".tooltip_body")
				.text(
					//"Year: " + year + "\n" +
					"Achievement Gap: " + "\u00A0\u00A0" + Math.round(d.gap) + "%\n" + 
					"Graduation Rate: " + "\u00A0\u00A0" + Math.round(d.gradrate) + "%\n" + 
					"Total FTF Freshmen: " + "\u00A0\u00A0" + Math.round(d.total) + "\n" +
					"Percent Pell: " + "\u00A0\u00A0" + Math.round(d.pell) + "%\n" 
					);

return tooltip.style("visibility", "visible");
					})
					
				.on("mousemove", function() {
					return tooltip.style("top", (d3.event.pageY-52) + "px").style("left", (d3.event.pageX+25) + "px");
				})
				
				.on("mouseout", function() {
					return tooltip.style("visibility", "hidden");
				});

$("button").on("click", function() {
			update();
		});
		
		
		$("#slider").on("change", function(){
			svg.transition().duration(0);
			displayYear($("#slider").val());
		});
	
		var update = function() {  
			// Add a dot per nation. Initialize the data at 1800, and set the colors.
			d3.selectAll(".dot")
			.call(position)
			.sort(order);

// Add a title.
			dot.append("title")
				.text(function(d) { return d.campus; });

// Start a transition that interpolates the data based on year.
			svg.transition()
				.duration(6000)
				.ease("linear")
				.tween("year", tweenYear)
		};//update function

// Positions the dots based on data.
		function position(dot) {
			 dot .attr("cx", function(d) { return xScale(x(d)); })
				.attr("cy", function(d) { return yScale(y(d)); })
				.attr("r", function(d) { return radiusScale(radius(d)); });
		}

// Defines a sort order so that the smallest dots are drawn on top.
		function order(a, b) {
			return radius(b) - radius(a);
		}

// Tweens the entire chart by first tweening the year, and then the data.
		// For the interpolated data, the dots and label are redrawn.
		function tweenYear() {
			var year = d3.interpolateNumber(2000, 2007);
			return function(t) { displayYear(year(t)); };
		}

// Updates the display to show the specified year.
		function displayYear(year) {
			dot.data(interpolateData(year), key).call(position).sort(order);
			label.text(Math.round(year));
			$("#slider").val(Math.round(year));
			$(".tooltip_title").text(Math.round(year));
		}

// Interpolates the dataset for the given (fractional) year.
		function interpolateData(year) {
			return data.map(function(d) {
			return {
				campus: d.campus,
				pell: interpolateValues(d.pell, year),
				gradrate: interpolateValues(d.gradrate, year),
				gap: interpolateValues(d.gap, year),
				total: interpolateValues(d.total, year),
				};
			});
		}

// Finds (and possibly interpolates) the value for the specified year.
		function interpolateValues(values, year) {
			var i = bisect.left(values, year, 0, values.length - 1),
				a = values[i];
			if (i > 0) {
			var b = values[i - 1],
				t = (year - a[0]) / (b[0] - a[0]);
			return a[1] * (1 - t) + b[1] * t;
				}
			return a[1];
		}
	
		var legend = svg.selectAll(".legend")
			.data(data)
			.enter().append("g")
			.attr("class", "legend")
			.attr("transform", function(d, i) { return "translate(6," + i * 14 + ")"; });
		
		
		legend.append("rect")
			.attr("x", width)
			.attr("width", 12)
			.attr("height", 12)
			.style("fill", function(d) { return colorScale(color(d)); })
			//.style("opacity", .5);

legend.append("text")
			.attr("x", width + 16)
			.attr("y", 6)
			.attr("dy", ".35em")
			.style("text-anchor", "start")
			.text(function(d) { return d.campus; });
			
		legend.on("mouseover", function(d) {
			d3.selectAll(".legend")
				.style("opacity", 0.1);
			d3.select(this)
				.style("opacity", 1);
		  	d3.selectAll(".dot")
				.style("opacity", 0.1)
			d3.selectAll("#tag"+d.campus.replace(/\s+/g, ''))
				.style("opacity", 1);
			})
			
		.on("mouseout", function(type) {
			d3.selectAll(".legend")
				.style("opacity", .7);
			d3.selectAll(".dot")
				.style("opacity", 1);
		});

/*legend.on("click", function(d){
			// Determine if current line is visable
			var active = d.active ? false : true,
 			newClass = active ? "dot active" : "dot inactive";
	
			// Hide or show the elements based on the ID
			d3.selectAll("#tag"+d.campus.replace(/\s+/g, ''))
				.attr("class", newClass)
				
			d3.select(this)
				//.style("fill", function() {
					//if (active) {return "red"}
				//})
				.style("opacity", function() {
					if (active) {return "1"}
				})
				
			// Update whether or not the elements are active
			console.log(active)
			d.active = active
			console.log(active)
			
		})*/

});//data function
	
});//ready

</script>

</html>

Modified http://d3js.org/d3.v3.min.js to a secure url

Updated missing url https://raw.github.com/fryn/html5slider/gh-pages/html5slider.js to https://cdn.jsdelivr.net/gh/fryn/html5slider/gh-pages/html5slider.js

Modified http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js to a secure url

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

https://raw.github.com/fryn/html5slider/gh-pages/html5slider.js

https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js