Using the SVG Coordinate Space
  Duration: 8:35
Part of Course: Introductory D3 Course
This Lesson is for subscribers

Using-the-svg-coordinate-space_280x158
Unlock this lesson NOW!
  • Get expert advice on Using the SVG Coordinate Space
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!

Takeaways:

  • The SVG element can be thought of as an SVG Viewport window
  • Things within the SVG Viewport's dimensions are visible
  • Things outside of the SVG Viewport's dimensions exist but are not visible
  • Math (Cartesian) Coordinate Space has the origin point (X=0, Y=0) at the bottom left
  • SVG Coordinate Space has the origin point (X=0, Y=0) at the top left
  • SVG Coordinate Space has the Y axis values increasing as it goes from the top of the SVG viewport to the bottom
  • You can use D3 and the knowledge of the SVG Coordinate space to add SVG elements and define their attribute value pairs such that you can place things within the SVG Viewport

Resources:
This Transcript is for subscribers.

Using-the-svg-coordinate-space_280x158
Unlock this D3 Tutorial NOW!
  • Get expert advice on Using the SVG Coordinate Space
  • Enjoy access to the complete DashingD3js catalog
  • Start mastering D3.js right now!
<< Back To D3 Screencast and Written Tutorials Index