SVG Simple Shape Visual Marks
FREE     Duration: 2:04
Part of Course: D3 V4 Tutorial
 

Takeaways:

  • SVG comes with simple shape tags that create visual marks you can use for your visualization
  • As long as the SVG simple shape tags are within an SVG tag then the web browser will know what to do with them
  • The tags are "circle", "rect", "ellipse", "line", "text", and "path"
  • The "circle" SVG tag needs attribute value pairs for "cx", "cy", and "radius"
  • The "rect" SVG tag needs attribute value pairs for "x", "y", "height", and "width"
  • The "ellipse" SVG tag needs attribute value pairs for "cx", "cy", "rx", and "ry"
  • The "line" SVG tag needs attribute value pairs for "x1", "y1", "x2", "y2", "stroke-width", and "stroke"
  • The "text" SVG tag needs attribute value pairs for "x" and "y" as well as the actual text you want to be visual represented
  • The "path" SVG tag needs attribute value pairs for "d", "stroke-width", and "stroke"

Resources:

Transcript:

SVG Simple Shape Visual Marks


HTML file:

N/A


JavaScript Console Commands Run:

N/A


SVG Instructions:

<svg width="100" height="100">
    <circle cx="35" cy="35" r="25" />
</svg>

<svg width="100" height="100">
    <rect x="10" y="10" width="50" height="50" />
</svg>

<svg width="100" height="100">
    <ellipse cx="25" cy="25" rx="15" ry="10" />
</svg>

<svg width="50" height="50">
    <line x1="10" y1="10" x2="50" y2="50"
 stroke-width="3" stroke="black" />
</svg>

<svg width="50" height="50">
    <text x="25" y="25">Cupcake</text>
</svg>

<svg width="50" height="50">
    <path d="M10,10L50,50" stroke-width="3" stroke="black"></path>
</svg>

<< Back To D3 Screencast and Written Tutorials Index