using simple shape (triangle) to create a more complex shape
Last active
May 23, 2017 10:59
-
-
Save eesur/1b70b2917b7b1bc4cff7c1bc7874c76d to your computer and use it in GitHub Desktop.
d3 | 1 triangle repeated
This file contains hidden or 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
| // x and y of each triangle point | |
| var trianglePoints = [ | |
| [75, 0], | |
| [0, 150], | |
| [150, 150] | |
| ]; | |
| var w = +d3.select('svg').attr('width') | |
| var h = +d3.select('svg').attr('height') | |
| // create triangle path manually :) | |
| function triangle(d, i) { | |
| d3.select(this) | |
| .attr('d', ("M " + ([].concat( d )) + " Z")) | |
| } | |
| // this would create a single triangle | |
| /* | |
| d3.select('svg#vis') | |
| .append('g') | |
| .append('path') | |
| .datum(trianglePoints) | |
| .each(triangle) | |
| */ | |
| // create multiple triangles | |
| function render(nTimes) { | |
| var svg = d3.select('svg#vis') | |
| .selectAll('g') | |
| .data(d3.range(nTimes)) | |
| var enter = svg.enter() | |
| .append('g') | |
| .attr('transform', function (d, i) { return ("translate(" + (w/2) + ", " + (h/2) + ") rotate(" + (i * 10) + ")"); }) | |
| .append('path') | |
| svg.merge(enter) | |
| .datum(trianglePoints) | |
| .each(triangle) | |
| svg.exit().remove() | |
| } | |
| render(45) | |
This file contains hidden or 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="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <!-- http://www.basscss.com/ --> | |
| <link href="//npmcdn.com/[email protected]/css/basscss.min.css" rel="stylesheet"> | |
| <style> | |
| body { | |
| font-family: Consolas, monaco, monospace; | |
| background: #130C0E; | |
| color: #FFF; | |
| } | |
| path { | |
| fill: none; | |
| stroke: #FDBB30; | |
| stroke-width: 3px; | |
| stroke-opacity: 0.5; | |
| } | |
| span { | |
| letter-spacing: 3px; | |
| color: #FDBB30; | |
| } | |
| input[type="range"] { | |
| -webkit-appearance:none; | |
| width: 100%; | |
| height:2px; | |
| background: #FFF; | |
| background-position:center; | |
| background-repeat:no-repeat; | |
| margin: auto; | |
| } | |
| input[type="range"]::-webkit-slider-thumb { | |
| -webkit-appearance:none; | |
| width: 20px; | |
| height: 20px; | |
| border-radius: 100%; | |
| background: #130C0E; | |
| position:relative; | |
| border: 3px solid #FFF; | |
| z-index: 2; | |
| cursor: pointer; | |
| } | |
| input:focus { | |
| outline: none; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <header class="fixed top-0 left-0 ml1 mt1"> | |
| <p class="caps">Number of triangles: <span id="slider-amount">45</span></p> | |
| <input type="range" id="triangle-amount" value="45"> | |
| </header> | |
| <svg id="vis" width="960" height="500"></svg> | |
| <script src="//d3js.org/d3.v4.min.js" charset="utf-8"></script> | |
| <script src=".script-compiled.js" charset="utf-8"></script> | |
| <script> | |
| // set a min and max to to the range slider | |
| document.getElementById('triangle-amount').max = '50'; | |
| document.getElementById('triangle-amount').min = '1'; | |
| // when the input range changes re-render | |
| d3.select('#triangle-amount').on('input', function() { | |
| d3.select('#slider-amount').text(+this.value) | |
| render(+this.value); | |
| }) | |
| </script> | |
| </body> | |
| </html> | |
This file contains hidden or 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
| // x and y of each triangle point | |
| const trianglePoints = [ | |
| [75, 0], | |
| [0, 150], | |
| [150, 150] | |
| ]; | |
| const w = +d3.select('svg').attr('width') | |
| const h = +d3.select('svg').attr('height') | |
| // create triangle path manually :) | |
| function triangle(d, i) { | |
| d3.select(this) | |
| .attr('d', `M ${[...d]} Z`) | |
| } | |
| // this would create a single triangle | |
| /* | |
| d3.select('svg#vis') | |
| .append('g') | |
| .append('path') | |
| .datum(trianglePoints) | |
| .each(triangle) | |
| */ | |
| // create multiple triangles | |
| function render(nTimes) { | |
| const svg = d3.select('svg#vis') | |
| .selectAll('g') | |
| .data(d3.range(nTimes)) | |
| const enter = svg.enter() | |
| .append('g') | |
| .attr('transform', (d, i) => `translate(${w/2}, ${h/2}) rotate(${i * 10})`) | |
| .append('path') | |
| svg.merge(enter) | |
| .datum(trianglePoints) | |
| .each(triangle) | |
| svg.exit().remove() | |
| } | |
| render(45) | |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment