CS 725 Information Visualization - VI3

Christos Tsolakis

Just a few lines of code can make your graphs interesting (see scatterplot)
Very often it happens that transitions work but they are too fast, use the duration parameter wisely.
When using short duration transitions, use buttons to help users follow the animations

Live at /christost/f73384946e17e4b1b46a

forked from ChristosT's block: CS 725 Information Visualization - VI2

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>

<input   name="updateButton" 
         type="button" 
          value="Reset polygon" 
         	align="middle"
           onclick="Reset()" />
</div>
  <script>
    // how to have 2 d3 graphs in one page :
    //https://www.d3noob.org/2013/07/arranging-more-than-one-d3js-graph-on.html
      var w =420;
      var h= 400;
      var padding = 30;
			
    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.floor(Math.random() * xRange);
    		var newNumber2 = Math.floor(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]);
                     
    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]);
    
    // Color scale.
    var colorScale = d3.scale.ordinal()
    												.range([  "rgb(50%, 0%, 0%)",
 																	    "rgb(0%, 0%, 80%)",
 																	    "rgb(0%, 50%, 0%)" ]);
    //Create SVG element
    var svg0 = d3.select("body")
				.append("svg")
				.attr("width", w)
				.attr("height", h);

var Circles = svg0.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", 5);

//color/opacity code taken from:
    //https://strongriley.github.io/d3/ex/splom.html
 
  // var formatAsPercentage = d3.format(".1%"); 
    var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom")
                  .ticks(5);
                  //.tickFormat(formatAsPercentage);
    var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left")
                  .ticks(5);
    
    svg0.append("g")
        .attr("class","axis")
        .attr("transform","translate(0," + (h-padding) + ")")
        .call(xAxis);
			
    //Create Y axis
svg0.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis); 
    
    function Scatter(){
      
        Circles.transition() 
  			.duration(2000)
     		.attr("r" , function(d) {return rScale(d[1]*5);})
   			.style("fill", function(d) { return colorScale(d[0]); })
        .style("fill-opacity", .5);
      
    }
    
  //=========================================================  
   
   var svg = d3.select("body")
				.append("svg")
				.attr("width", w)
				.attr("height", h);
    
        var polygon= svg.append("svg:path")
            .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")
            .style("stroke-width", 2)
            .style("stroke", "blue")
            .style("fill", "white")
    				.attr("transform", "translate(" + 250 + "," + 66 + ")")

function Start()
    {
  			  polygon.transition()
    			 .duration(1500)
    			 .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")
    			.attr("transform", "translate(" + 250 + "," + 320 + ")") 
     			.style("fill","red")
        	.each("end", function() 
                {
      						svg.append("svg:circle")
                  	 .attr("cx",250)
                  		.attr("cy",320)
                  		.attr("r",200)
                  		.attr("fill","green")
                  		.transition()
                		  .duration(1500)
                  		.ease("linear")
                  	 	.attr("r",0)

});
    
    
    }
   //reset polygon to initial values 		
    function Reset()
    {
  				polygon.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")
            .style("stroke-width", 2)
            .style("stroke", "blue")
            .style("fill", "white")
    				.attr("transform", "translate(" + 250 + "," + 66 + ")")
    }

</script>

</body>

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