Built with blockbuilder.org
forked from adry34160's block: 18 - Interactive text rotation with d3.js
Last active
November 4, 2016 15:46
-
-
Save adry34160/5e7749c8cdea82aed73bb3a416e730bb to your computer and use it in GitHub Desktop.
19 - Interactive text rotation with d3.jsHTML input and multiple d3.js objects
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
| license: mit |
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> | |
| <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> | |
| <p> | |
| <label for="nAngle" | |
| style="display: inline-block; width: 240px; text-align: right"> | |
| angle = <span id="nAngle-value">...</span> | |
| </label> | |
| <input type="range" min="0" max="360" id="nAngle"> | |
| </p> | |
| <script> | |
| var width = 600; | |
| var height = 300; | |
| var holder = d3.select("body") | |
| .append("svg") | |
| .attr("width", width) | |
| .attr("height", height); | |
| // draw the d3.js text | |
| holder.append("text") | |
| .attr("class", "d3js") | |
| .style("fill", "black") | |
| .style("font-size", "56px") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "middle") | |
| .attr("transform", "translate(300,55) rotate(0)") | |
| .text("d3.js"); | |
| // draw the let it bi text | |
| holder.append("text") | |
| .attr("class", "letitbi") | |
| .style("fill", "black") | |
| .style("font-size", "56px") | |
| .attr("dy", ".35em") | |
| .attr("text-anchor", "middle") | |
| .attr("transform", "translate(300,130) rotate(0)") | |
| .text("letitbi.net"); | |
| // when the input range changes update the angle | |
| d3.select("#nAngle").on("input", function() { | |
| update(+this.value); | |
| }) | |
| // initial starting angle of the text | |
| update(0); | |
| function update(nAngle) { | |
| //adjust the text on the range slicer | |
| d3.select("#nAngle-value").text(nAngle); | |
| d3.select("#nAngle").property("value", nAngle); | |
| // rotate the text | |
| holder.select("text.d3js") | |
| .attr("transform", "translate(300, 55) rotate("+nAngle+")"); | |
| // rotate the text | |
| holder.select("text.letitbi") | |
| .attr("transform", "translate(300, 130) rotate("+(360-nAngle)+")"); | |
| } | |
| </script> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment