Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on Aug 20th, 2012  |  syntax: None  |  size: 3.61 KB  |  hits: 3  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html >
  3. <head>
  4.     <script type="text/javascript" src="http://github.com/mbostock/d3/raw/v1.8.2/d3.js"></script>
  5. </head>
  6. <body>
  7. <div id="vis_div_id1" style="position:absolute;"></div>
  8. <div id="vis_div_id2" style="position:absolute;left:500px"></div>
  9. <script type="text/javascript">
  10.  
  11.     var data = d3.range(10).map(Math.random);
  12.  
  13.     var w = 400,
  14.         h = 250,
  15.         barW = w / data.length-10,
  16.         barH = function(d, i){return h / d3.max(data)*d},
  17.         barX = function(d, i){return w / data.length * i;},
  18.         barY = function(d, i){return h - barH(d);};
  19.  
  20.     var visSVG = d3.select("#vis_div_id1")
  21.         .append("svg:svg")
  22.         .attr("width", w*1.5)
  23.         .attr("height", h*2);
  24.  
  25.     var barsSVG = visSVG.selectAll("g.bar")
  26.         .data(data)
  27.         .enter().append("svg:g")
  28.         .attr("class", "bar")
  29.         .attr("transform", function(d, i) { return "translate("+barX(d, i) + ", "+barY(d, i)+") rotate(0)";});
  30.  
  31.     barsSVG.append("svg:path")
  32.         .attr("stroke", "steelblue")
  33.         .attr("fill-opacity", 0.2)
  34.         .attr("fill", "steelblue")
  35.         .attr("d", function(d, i){return "M0 0L"+barW+" 0L"+barW+" "+barH(d, i)+"L0 "+barH(d, i)+" Z"})
  36.         .attr("width", barW)
  37.         .attr("height", barH);
  38.  
  39.     barsSVG.transition()
  40.         .delay(function(d, i){return 400-i*40})
  41.         .duration(1500)
  42.         .attr("transform", function(d, i) { return "translate("+(w/2) + ", "+(barY(d, i))+") rotate("+36*i+", "+barW/2+", "+barH(d, i)+")"});
  43.  
  44.     var outWidth = function(d, i){
  45.             return Math.tan(((360/data.length)/2)/360*(2*Math.PI))*(barH(d, i));
  46.         };
  47.  
  48.     var barH2 = function(d, i){return Math.sqrt((barW*barH(d, i))/Math.tan((36*Math.PI/180/2)))};
  49.     var barW2 = function(d, i){return Math.tan((36*Math.PI/180/2))*barH2(d,i)};
  50.     barsSVG.selectAll("path")
  51.         .transition()
  52.         .delay(1500)
  53.         .duration(500)
  54.         .attr("d", function(d, i){return "M"+(barW/2-barW2(d, i))+" "+(barH(d, i)-barH2(d, i))+
  55.             "L"+(barW/2+barW2(d, i))+" "+(barH(d, i)-barH2(d, i))+
  56.             "L"+barW/2+" "+barH(d, i)+
  57.             "L"+barW/2+" "+barH(d, i)+
  58.             "Z"});
  59.  
  60.     var visSVG = d3.select("#vis_div_id2")
  61.         .append("svg:svg")
  62.         .attr("width", w*1.5)
  63.         .attr("height", h*2);
  64.  
  65.     var barsSVG = visSVG.selectAll("g.bar")
  66.         .data(data)
  67.         .enter().append("svg:g")
  68.         .attr("class", "bar")
  69.         .attr("transform", function(d, i) { return "translate("+barX(d, i) + ", "+barY(d, i)+") rotate(0)";});
  70.  
  71.     barsSVG.append("svg:path")
  72.         .attr("stroke", "steelblue")
  73.         .attr("fill-opacity", 0.2)
  74.         .attr("fill", "steelblue")
  75.         .attr("d", function(d, i){return "M0 0L"+barW+" 0L"+barW+" "+barH(d, i)+"L0 "+barH(d, i)+" Z"})
  76.         .attr("width", barW)
  77.         .attr("height", barH);
  78.  
  79.     barsSVG.transition()
  80.         .delay(function(d, i){return 400-i*40})
  81.         .duration(1500)
  82.         .attr("transform", function(d, i) { return "translate("+(w/2) + ", "+(barY(d, i))+") rotate("+36*i+", "+barW/2+", "+barH(d, i)+")"});
  83.  
  84.     var outWidth = function(d, i){
  85.             return Math.tan(((360/data.length)/2)/360*(2*Math.PI))*(barH(d, i));
  86.         };
  87.  
  88.     var barH2 = function(d, i){return Math.sqrt((barW*barH(d, i))/Math.tan((36*Math.PI/180/2)))};
  89.     var barW2 = function(d, i){return Math.tan((36*Math.PI/180/2))*barH2(d,i)};
  90.  
  91.     barsSVG.selectAll("path")
  92.         .transition()
  93.         .delay(1500)
  94.         .duration(500)
  95.         .attr("d", function(d, i){return "M"+(barW/2-outWidth(d, i))+
  96.             " 0L"+(barW/2+outWidth(d, i))+" 0L"+barW/2+" "+barH(d, i)+
  97.             "L"+barW/2+" "+barH(d, i)+" Z"});
  98.  
  99.  
  100. </script>
  101. </body>
  102. </html>
create a new version of this paste RAW Paste Data