Created
April 3, 2015 21:19
-
-
Save kyrasteen/d7f7b55b2150a01b8ceb to your computer and use it in GitHub Desktop.
d3 hat. -As the one element of the data increases (total # of knitted rows of a hat) the hat svg should fill in with color, until completely filled(knitted hat finished).
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="en"> | |
| <head> | |
| <meta charset="utf-8"/> | |
| <link type="text/css" href="hat.css" rel="stylesheet"/> | |
| <script src="http://d3js.org/d3.v3.min.js"></script> | |
| </head> | |
| <body> | |
| <div id="hat"></div> | |
| <script> | |
| var data = [10]; | |
| var hat = d3.select("#hat").append("svg") | |
| .attr("width", 800) | |
| .attr("height", 800) | |
| .append("g") | |
| .attr("fill", 'url(#diagonalHatch)') | |
| .attr("transform", "translate(180,250)"); | |
| hat.append('defs') | |
| .append('pattern') | |
| .attr('id', 'diagonalHatch') | |
| .attr('patternUnits', 'userSpaceOnUse') | |
| .attr('width', 4) | |
| .attr('height', 4) | |
| .append('polyline') | |
| .attr("points", "16,2, 20,10, 23,2") | |
| .style("stroke", "black") | |
| .style("fill", "none"); | |
| // .attr('d', 'M-1,1 l2,-2 M0,4 l4,-4 M3,5 l2,-2'); | |
| // .attr('stroke-width', 1); | |
| hat.selectAll("rect") | |
| .data(data) | |
| .enter().append("rect") | |
| .attr("transform", "translate(0, 195)") | |
| .attr("transform", "translate(240, 195) rotate(180)") | |
| .attr("width", 240) | |
| .attr("height", function(d) { return (d*7 + "px"); }) | |
| var rect = hat.append("path") | |
| .attr("d", roundedRect(-240, -20, 240, 280, 86)); | |
| hat.append("line") | |
| .style("stroke", "#f42369") | |
| .style("stroke-width", 2) | |
| .attr("x1", 0) | |
| .attr("y1", 150) | |
| .attr("x2", 240) | |
| .attr("y2", 150); | |
| function roundedRect(x, y, width, height, radius) { | |
| return "M" + 0 + "," + 0 | |
| + "v" + (height - radius) | |
| + "h" + (width) | |
| + "v" + (radius - height) | |
| + "a" + radius + "," + radius + " 1 0 0 " + -radius + "," + -radius | |
| + "h" + (2 * radius - width) | |
| + "a" + radius + "," + radius + " 0 0 0" + -radius + "," + radius | |
| + "z"; | |
| } | |
| </script> | |
| </body> | |
| </html> |
OK, not sure when I can really pay attention but I'll try today or this weekend. :)
On another note, have you seen bl.ocks.org? For ex, if you rename your hat.html to index.html then blocks will run your code for ya, i.e. http://bl.ocks.org/virtualandy/6614d5d446483579f17a. It can be a handy way to share D3 (or other) examples. :)
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
Currently two problems-