VI3

#Juliette Pardue

##Learned from D3 Tutorial

For scatterplots, how to use the radius attribute to encode size.
Using scales to specify a valid range where data values can be mapped to. So all data values will fall into the specified range after the mapping or normalizing has been applied.
How to format aesthetically pleasing axis as true values or percentages. However, I preferred the true values for this example since the percentages didn't make sense.
How to create transitions by specifying the ending attributes of the object and the transition effects.

<!DOCTYPE html>
<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
			.axis path, .axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}

.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
			
			svg {overflow:hidden;}
			#button {display:inline-block;}
			.btn {display:inline-block;*display:inline;/* IE7 inline-block hack */ *zoom:1;padding:4px 10px 4px;margin-bottom:0;font-size:13px;line-height:18px;color:#333333;text-align:center;text-shadow:0 1px 1px rgba(255,255,255,0.75);vertical-align:middle;background-color:#f5f5f5;background-image:-moz-linear-gradient(top,#ffffff,#e6e6e6);background-image:-ms-linear-gradient(top,#ffffff,#e6e6e6);background-image:-webkit-gradient(linear,0 0,0 100%,from(#ffffff),to(#e6e6e6));background-image:-webkit-linear-gradient(top,#ffffff,#e6e6e6);background-image:-o-linear-gradient(top,#ffffff,#e6e6e6);background-image:linear-gradient(top,#ffffff,#e6e6e6);background-repeat:repeat-x;filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#ffffff',endColorstr='#e6e6e6',GradientType=0);border-color:#e6e6e6 #e6e6e6 #bfbfbf;border-color:rgba(0,0,0,0.1) rgba(0,0,0,0.1) rgba(0,0,0,0.25);filter:progid:dximagetransform.microsoft.gradient(enabled=false);border:1px solid #cccccc;border-bottom-color:#b3b3b3;-webkit-border-radius:4px;-moz-border-radius:4px;border-radius:4px;-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 1px 0 rgba(255,255,255,0.2),0 1px 2px rgba(0,0,0,0.05);cursor:pointer;*margin-left:.3em;} .btn:hover,.btn:active,.btn.active,.btn.disabled,.btn[disabled] { background-color:#e6e6e6;} .btn:active,.btn.active { background-color:#cccccc \9;} .btn:first-child { *margin-left:0;} .btn:hover { color:#333333;text-decoration:none;background-color:#e6e6e6;background-position:0 -15px;-webkit-transition:background-position 0.1s linear;-moz-transition:background-position 0.1s linear;-ms-transition:background-position 0.1s linear;-o-transition:background-position 0.1s linear;transition:background-position 0.1s linear;} .btn:focus { outline:thin dotted #333;outline:5px auto -webkit-focus-ring-color;outline-offset:-2px;} .btn.active,.btn:active { background-image:none;-webkit-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);-moz-box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);box-shadow:inset 0 2px 4px rgba(0,0,0,0.15),0 1px 2px rgba(0,0,0,0.05);background-color:#e6e6e6;background-color:#d9d9d9 \9;outline:0;} .btn.disabled,.btn[disabled] { cursor:default;background-image:none;background-color:#e6e6e6;opacity:0.65;filter:alpha(opacity=65);-webkit-box-shadow:none;-moz-box-shadow:none;box-shadow:none;} .btn-mini { padding:2px 6px;font-size:11px;line-height:14px;}}
			svg {border:1px solid black;}
		</style>
	</head>
	<body style="text-align:center;margin-top:5px;">
		<div id="chart_a" style="width:450px;height:250px;display:inline-block;text-align:center;"></div>
		</br>
		<script src="https://d3js.org/d3.v3.min.js"></script>
		<script type="text/javascript">
			//Width and height
			var w = 450;
			var h = 250;
			var padding = 30;

//Dynamic, random dataset
			var dataset = [];			//Initialize empty array
			var numDataPoints = 50;			//Number of dummy data points to create
			var xRange = Math.random() * 1000;	//Max range of new x values
			var yRange = Math.random() * 1000;	//Max range of new y values
			for (var i = 0; i < numDataPoints; i++) {			//Loop numDataPoints times
				var newNumber1 = Math.round(Math.random() * xRange);	//New random integer
				var newNumber2 = Math.round(Math.random() * yRange);	//New random integer
				dataset.push([newNumber1, newNumber2]);			//Add new number to array
			}

//Create scale functions
			var xScale = d3.scale.linear()
				.domain([0, d3.max(dataset, function(d) { return d[0]; })])
				.range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
				.domain([0, d3.max(dataset, function(d) { return d[1]; })])
				.range([h - padding, padding]);

var rScale = d3.scale.linear()
				.domain([0, d3.max(dataset, function(d) { return d[1]; })])
				.range([2, 5]);

//var formatAsPercentage = d3.format(".1%");

//Define X axis
			var xAxis = d3.svg.axis()
				.scale(xScale)
				.orient("bottom")
				.ticks(5)
				/*.tickFormat(formatAsPercentage)*/;

//Define Y axis
			var yAxis = d3.svg.axis()
				.scale(yScale)
				.orient("left")
				.ticks(5)
				/*.tickFormat(formatAsPercentage)*/;

//Create SVG element
			var svg_a = d3.select("#chart_a")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

//Create circles
			svg_a.selectAll("circle")
				.data(dataset)
				.enter()
				.append("circle")
				.attr("cx", function(d) {
					return xScale(d[0]);
				})
				.attr("cy", function(d) {
					return yScale(d[1]);
				})
				.attr("r", function(d) {
					return rScale(d[1]);
				});

//Create X axis
			svg_a.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(0," + (h - padding) + ")")
				.call(xAxis);

//Create Y axis
			svg_a.append("g")
				.attr("class", "axis")
				.attr("transform", "translate(" + padding + ",0)")
				.call(yAxis);
		</script>
		
		<div id="chart_b" style="width:500px;height:250px;display:inline-block;text-align:center;">
			<svg xmlns="https://www.w3.org/2000/svg" version="1.1" width="500" height="200"></svg>
			<button class="btn btn-mini" id="button">Transition</button>
		</div>
		
		<script>
			data={
				title:"All combined!",
				shapes:[{
					type:"path",
					init:{
						attr:{
							"d":"m 0,-60 l 20,40 l 40,20 l -40,20 l -20,40 l -20,-40 l -40,-20 l 40,-20 z","transform":"translate(60,120)"
						},
						style:{stroke:"blue",fill:"white"}
					},
					transition:{
						attr:{
						"d":"m 0,-60 l 40,20 l 20,40 l -20,40 l -40,20 l -40,-20 l -20,-40 l 20,-40 z",
						"transform":"translate(440,120) rotate(180)"
						},
						style:{stroke:"white",fill:"blue"},
						next:{
							type:"circle",
							attr:{cx:440,cy:120,r:250},
							style:{fill:"green",opacity:0},
							next:{
								attr:{r:0},
								style:{fill:"yellow",opacity:1},
								next:{remove:true}
							}
						}
					}
				}]
			};
			
			var svg_b=d3.select("#chart_b").select("svg");
			svg_b.selectAll(".vline").data(d3.range(26)).enter()
				.append("line")
				.attr("x1",function(d){return d*20;})
				.attr("x2",function(d){return d*20;})
				.attr("y1",function(d){return 40;})
				.attr("y2",function(d){return 250;})
				.style("stroke","#eee");
			svg_b.selectAll(".vline").data(d3.range(2,13)).enter()
				.append("line")
				.attr("y1",function(d){return d*20;})
				.attr("y2",function(d){return d*20;})
				.attr("x1",function(d){return 0;})
				.attr("x2",function(d){return 500;})
				.style("stroke","#eee");
			
			var button=d3.select("#button");
			if (data.button==="none") {button.remove();}
			var mode=0;
			var modes=[{state:"init",title:"Transition"},{state:"transition",title:"Reset"}];
			
			d3.select("#title").html(data.title);
			data.shapes.forEach(function(d,i) {
				// here we create shapes according to the parameters of the data file.
				var myshape=svg_b.append(d.type).attr("id","s"+i); // taking into account the type of the shape, 
				var state=d.init; // noting that these are the initial state.
				set(myshape,state);
			})
			
			button.on("click",function() {
				mode=1-mode;
				button.html(modes[mode].title);
				data.shapes.forEach(change)
			});
			
			function change(d,i){
				var state=d[modes[mode].state];
				var myshape=svg_b.select("#s"+i).transition().duration(state.duration||1000).delay(state.delay||0).ease(state.ease||"cubic-in-out");
				// so transition if going through a transition, reset if going through a reset
				set(myshape,state);
			}
			
			function set(selection,state,createTransition) {
				if(state.remove) {
					selection.remove();return;
				}
			
				d3.keys(state.attr).forEach(function(a) {
					selection.attr(a, state.attr[a]); // all of its attributes
				});
				if (state.text) {
					selection.text(state.text);
				};
				d3.keys(state.style).forEach(function(s) {
					selection.style(s, state.style[s]); // and all of its style properties
				});
			
				if(state.next)	{
					var next=state.next;
					if (next.type) {
						selection.each("end",function() {
							set(svg_b.append(next.type),next,true); // we are creating a new shape	
						})
					}
					else {
						if(createTransition) {
							selection=selection.transition().duration(0);
						}
						selection.each("end",function() {
							set(d3.select(this).transition().duration(next.duration||1000).delay(next.delay||0).ease(state.ease||"cubic-in-out"),next);
						});
					}
				}
			}
		</script>
	</body>
</html>

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

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