VI3

Name: Meysam Abolghasemi

Three things that I have learnt:

How to generate scatterplot with scale and x and y axis.
How to animate the objects using d3 transition.
How to create path in SVG.

<html>
  
  <head>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.js"></script>
	<style>
		.axis path,
		.axis line {
			fill: none;
			stroke: black;
			shape-rendering: crispEdges;
		}

.axis text {
			font-family: sans-serif;
			font-size: 11px;
		}
		.chart2 {
			position: relative;
		}
		button {
			position: absolute;
			top:10;
			left: 400;
		}
	</style>
  </head>
  <body>
	<div class="chart1">
	
	</div>
	<div class="chart2">
		<button type="button"onclick="transit();">Transit</button>
	</div>
    <script>
		var svg2 = d3.select(".chart2")
            .append("svg")
            .attr("width", 500)
            .attr("height", 300);
		var star = svg2.append("path")
			.attr("transform", "translate(100,120)rotate(0)")
			.style("stroke", "blue")
			.style("fill", "none")
			.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");
		function transit() {
		var button = d3.select("button");
		if(button.text() =="Transit") { 
			star
			.style("fill", "white")
			.transition()
			.duration(1000)
			.style("fill", "blue")
			.attr("transform", "translate(440,120)rotate(180)")
			.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")
			.each("end",function() { 
			svg2.append("circle")
			.attr("cx", 440)
			.attr("cy", 120)
			.attr("r",250)
			.style("fill", "green")
			.style("opacity", "0")
			.transition()
			.duration(700)
			.attr("r",0)
			.style("fill", "yellow")
			.style("opacity",1)
			.remove();});
			d3.select("button").text("Reset");
		} else {
			d3.select("button").text("Transit");
			star
			.transition()
			.duration(1000)
			.attr("transform", "translate(100,120)rotate(0)")
			.style("stroke", "blue")
			.style("fill", "none")
			.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");
		}
		
		};
		/*
		button.on("click", function() {
			mySquare.transition().attr("x",320);
		});*/
		var w = 500, h = 300;
		var padding = 30;
		//Dynamic, random dataset
		var dataset = [];
		var numDataPoints = 50;
		var xRange = Math.random() * 1000;
		var yRange = Math.random() * 1000;
		for (var i = 0; i < numDataPoints; i++) {
			var newNumber1 = Math.round(Math.random() * xRange);
			var newNumber2 = Math.round(Math.random() * yRange);
			dataset.push([newNumber1, newNumber2]);
		}
		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]);
		//Create SVG element
		var svg = d3.select(".chart1")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
		svg.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]);
		   });
		/*
		svg.selectAll("text")
		   .data(dataset)
		   .enter()
		   .append("text")
		   .text(function(d) {
				return d[0] + "," + d[1];
		   })
		   .attr("x", function(d) {
				return xScale(d[0]);
		   })
		   .attr("y", function(d) {
				return yScale(d[1]);
		   })
		   .attr("font-family", "sans-serif")
		   .attr("font-size", "11px")
		   .attr("fill", "red");
		   */
		//var formatAsPercentage = d3.format(".1%");
		var xAxis = d3.svg.axis()
			.scale(xScale)
			.orient("bottom")
			.ticks(5);
		//xAxis.tickFormat(formatAsPercentage);
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(0," + (h - padding) + ")")
			.call(xAxis);
		//Define Y axis
		var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left")
                  .ticks(5);
		//Create Y axis
		svg.append("g")
			.attr("class", "axis")
			.attr("transform", "translate(" + padding + ",0)")
			.call(yAxis);
		   
    </script>
  </body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.14/d3.js