wk4

Name: Slobodan Milanko

Below are the three cool things I learned:
- When creating transitions, we can chan them by using the end callback function
- We can apply scales to our graphs, so that our values do not get too big and fall off the screen
- We can use a multi-dimensional array to create data for a scatter plot, where each entry in the array, is its own array of x and y
- in D3, we dont have to just grab onto the body, by using the select. We can grab onto the div, by referencing its id for example.

forked from smilanko's block: wk4

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
    svg { width:100%; height: 100% }
    
    .custom_divs {
      border: 2px solid blue;
      width: 900px;
      height: 550px;
    }
    
			.axis path,.axis line {
				fill: none;
				stroke: black;
				shape-rendering: crispEdges;
			}
			
			.axis text {
				font-family: sans-serif;
				font-size: 11px;
			}
    
  </style>
</head>

<body>
  
  <p style="margin-top: 10px">Below is the complete plot by following Murray's example</p>
  <div id="div1" class="custom_divs"></div>
  
  <p>Below is the complete transiotion example</p>
  <div id="div2" class="custom_divs">
    <button id="transiotionButton" style="margin-top: 10px; margin-left: 500px;">Click me</button>
  </div>
  
  <script>
    		// possible fix for the blocks rendering
    		d3.select(self.frameElement).style("height", "1300px"); 
    
        var w = 900;
        var h = 500;
        var padding = 80;

var dataset = [];				
        var numDataPoints = 50;			
        var xRange = Math.random() * 500;	
        var yRange = Math.random() * 300;	
        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]);
        var format = d3.format(".1%");
        var xAxis = d3.svg.axis().scale(xScale).orient("bottom")
                    .ticks(5).tickFormat(format);
        var yAxis = d3.svg.axis().scale(yScale).orient("left")
                    .ticks(5).tickFormat(format);
        var svg = d3.select("#div1").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]);
            }).style("fill", function(d) {
              if (d[1] > 150) { 
                return "red";
              } else if (d[1] > 100) {
                return "blue";
              } else {
                return "black";
              }
            });

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

svg.append("g").attr("class", "axis")
          .attr("transform", "translate(" + padding + ",0)").call(yAxis);

</script>
  
    <script>
			var transiotionSvg = d3.select("#div2").append("svg").attr("width", w).attr("height", h);
      var button = d3.select("#transiotionButton");
      
      var myCircle= transiotionSvg.append("circle").attr("cx", 350).attr("cy", 210).attr("r", 80).attr("fill", "blue").attr("fill-opacity", 0);
      var mySquare=transiotionSvg.append("rect").attr("x",60).attr("y",60).attr("width",60).attr("height",60);
      
      // transition
      button.on("click", function() {
        mySquare
          .transition()
        	.attr("fill", "blue")
          .attr("x",320) 
        	.attr("y", 180);
        myCircle.transition()
        	.duration(1000)
        	.attr("fill", "yellow")
          .attr("fill-opacity", 0.5)
        	.attr("r", 200)
          .each("end",function() { 
            d3.select(this).      
              transition()
            		.delay(0)
            		.duration(500)
                .attr("fill-opacity", 0);  
                                  
           });
        
      })
      
      
    </script>
  
  
  <div>
    
  </div>
</body>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js