D3 Examples - ArtExplosion

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<link href='https://fonts.googleapis.com/css?family=Roboto:400,300,100' rel='stylesheet' type='text/css'>
<style>
body {
    background-color: black;
    font-family: 'Roboto';
    font-weight: 100;
}
​
</style>
<style type="text/css">
​
text {
    fill: white;
    letter-spacing: 2em;
}
​
/*For Image of Red/Dark grey */
/*.st0{clip-path:url(#SVGID_2_);}
.st1{fill:#B0B3AD;}
.st2{fill:#E1E8E6;}
.st3{fill:#9DA19B;}
.st4{fill:#C7CDC9;}
.st5{fill:#19222F;}
.st6{fill:#9D2D26;}*/
​
/*For Image of Red/Pink Road */
.st0{fill:#E1E9E2;}
.st1{fill:#D6DDD2;}
.st2{fill:#452A29;}
.st3{fill:#784848;}
.st4{fill:#BB4946;}
.st5{fill:#D4928F;}
​
/*yellow*/
/*.st0{fill:#A8ABB4;}
.st1{fill:#B1B5C0;}
.st2{fill:#9FA2AB;}
.st3{fill:#846A2D;}
.st4{fill:#AD9730;}
.st5{fill:#ABA373;}*/
​
</style>
</head>
<body>
<script src="//d3js.org/d3.v3.min.js"></script>
​
<svg width="960" height="960"></svg>
<script>
​
​
​
var nodes = [],
    links = [],
    width = 1500,
    height = 1500;
​
    var path = d3.geo.path(),
        force = d3.layout.force().size([width, height]);
    //     var svg = d3.select("body").append("svg")
    // .attr("width", width)
    // .attr("height", height);
​
// var image = "redPink.svg"
var image = "yellow.svg"
​
d3.xml(image, "image/svg+xml", function(error, xml) {
  if (error) throw error;
  var svgNode = xml
                .getElementsByTagName("svg")[0];
​
    console.log(svgNode);
​
​
  draw(svgNode);
​
​
​
});
​
​
function draw(svgNode) {
​
​
​
    var paths = d3.select(svgNode).selectAll("path");
​
    var arrPaths = [];
​
​
    paths[0].forEach(function(s){
        var me = d3.select(s);
        var feature = {};
​
        arrPaths.push(me.node());
    })
​
​
​
    var svg = d3.select("svg").attr("width","3500").attr("height","2000");
​
​
​
svg.append("text")
    .text("Click")
    .attr("x",200)
    .attr("y",20);
​
​
​
        var donePaths =  svg.selectAll("path")
                      .data(arrPaths)
                     .enter().append("path")
                      .attr("d",function(d){
                          var me = d3.select(d);
                        //   console.log(d,"rawD");
                          // console.log(me.attr("d"));
                          return me.attr("d")
                      })
                      .attr("class",function(d){
                          return d.classList[0];
​
                      });
​
                      features = [];
​
​
​
var flager = 0;
// svg.on("click",click);
​
    function click(){
​
        if(flager <= 10){
            donePaths
               .transition()
               // .ease("elastic-out")
               .ease("cubic-out")
               .delay(function(d,i){return (Math.random() * 400) * 20})
               // .duration(500).attr("transform",function(d){return "translate(0,-1000)" + " scale(" + (Math.random()* (5 - .1) + .1) + ")"});
               // node.transition()
               .duration(5500)
               .attr("transform",function(d){
                   // return "translate(" + (Math.floor(Math.random() * 501) - 500) + ",-2700)" +
                    return "translate(" + (0) + ", 0)" +
                   " scale(" + (Math.random()* (20 - .001) + .001) + ")"
                   // "rotate(-180, " + d[0] + ", " + d[1] + ")";
               });
               flager++;
        }
​
    }
    setTimeout(function(){ click(); }, 1000);
​
}
​
​
​
function getMyCentroid(bbox) {
    console.log(bbox);
    return [bbox.x + bbox.width/2, bbox.y + bbox.height/2];
}
​
​
​
​
​
</script>
​
    