D3 Examples

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

xxxxxxxxxx
 
<!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>
​
    