Last active
October 2, 2015 18:28
-
-
Save JnBrymn/2295155 to your computer and use it in GitHub Desktop.
My attempt to add templating to d3.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> | |
| <head> | |
| <title>appendNodeFace</title> | |
| <script src="http://mbostock.github.com/d3/d3.v2.js" type="text/javascript"></script> | |
| <!--<script src="d3.v2.js" type="text/javascript"></script>--> | |
| <script src="https://raw.github.com/andyet/ICanHaz.js/master/ICanHaz.min.js" type="text/javascript"></script> | |
| <!--<script src="ICanHaz.min.js" type="text/javascript"></script>--> | |
| <style type="text/css"> | |
| circle { | |
| stroke: #000; | |
| stroke-width: 1.5px; | |
| fill: #fff; | |
| } | |
| </style> | |
| <script id="circle" type="text/html"> | |
| <circle r="{{r}}" cx="{{cx}}" cy="{{cy}}" xmlns="http://www.w3.org/2000/svg"></circle> | |
| </script> | |
| <script id="head" type="text/html"> | |
| <g xmlns="http://www.w3.org/2000/svg" | |
| class="head"> | |
| <path | |
| d="M 28.471261,-5.0558794 C 32.671841,22.243131 19.834631,49.162831 0.60952108,49.162831 -18.615599,49.162831 -27.684919,24.667631 -27.053699,-3.0332694 -26.458119,-29.170189 -25.961069,-47.588419 0.21246108,-48.936829 19.417701,-49.926249 24.103691,-33.440159 28.471261,-5.0558794 z" | |
| id="face" | |
| transform="scale({{head_width}} 1)" | |
| style="color:#000000;fill:#ffccaa;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> | |
| <path | |
| d="m 15,0 c 0,3.7959 -4.91374,13.7461 -12.8383199,13.7461 -7.92458,0 -17.6233801,-10.3065 -15.8591001,-13.7461 1.0069201,-1.9631 7.9345201,0 15.8591001,0 7.9245799,0 12.8383199,-3.7959 12.8383199,0 z" | |
| id="mouth" | |
| transform="translate(0, {{mouth_drop}}) translate(0,17) scale({{mouth_width}} {{mouth_height}})" | |
| style="color:#000000;fill:#000000;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> | |
| <path | |
| d="m -18.009869,-17.276949 c 3.23815,-9.62232 14.5716901,-8.70591 14.5716901,-8.70591" | |
| id="rightbrow" | |
| transform="translate(0, -{{brow_lift}})" | |
| style="color:#000000;fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> | |
| <path | |
| d="m 20.443211,-18.868939 c -3.23815,-9.62232 -14.5716899,-8.70591 -14.5716899,-8.70591" | |
| id="leftbrow" | |
| transform="translate(0, -{{brow_lift}})" | |
| style="color:#000000;fill:none;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> | |
| <path | |
| d="m 2.3,0 c 0.90841,1.59522 -1.53169,3.13263 -4.07974,3.51899 -2.5480401,0.38635 -5.4168801,-0.16412 -5.1475501,-2.11987 0.25826,-1.87529 1.62394,-2.35301 4.1719801,-2.73937 2.54805,-0.38636 4.17038,-0.21373 5.05531,1.34025 z" | |
| id="righteye" | |
| transform="translate(-5,-18) scale({{eye_width}} {{eye_height}})" | |
| style="color:#000000;fill:#000000;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> | |
| <path | |
| d="m 5.5,0 c 0.90841,1.59522 -1.53169,3.13263 -4.07974,3.51899 -2.5480399,0.38635 -5.4168799,-0.16412 -5.1475499,-2.11987 0.25826,-1.87529 1.62394,-2.35301 4.17198,-2.73937 2.5480499,-0.38636 4.1703899,-0.21373 5.0553099,1.34025 z" | |
| id="lefteye" | |
| transform="translate(10,-18) scale({{eye_width}} {{eye_height}})" | |
| style="color:#000000;fill:#000000;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> | |
| <path | |
| d="M -8.1253309,-1.8487371 C -3.740886,13.80696 10.948853,19.556588 10.177223,-2.5578614" | |
| id="nose" | |
| transform="translate(0, {{nose_drop}}) scale({{nose_width}} {{nose_height}})" | |
| style="color:#000000;fill:#ffccaa;fill-opacity:1;fill-rule:evenodd;stroke:#000000;stroke-width:1.5;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" /> | |
| </g> | |
| </script> | |
| </head> | |
| <body> | |
| <script type="text/javascript"> | |
| d3.selection.prototype.appendNode = function(value) { | |
| function _appendFunction(data,index) { | |
| var result = value.call(this, data, index); | |
| if( typeof result === "string" ) { | |
| var parser = new DOMParser() | |
| result = parser.parseFromString(value(data),"text/xml").firstChild | |
| } | |
| return this.appendChild(result); | |
| } | |
| function _appendNode() { | |
| return this.appendChild(value); | |
| } | |
| function _appendXml() { | |
| var parser = new DOMParser() | |
| , doc = parser.parseFromString(value, "text/xml"); | |
| return this.appendChild(doc.firstChild); | |
| } | |
| var selection; | |
| switch(typeof value) { | |
| case 'string': | |
| selection = this.select(_appendXml); | |
| break; | |
| case 'function': | |
| selection = this.select(_appendFunction); | |
| break; | |
| default: | |
| selection = this.select(_appendNode); | |
| } | |
| return selection; | |
| }; | |
| d3.selection.enter.prototype.appendNode = d3.selection.prototype.appendNode; | |
| window.onload = function () { | |
| var w = 500; | |
| var h = 550; | |
| var vis = d3.select('body') | |
| .append('svg') | |
| .attr('width', w) | |
| .attr('height', h); | |
| count = 0; | |
| var nextData = function() { | |
| count += 1; | |
| return { | |
| head_width: .7*Math.random()+.8, //.8 - 1.5 | |
| mouth_width: .8*Math.random()+.5, //.5 - 1.3 | |
| mouth_height: Math.random()+.5, //.5 - 1.5 | |
| mouth_drop: 15*Math.random()-5, //-5 - 10 | |
| nose_width: Math.random()+.5, //.5 - 1.5 | |
| nose_height: Math.random()+.5, // .5 - 1.5 | |
| nose_drop: 15*Math.random()-5, // -5 - 10 | |
| eye_width: .8*Math.random()+.5, //.5 - 1.3 | |
| eye_height: 1.1*Math.random()+.4,//.4 - 1.5 | |
| brow_lift: 10*Math.random(), //0 - 10 | |
| x: w*(count%5+1)/5 - 45 , | |
| y: h*.95*Math.ceil(count/5)/4.9 - 50 | |
| }; | |
| } | |
| var data = d3.range(25).map(function() { | |
| return nextData(); | |
| }); | |
| vis.selectAll('.head') | |
| .data(data).enter() | |
| .appendNode(ich.head ) | |
| .attr('transform',function(d) {return 'translate('+ d.x +' '+ d.y +')'}); | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment