pvernier/.block

## .block
license: gpl-3.0
height: 180

## README.md

      
    Raw
  

              README.md
            
          
    Displays the text "I ♡ D3" with a slide effect obtained via d3-timer (d3.interval).

  
## index.html
<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <style type="text/css">
    svg {
      background-color: #4d4d4d;
      width: 560px;
      height: 180px;
    }
    circle {
      fill: #B40431;
    }
    .letter {
      fill: #ffff33;
    }
  </style>
</head>
<body>
<svg></svg>
</body>
<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-timer.v1.min.js"></script>
<script type="text/javascript">
  function isLetter(x, y) {
    // Coordinates of circles representing the letters
    if ((x == 2 & y == 2) || (x == 3 & y == 2) || (x == 4 & y == 2) || (x == 3 & y == 3) || (x == 3 & y == 4) || (x == 3 & y == 5) || (x == 3 & y == 6) || (x == 2 & y == 6) || (x == 4 & y == 6)
        || (x == 7 & y == 2) || (x == 8 & y == 1) || (x == 9 & y == 1) || (x == 10 & y == 2) || (x == 11 & y == 1) || (x == 12 & y == 1) || (x == 13 & y == 2) || (x == 7 & y == 3)
        || (x == 13 & y == 3)
        || (x == 8 & y == 4) || (x == 12 & y == 4) || (x == 9 & y == 5) || (x == 11 & y == 5) || (x == 10 & y == 6)
        || (x == 16 & y == 2) || (x == 16 & y == 3) || (x == 16 & y == 4) || (x == 16 & y == 5) || (x == 16 & y == 6) || (x == 17 & y == 2) || (x == 17 & y == 6) || (x == 18 & y == 2)
        || (x == 18 & y == 6) || (x == 19 & y == 3) || (x == 19 & y == 4) || (x == 19 & y == 5)
        || (x == 22 & y == 3) || (x == 23 & y == 2) || (x == 24 & y == 2) || (x == 25 & y == 3) || (x == 24 & y == 4) || (x == 25 & y == 5) || (x == 24 & y == 6) || (x == 23 & y == 6)
        || (x == 22 & y == 5)
      ) {
      return true
    }
    else {
      return false
    }
  }

  var svg = d3.select("svg")
  var coordsX = [10, 30, 50, 70, 90, 110, 130, 150, 170, 190,
                 210, 230, 250, 270, 290, 310, 330,350, 370,
                 390, 410, 430, 450, 470, 490, 510, 530, 550]

  var coordsY = [10, 30, 50, 70, 90, 110, 130, 150, 170, 190]

  // Create the circles
  for (var y = 0; y < coordsY.length ; y++) {
    for (var x = 0; x < coordsX.length ; x++) {
      var circles = svg.append("circle")
         circles.attr("cx", coordsX[x])
         .attr("cy", coordsY[y])
         .attr("r", 10)
         .classed("letter", isLetter(x, y))
    }
  }

var circles = d3.selectAll('circle')

var t = d3.interval(function(elapsed) {
  circles.each(function(d,i) {
    if (this.attributes.cx.value == 10) {
      // If circle is in the first column (cx =10), move it to the last column (cx = 550)
      d3.select(this).attr("cx", 550)
    } else {
      // Move circle 20px to the left
      d3.select(this).attr("cx", this.attributes.cx.value - 20)
    }
  })
}, 200);
</script>
</html>

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<html>
	<head>
	<meta charset="utf-8">
	<style type="text/css">
	svg {
	background-color: #4d4d4d;
	width: 560px;
	height: 180px;
	}
	circle {
	fill: #B40431;
	}
	.letter {
	fill: #ffff33;
	}
	</style>
	</head>
	<body>
	<svg></svg>
	</body>
	<script src="https://d3js.org/d3.v4.min.js"></script>
	<script src="https://d3js.org/d3-timer.v1.min.js"></script>
	<script type="text/javascript">
	function isLetter(x, y) {
	// Coordinates of circles representing the letters
	if ((x == 2 & y == 2) \|\| (x == 3 & y == 2) \|\| (x == 4 & y == 2) \|\| (x == 3 & y == 3) \|\| (x == 3 & y == 4) \|\| (x == 3 & y == 5) \|\| (x == 3 & y == 6) \|\| (x == 2 & y == 6) \|\| (x == 4 & y == 6)
	\|\| (x == 7 & y == 2) \|\| (x == 8 & y == 1) \|\| (x == 9 & y == 1) \|\| (x == 10 & y == 2) \|\| (x == 11 & y == 1) \|\| (x == 12 & y == 1) \|\| (x == 13 & y == 2) \|\| (x == 7 & y == 3)
	\|\| (x == 13 & y == 3)
	\|\| (x == 8 & y == 4) \|\| (x == 12 & y == 4) \|\| (x == 9 & y == 5) \|\| (x == 11 & y == 5) \|\| (x == 10 & y == 6)
	\|\| (x == 16 & y == 2) \|\| (x == 16 & y == 3) \|\| (x == 16 & y == 4) \|\| (x == 16 & y == 5) \|\| (x == 16 & y == 6) \|\| (x == 17 & y == 2) \|\| (x == 17 & y == 6) \|\| (x == 18 & y == 2)
	\|\| (x == 18 & y == 6) \|\| (x == 19 & y == 3) \|\| (x == 19 & y == 4) \|\| (x == 19 & y == 5)
	\|\| (x == 22 & y == 3) \|\| (x == 23 & y == 2) \|\| (x == 24 & y == 2) \|\| (x == 25 & y == 3) \|\| (x == 24 & y == 4) \|\| (x == 25 & y == 5) \|\| (x == 24 & y == 6) \|\| (x == 23 & y == 6)
	\|\| (x == 22 & y == 5)
	) {
	return true
	}
	else {
	return false
	}
	}

	var svg = d3.select("svg")
	var coordsX = [10, 30, 50, 70, 90, 110, 130, 150, 170, 190,
	210, 230, 250, 270, 290, 310, 330,350, 370,
	390, 410, 430, 450, 470, 490, 510, 530, 550]

	var coordsY = [10, 30, 50, 70, 90, 110, 130, 150, 170, 190]

	// Create the circles
	for (var y = 0; y < coordsY.length ; y++) {
	for (var x = 0; x < coordsX.length ; x++) {
	var circles = svg.append("circle")
	circles.attr("cx", coordsX[x])
	.attr("cy", coordsY[y])
	.attr("r", 10)
	.classed("letter", isLetter(x, y))
	}
	}

	var circles = d3.selectAll('circle')

	var t = d3.interval(function(elapsed) {
	circles.each(function(d,i) {
	if (this.attributes.cx.value == 10) {
	// If circle is in the first column (cx =10), move it to the last column (cx = 550)
	d3.select(this).attr("cx", 550)
	} else {
	// Move circle 20px to the left
	d3.select(this).attr("cx", this.attributes.cx.value - 20)
	}
	})
	}, 200);
	</script>
	</html>