mukhtyar/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Diwali Greeting

  
## diwali_lamp.svg

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              diwali_lamp.svg
            
          
        Loading

      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
      
    
## index.html
<!doctype html>
<html>
<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <title>Happy D3iwali</title>
  <!-- Js -->
  <script src="http://d3js.org/d3.v3.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
  <link href="http://fonts.googleapis.com/css?family=Arizonia" rel="stylesheet" type="text/css">
  <!-- CSS -->
  <link rel="stylesheet" href="style.css">
</head>
<body>
  <!-- HTML -->
  <!-- inspired by http://jsfiddle.net/christopheviau/XnG6r/-->
  <!-- inspired by https://gist.github.com/mbostock/1345853-->
  <div id="body">
    <div class="centered">
      <h1 id="greeting">Wishing you a very <br/>
        Happy D<span id="d3text">3</span>iwali
        <br/> and a prosperous New Year!
      </h1>
      <div id="lamp"></div>
    </div>

  <!-- Js -->
  <script type="text/javascript" src="index.js">
  </script>
</body>
</html>

## index.js
 var dataset = [ 5, 10, 15, 20, 25];

//Width and height
var w = 800;
var h = 200;

//Create SVG Element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h);

//Import the plane
d3.xml("diwali_lamp.svg", "image/svg+xml", function(xml) {
  var importedNode = document.importNode(xml.documentElement, true);
  svg.selectAll("g")
    .data(dataset)
    .enter()
    .append("g")
    .attr("transform", function(d, i){
        return "translate(" + (i * (w / dataset.length)) + ","
            + (h - 200) + ")"
            +"scale("+ 0.2 +")";
    })
    .each(function(d, i){
        var plane = this.appendChild(importedNode.cloneNode(true));
        d3.select(plane).select("g")
            .transition()
            .duration(1000)
            .each(slide);
    });

    function slide() {
      var flame = d3.select(this);
      var x = Math.random() * (0.40 - 0.38) + 0.38;
      var y = Math.random() * (0.49 - 0.48) + 0.48;
      (function repeat() {
        //Original matrix - 0.49034383,0,0,0.38263293,-259.96,-418.88496
/*        flame = flame.transition()
            .attr("transform", "matrix(0.50,0.01,0,0.38,-265,-418)")
          .transition()
            .attr("transform", "matrix(0.47,0,0.01,0.39,-259.96,-420)")
            .each("end", repeat);
        })();*/
        flame = flame.transition()
            .attr("transform", "matrix(" + y + ",0.01,0," + x + ",-265,-418)")
          .transition()
            .attr("transform", "matrix(" + y + ",0,0.01,0.39,-259.96,-420)")
            .each("end", repeat);
        })();
    }
});

## style.css
html { margin: 0; padding: 0; }

body {
  margin: 0;
  padding: 0;
  text-align: center; /* !!! */
  background-color: black;
}

.centered {
    margin: 0 auto;
    text-align: center;
    width: 100%;
}

#lamp {
  margin-right: auto;
  margin-left: auto;
  width: 100%;
}

#d3text {
  color: #E4B1B1;
}

h1 {
  font: 4em 'Arizonia', Helvetica, sans-serif;
  color: #fff;
}
	<!doctype html>
	<html>
	<head>
	<meta charset="utf-8">
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
	<title>Happy D3iwali</title>
	<!-- Js -->
	<script src="http://d3js.org/d3.v3.js"></script>
	<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
	<link href="http://fonts.googleapis.com/css?family=Arizonia" rel="stylesheet" type="text/css">
	<!-- CSS -->
	<link rel="stylesheet" href="style.css">
	</head>
	<body>
	<!-- HTML -->
	<!-- inspired by http://jsfiddle.net/christopheviau/XnG6r/-->
	<!-- inspired by https://gist.github.com/mbostock/1345853-->
	<div id="body">
	<div class="centered">
	<h1 id="greeting">Wishing you a very <br/>
	Happy D<span id="d3text">3</span>iwali
	<br/> and a prosperous New Year!
	</h1>
	<div id="lamp"></div>
	</div>

	<!-- Js -->
	<script type="text/javascript" src="index.js">
	</script>
	</body>
	</html>
	var dataset = [ 5, 10, 15, 20, 25];

	//Width and height
	var w = 800;
	var h = 200;

	//Create SVG Element
	var svg = d3.select("body")
	.append("svg")
	.attr("width", w)
	.attr("height", h);

	//Import the plane
	d3.xml("diwali_lamp.svg", "image/svg+xml", function(xml) {
	var importedNode = document.importNode(xml.documentElement, true);
	svg.selectAll("g")
	.data(dataset)
	.enter()
	.append("g")
	.attr("transform", function(d, i){
	return "translate(" + (i * (w / dataset.length)) + ","
	+ (h - 200) + ")"
	+"scale("+ 0.2 +")";
	})
	.each(function(d, i){
	var plane = this.appendChild(importedNode.cloneNode(true));
	d3.select(plane).select("g")
	.transition()
	.duration(1000)
	.each(slide);
	});

	function slide() {
	var flame = d3.select(this);
	var x = Math.random() * (0.40 - 0.38) + 0.38;
	var y = Math.random() * (0.49 - 0.48) + 0.48;
	(function repeat() {
	//Original matrix - 0.49034383,0,0,0.38263293,-259.96,-418.88496
	/* flame = flame.transition()
	.attr("transform", "matrix(0.50,0.01,0,0.38,-265,-418)")
	.transition()
	.attr("transform", "matrix(0.47,0,0.01,0.39,-259.96,-420)")
	.each("end", repeat);
	})();*/
	flame = flame.transition()
	.attr("transform", "matrix(" + y + ",0.01,0," + x + ",-265,-418)")
	.transition()
	.attr("transform", "matrix(" + y + ",0,0.01,0.39,-259.96,-420)")
	.each("end", repeat);
	})();
	}
	});
	html { margin: 0; padding: 0; }

	body {
	margin: 0;
	padding: 0;
	text-align: center; /* !!! */
	background-color: black;
	}

	.centered {
	margin: 0 auto;
	text-align: center;
	width: 100%;
	}

	#lamp {
	margin-right: auto;
	margin-left: auto;
	width: 100%;
	}

	#d3text {
	color: #E4B1B1;
	}

	h1 {
	font: 4em 'Arizonia', Helvetica, sans-serif;
	color: #fff;
	}