Skip to content

Instantly share code, notes, and snippets.

@CafeConVega
Created February 7, 2016 18:36
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save CafeConVega/a26d63251c04ad78a38c to your computer and use it in GitHub Desktop.
Save CafeConVega/a26d63251c04ad78a38c to your computer and use it in GitHub Desktop.
Week 4: SVG Fixes
<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