D3.jsの勉強がてらにSTARWARS風な六甲おろしをSVGで作成してみました。
サンプル → bl.ocks.org
解説 → Qiita
Last active
August 29, 2015 14:22
-
-
Save nobuhito/5354bd4939cbdf334f10 to your computer and use it in GitHub Desktop.
R2D3.js
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="ja"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> | |
| <link rel="stylesheet" href="r2d3.css" /> | |
| </head> | |
| <body></body> | |
| <script src="r2d3.js"></script> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| body { | |
| background-color: black; | |
| } | |
| svg { | |
| background-color: "black; | |
| } |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| var w = window.innerWidth; //800; | |
| var h = window.innerHeight; //200; | |
| var starCount = 100; | |
| var svg = d3.select("body") | |
| .append("svg") | |
| .attr("width", w - 32) | |
| .attr("height", h - 32); | |
| create_star(); | |
| create_wars(); | |
| function create_star() { | |
| var stars = d3.range(0, starCount, 1); | |
| stars.forEach(function(d) { | |
| svg.selectAll("star") | |
| .data(function() { | |
| return [{id: d}]; | |
| }) | |
| .enter() | |
| .append("svg:circle") | |
| .attr("id", function(d) { | |
| return "star_" + d.id; | |
| }) | |
| .style("fill", "white") | |
| .attr("cx", function(d) { | |
| return Math.random() * w; | |
| }) | |
| .attr("cy", function(d) { | |
| return Math.random() * h; | |
| }) | |
| .attr("r", function(d) { | |
| return Math.random() * 1.5; | |
| }); | |
| }); | |
| setInterval(function() { | |
| var id = "#star_" + Math.floor(Math.random() * starCount); | |
| d3.select(id) | |
| .transition() | |
| .duration(500) | |
| .ease("exp") | |
| .attr("r", function() { | |
| return Math.random() * 1.5; | |
| }); | |
| }, 100); | |
| setInterval(function() { | |
| var id = "#star_" + Math.floor(Math.random() * starCount); | |
| d3.select(id) | |
| .transition() | |
| .duration(1000 * Math.random() * 3) | |
| .ease("circle") | |
| .attr("cx", function() { | |
| return (Math.floor(Math.random() * 10) %2 == 0)? 0: w; | |
| }) | |
| .attr("cy", function() { | |
| return Math.random() * h; | |
| }) | |
| .each("end", function() { | |
| d3.select(id).attr("cx",function() { | |
| return Math.random() * w; | |
| }); | |
| }); | |
| }, 3000); | |
| } | |
| function create_wars() { | |
| var lines = getLines(); | |
| for (var i in lines) { | |
| var data = [{"string": lines[i]}]; | |
| var line = svg.selectAll("line") | |
| .data(data) | |
| .enter() | |
| .append("g") | |
| .attr("transform", function(d) { | |
| return "translate(" + (w / 2) + ", " + (h + 200) + ")"; | |
| }); | |
| var text = line.append("svg:text") | |
| .attr("text-anchor", "middle") | |
| .style("font-size", "100px") | |
| .style("stroke", "#F8A21A") | |
| .style("fill", "#E6A946") | |
| .text(function(d) { | |
| return d.string; | |
| }); | |
| line.transition() | |
| .delay(i * 500) | |
| .duration(10000) | |
| .attr("transform", function() { | |
| return "translate(" + (w / 2) + ", 50)"; | |
| }) | |
| .style("opacity",0.8) | |
| .transition() | |
| .duration(1000) | |
| .attr("transform", function() { | |
| return "translate(" + (w / 2) + ", 0)"; | |
| }) | |
| .style("opacity",0) | |
| .each('end', function() { | |
| d3.select(this).remove(); | |
| }); | |
| text.transition() | |
| .delay(i * 500) | |
| .duration(10000) | |
| .style("font-size", "20px") | |
| .style("opacity", 0.8); | |
| } | |
| } | |
| function getLines() { | |
| var heredoc = (function () { | |
| /* | |
| 六甲颪（おろし）に 颯爽（さっそう）と | |
| 蒼天（そうてん）翔（か）ける日輪（にちりん）の | |
| 青春の覇気 美（うるわ）しく | |
| 輝く我が名ぞ 阪神タイガース | |
| オウ オウ オウオウ 阪神タイガース | |
| フレ フレフレフレ | |
| 闘志溌剌（はつらつ） 起つや今 | |
| 熱血既に 敵を衝（つ）く | |
| 獣王の意気 高らかに | |
| 無敵の我等ぞ 阪神タイガース | |
| オウ オウ オウオウ 阪神タイガース | |
| フレ フレフレフレ | |
| 鉄腕強打 幾千度（いくちた）び | |
| 鍛えてこゝに 甲子園 | |
| 勝利に燃ゆる 栄冠は | |
| 輝く我等ぞ 阪神タイガース | |
| オウ オウ オウオウ 阪神タイガース | |
| フレ フレフレフレ | |
| */ | |
| }).toString().replace("\r\n", "\n").split("\n"); | |
| var lines = []; | |
| for (var i in heredoc) { | |
| if (i < 2 || i > heredoc.length - 3) { continue; } | |
| lines.push(heredoc[i].trim()); | |
| } | |
| return lines; | |
| } |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment