D3 Scalable Vector Graphics SVG SVG stands for Scalable Vector Graphics and is an XML based vector graphics format compared to pixel based solutions vector formats have infinit resolution Using SVG enable syou to take D3 to new levels SVG provides options to draw different shapes such as lines rectangles circles and more As you might have guessed D3 fully supports SVG as it enables you to design more powerful and flexible visualizations Features of SVG Some of the core features of SVG are SVG has a similar structure to HTML SVG is a vector based image format that is represented using text SVG can be represented as a Document Object Model SVG can be included in your HTML document most modern browsers fully support the SVG format SVG properties can be specified as attributes SVG shoudl have absolute positions relative to the origin 0 0 Minimum Working SVG Example So you can see how SVG images work let s add an SVG image to a HTML document Step 1 Create an SVG image container with a width and height of 300 pixels svg width 300 height 300 svg Note the default size attributes to the SVG tag are in pixels Step 2 Create a line starting at 50 50 and ending at 100 100 Also set the color of the line to blue svg width 300 height 300 line x1 50 y1 50 x2 100 y2 100 style stroke rgb 0 0 255 stroke width 5 svg The line tag needs to be a child of the SVG container i e you can t just put it anywhere in the DOM The line tag draws a line from x1 y1 to x2 y2 which are the starting and ending points To configure the color and line with you need to modify the style value You set the stroke and stroke width styles To reiterate x1 first x coordinate point start y1 first y coordinate point start x2 second x coordinate point end y2 second y coordinate point end stroke color of the line stroke width thickness of the line Put it all together in a complete HTML example DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body svg width 300 height 300 line x1 50 y1 50 x2 100 y2 100 style stroke rgb 0 0 255 stroke width 5 svg script script body html SVG and D3 You can also create SVG and components using D3 which you ll do now Step 1 Create an SVG element and add it to the body of the DOM var svg d3 select body create Svg element append svg attr height 200 attr width 200 Step 2 Select the SVG container using the select method and inject the SVG element using the append method Add attributes and stules using the attr and style methods d3 select svg append line attr x1 30 attr y1 30 attr x2 100 attr y2 100 style stroke rgb 0 255 0 style stroke width 3 Let s put it all together for a fully working example DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 d3 select svg append line attr x1 30 attr y1 30 attr x2 100 attr y2 100 style stroke rgb 0 255 0 style stroke width 3 script body html Rectangle Element The rect tag as shown below rect x 10 y 10 width 30 height 50 rect where the attributes are x x coordinate of the top left corner of the rectangle y y coordinate of the top left corner of the rectangle width size of the rectangle along the x axis height size of the rectangle along the y axis DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 d3 select svg append rect attr x 30 attr y 30 attr width 100 attr height 50 attr fill rgb 0 0 255 script body html Circle Element A circle is drawn using the circle tag For example you would use it as follows circle cx 50 cy 50 r 20 The attributes of the circle tag are cx x coordinate of the centre of the circle cy y coordinate of the centre of the circle r radius of the circle A simple example is given below DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 d3 select svg append circle attr cx 100 attr cy 30 attr r 20 attr fill rgb 255 0 0 script body html Ellipse Element The ellipse element as you might have guessed is represented by the ellipse tag and is used as follows ellipse cx 100 cy 20 rx 30 ry 50 The attributes of the ellipse element are cx x coordinates for the centre position cy y coordinates for the centre position rx radius of the circle along the x direction ry radius of the circle along the y direction A simple example of the ellispe is given below DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 d3 select svg append ellipse attr cx 100 attr cy 30 attr rx 70 attr ry 20 attr fill rgb 255 0 255 script body html Note if the position of the drawn element is outside of the boundaries of the containing SVG it will be clipped i e you won t see the parts of the element that leave the SVG edges DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 randomly put circles for let i 0 i 10 i svg append circle attr cx Math random 250 attr cy Math random 250 attr r 10 Math random 50 attr fill rgb Math random 255 Math random 255 Math random 255 end for i script body html
yle stroke width 3 script body html Rectangle Element The rect tag as shown below rect x 10 y 10 width 30 height 50 rect where the attributes are x x coordinate of the top left corner of the rectangle y y coordinate of the top left corner of the rectangle width size of the rectangle along the x axis height size of the rectangle along the y axis DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 d3 select svg append rect attr x 30 attr y 30 attr width 100 attr height 50 attr fill rgb 0 0 255 script body html Circle Element A circle is drawn using the circle tag For example you would use it as follows circle cx 50 cy 50 r 20 The attributes of the circle tag are cx x coordinate of the centre of the circle cy y coordinate of the centre of the circle r radius of the circle A simple example is given below DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 d3 select svg append circle attr cx 100 attr cy 30 attr r 20 attr fill rgb 255 0 0 script body html Ellipse Element The ellipse element as you might have guessed is represented by the ellipse tag and is used as follows ellipse cx 100 cy 20 rx 30 ry 50 The attributes of the ellipse element are cx x coordinates for the centre position cy y coordinates for the centre position rx radius of the circle along the x direction ry radius of the circle along the y direction A simple example of the ellispe is given below DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 d3 select svg append ellipse attr cx 100 attr cy 30 attr rx 70 attr ry 20 attr fill rgb 255 0 255 script body html Note if the position of the drawn element is outside of the boundaries of the containing SVG it will be clipped i e you won t see the parts of the element that leave the SVG edges DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body script var svg d3 select body create svg element append svg attr height 200 attr width 200 randomly put circles for let i 0 i 10 i svg append circle attr cx Math random 250 attr cy Math random 250 attr r 10 Math random 50 attr fill rgb Math random 255 Math random 255 Math random 255 end for i script body html