Created
February 7, 2016 18:36
Week 4: SVG Fixes
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
| <html lang="en"> | |
| <head> | |
| <meta charset="utf-8"> | |
| <title>SVG Shapes</title> | |
| <script type="text/javascript" src="http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <script type="text/javascript" src="https://code.jquery.com/jquery-1.12.0.min.js"></script> | |
| </head> | |
| <body> | |
| <svg width="640" height="480" xmlns="http://www.w3.org/2000/svg"> | |
| <!-- Created with SVG-edit - http://svg-edit.googlecode.com/ --> | |
| <g> | |
| <title>Layer 1</title> | |
| <rect id="svg_1" height="49" width="68" y="103" x="110" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <rect id="svg_2" height="70" width="107" y="103" x="214" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <rect id="svg_3" height="53" width="76" y="103" x="371" stroke-width="5" stroke="#000000" fill="#007f7f"/> | |
| <ellipse ry="50" rx="71" id="svg_4" cy="269" cx="88" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse ry="29" rx="9" id="svg_5" cy="345" cx="201" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse ry="15" rx="61" id="svg_6" cy="362" cx="280" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse ry="27" rx="46" id="svg_7" cy="355" cx="445" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse rx="61" id="svg_8" cy="267" cx="510" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse ry="57" rx="22" id="svg_9" cy="242" cx="354" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse ry="38" rx="63" id="svg_10" cy="234" cx="287" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse ry="7" rx="35" id="svg_11" cy="229" cx="463" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse ry="10.5" rx="13" id="svg_12" cy="330.5" cx="373" stroke-width="5" stroke="#000000" fill="#FF0000"/> | |
| <ellipse ry="40" rx="51" id="svg_13" cy="278" cx="223" stroke-width="5" stroke="#000000" fill="#00ff7f"/> | |
| <line id="svg_14" y2="157" x2="525" y1="65" x1="388" stroke="#000000" fill="none"/> | |
| <line id="svg_15" y2="181" x2="607" y1="71" x1="537" stroke="#000000" fill="none"/> | |
| <line id="svg_16" y2="338" x2="621" y1="261" x1="602" stroke="#000000" fill="none"/> | |
| <line id="svg_17" y2="278" x2="431" y1="264" x1="534" stroke="#000000" fill="none"/> | |
| <line id="svg_18" y2="294" x2="583" y1="191" x1="511" stroke="#000000" fill="none"/> | |
| <line id="svg_19" y2="407" x2="555" y1="339" x1="575" stroke="#000000" fill="none"/> | |
| <line id="svg_20" y2="430" x2="645" y1="415" x1="594" stroke="#000000" fill="none"/> | |
| <line id="svg_21" y2="434" x2="232" y1="447" x1="453" stroke="#000000" fill="none"/> | |
| <line id="svg_22" y2="437" x2="108" y1="400" x1="143" stroke="#000000" fill="none"/> | |
| <text xml:space="preserve" text-anchor="middle" font-family="serif" font-size="24" id="svg_28" y="31" x="339" stroke-width="0" stroke="#000000" fill="#000000">This is a total mess. Help.</text> | |
| </g> | |
| </svg> | |
| </body> | |
| <script type="text/javascript"> | |
| //1-Using d3 to select all the ellipses, re-style all the ellipses so their fill is blue. | |
| d3.selectAll("ellipse") | |
| .style("fill", "blue"); | |
| //2-Using d3 to select all the rectangles, re-style them so their stroke width is 2px instead. | |
| d3.selectAll("rect") | |
| .style("stroke-width", "2"); | |
| //3-Use d3 to style all the rectangles so they are pink. | |
| d3.selectAll("rect") | |
| .style("fill", "pink"); | |
| //4-Then use d3 to style the first rectangle so it is blue. | |
| d3.select("rect") | |
| .style("fill", "blue"); | |
| //5-Use d3 to select the rectangle with id svg_2 and make the color of the stroke orange. | |
| d3.select("#svg_2") | |
| .style("stroke", "orange"); | |
| //8-Use a d3 category10() color scale to set the color of the lines. | |
| var colors = d3.scale.category10(); | |
| d3.selectAll("line") | |
| .style("stroke", function(d, i) { | |
| return colors(i); | |
| }); | |
| //9-Use d3 to remove the text on top! | |
| d3.select("text").remove(); | |
| </script> | |
| <style> | |
| /* | |
| 6-Use a CSS style to set the background color of the SVG to a light gray | |
| */ | |
| svg { | |
| background-color: lightgrey; | |
| } | |
| /* | |
| 7-Use a CSS style to set the line stroke to 3px instead. | |
| */ | |
| line { | |
| stroke-width: 3px; | |
| } | |
| </style> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment