Last active
October 22, 2015 16:08
-
-
Save yan2014/5b1ba9a0a1be8cff7237 to your computer and use it in GitHub Desktop.
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> | |
| <link rel="stylesheet" type="text/css" href="main.css"> </head> | |
| </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" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> | |
| <script type="text/javascript" src="main.js"></script> | |
| </html> |
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
| svg{ | |
| background-color: lightgray; | |
| } | |
| rect{ | |
| stroke-width: 3px; | |
| } |
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
| /* | |
| Using the file in svg_to_fix.html, I want you to add some styling, using d3 and style sheets. You might need to look up stuff in the SVG references. | |
| Using d3 to select all the ellipses, re-style all the ellipses so their fill is blue. | |
| Using d3 to select all the rectangles, re-style them so their stroke width is 2px instead. | |
| Use d3 to style all the rectangles so they are pink. | |
| Then use d3 to style the first rectangle so it is blue. | |
| Use d3 to select the rectangle with id svg_2 and make the color of the stroke orange. | |
| Use a CSS style to set the background color of the SVG to a light gray. | |
| Use a CSS style to set the line stroke to 3px instead. | |
| Extra credit (5pt): Use a d3 category10() color scale to set the color of the lines. | |
| Extra Extra credit (3pt): Use d3 to remove the text on top! Will require internet searching | |
| */ | |
| // Using d3 to select all the ellipses, re-style all the ellipses so their fill is blue. | |
| d3.selectAll("ellipse") | |
| .style("fill","blue"); | |
| //Using d3 to select all the rectangles, re-style them so their stroke width is 2px instead.+ Use d3 to style all the rectangles so they are pink. | |
| d3.selectAll("rect") | |
| .attr("stroke-width",2) | |
| .attr("fill","pink"); | |
| // Then use d3 to style the first rectangle so it is blue. | |
| d3.select("rect#svg_1") | |
| .attr("fill","blue"); | |
| // Use d3 to select the rectangle with id svg_2 and make the color of the stroke orange. | |
| d3.select("rect#svg_2") | |
| .attr("stroke","orange"); | |
| //Use a d3 category10() color scale to set the color of the lines. | |
| var data = d3.range(0,10); | |
| var colors = d3.scale.category10(); | |
| d3.selectAll("line") | |
| .data(data) | |
| .attr("stroke", function(d){ return colors(d);} ); | |
| //Use d3 to remove the text on top! Will require internet searching | |
| d3.select("text").remove(); |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment