D3 Examples - The Best House on the Block

xxxxxxxxxx
 
<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://d3js.org/d3.v4.min.js"></script>
  <style>
    body { margin:0;position:fixed;top:0;right:0;bottom:0;left:0; }
  </style>
</head>
​
<body>
  <svg width="500" height="550" background-color="green">
​
  <rect id="backdrop" x="0" y="0" width="500" height="550" fill="skyblue"></rect>
<circle id="sun" style="fill: yellow"></circle>
  
<circle id="moon" style="fill: white"></circle>
​
<g id="wholehouse" transform="translate(0,0) rotate(0,0,0)">
  <!-- Chimney -->
  <rect x="350" y="100" height="100" width="50" style="fill: #bd6b18"/>
  <!-- Base -->
  <rect x="100" y="200" height="250" width="300" style="fill: #fdce7d"/>
  <!-- Roof -->
  <path d="M 50 250 L 250 50 L 450 250 Z" style="fill: #bd1d18"/>
  
  <!-- Left Window -->
  <g style="
            fill: white;
            stroke: black;
            stroke-width: 5px" transform="translate(125, 300) scale(0.5)">
    <rect x="10" y="10" height="50" width="50"/>
    <rect x="60" y="10" height="50" width="50"/>
    <rect x="10" y="60" height="50" width="50"/>
    <rect x="60" y="60" height="50" width="50"/>
  </g>
  
  <!-- Right Window -->
  <g style="
            fill: white;
            stroke: black;
            stroke-width: 5px" transform="translate(320, 300) scale(0.5)">
    <rect x="10" y="10" height="50" width="50"/>
    <rect x="60" y="10" height="50" width="50"/>
    <rect x="10" y="60" height="50" width="50"/>
    <rect x="60" y="60" height="50" width="50"/>
  </g>
  
  <!-- Top Window -->
  <g style="
            fill: white;
            stroke: black;
            stroke-width: 5px" transform="translate(220, 150) scale(0.5, 0.75)">
    <rect x="10" y="10" height="50" width="50"/>
    <rect x="60" y="10" height="50" width="50"/>
    <rect x="10" y="60" height="50" width="50"/>
    <rect x="60" y="60" height="50" width="50"/>
  </g>
  
  <!-- Door -->
  <g transform="translate(192.5, 290)">
    <rect x="10" y="10" height="150" width="100" style="fill: #754009"/>
    <circle cx="25" cy="85" r="7" style="fill: gold"/>
  </g>
</g>
<!-- Grass -->
  <rect x="0" y="450" height="100" width="500" style="fill: green;"/>
​
</svg>
<script src="/scripts/d3.v3.js"></script>
<script>
  var speed = 5000;
  var fly = false;
  var timePasses = false;
  var dayTime = true;
  var startOpacity = 1;
  var endOpacity = 0.5;
  var endRadius = 40;
  
  function timeFlies(){
    d3.select("#sun")
    .attr("cx", "-50")
    .attr("cy", "50")
    .attr("r", "50")
    .style("opacity", startOpacity)
    .transition()
    .duration(speed)
    .ease("linear")
    .delay(0)
    .attr("cx", 550)
    .attr("r", endRadius)
    .style("opacity", endOpacity);
 
  if (dayTime){
    dayTime = false;
    d3.select("#backdrop")
    .transition()
    .duration(speed)
    .ease("cubicin")
    .style("fill", "black");
  }else{
    dayTime = true;
    d3.select("#backdrop")
    .transition()
    .duration(speed)
    .ease("cubicin")
    .style("fill", "skyblue");
  }
  
  d3.select("#moon")
    .attr("cx", "-50")
    .attr("cy", "50")
    .attr("r", "50")
    .style("opacity", startOpacity)
    .transition()
    .duration(speed)
    .ease("linear")
    .delay(speed)
    .attr("cx", 550)
    .attr("r", endRadius)
    .style("opacity", endOpacity);
 
  }
​
  if (timePasses){
    setInterval(timeFlies, speed);
    timeFlies();
  };
  
  if (fly){
     d3.select("#wholehouse")
      .transition()
      .duration(5000)
      .ease("cubic")
      .attr("transform", "translate(0,-500)")
  };
  
</script>
</body>
​
    