D3
OG
Old school D3 from simpler times
All examples
By author
By category
About
lmelgar
Full window
Github gist
Week 4: SVG fixes
<html lang="en"> <head> <meta charset="utf-8"> <title>SVG Shapes</title> <style> svg { background: rgba(235, 235, 235, 0.5); } svg line { stroke-width: 3px; } </style> </head> <body> <svg width="640" height="480" xmlns="https://www.w3.org/2000/svg"> <!-- Created with SVG-edit - https://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> d3.select("svg").selectAll("ellipse") .style("fill", "#0099FF") d3.select("svg").selectAll("rect") .style("stroke-width", "2") .style("fill", "#FF0099") d3.select("svg").select("rect") .style("fill", "#0099FF") d3.select("svg").selectAll("rect:nth-child(2n+1)") .style("stroke", "#FF9900") var colorLines = d3.scale.category10(); d3.selectAll("line") .style("stroke", function(d, i) { return colorLines(i); }); d3.selectAll("text") .remove() </script> </html>
https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js