D3 Drawing Charts One of the oldest ways of visualizing data is through charts Obviously D3 supports a variety of chart drawing solutions for example Bar Chart Pie Chart Circle Chart Donut Chart Line Chart Bubble Chart Let s look at the some of the main chart types and how to create them using D3 Bar Chart You re now going to create a bar chart using SVG parts of D3 For this example you can use the rect element for the bars and the text element to display details about the data i e axis information and what the bars mean Step 1 Adding style in the rect element add the following style to the rect element svg rect fill gray Step 2 Add styles in text element add the following CSS class to apply styles to text values Add this style to SVG text element svg text fill yellow font 12px san serif text anchor end The CSS fill is used to apply colors Text anchor is used to position the text towards the right end of the bars Step 3 Define the variables add the variables to the script script let data 10 5 12 15 let width 300 let scaleFactor 20 let barHeight 30 script width width of the SVG scaleFactor scaled to a pixel value that is visible on screen barHeight This is the static height of the horizontal bars Step 4 Append SVG elements you append SVG elements in D3 using the following code let graph d3 select body append svg attr width width attr height barHeight data length You first select the document body then you create a new SVG and append it to the body You then build your bar graph inside the SVG element You then set the width and height of the SVG The height is calculated using the bar height times the number of data values You have to take the bar height as 30 and the data array is of size 4 Then the height is calculated as barHeight data length which is 120px Step 5 Apply transformation You apply the transformation to the bar using the following let bar graph selectAll g data data enter append g attr transform function d i return translate 0 i barHeight Above each bar corresponds to an element There for youc reate a group of elements Each of your group elemetns needs to be positioned below the other to build a horizontal bar chart The transformation formula is index multiplied by the bar height Step 6 Append rect element to the bar in the previous step you appended the group elements Now you add the rect elements to the bar using the following bar append rect attr width function d return d scaleFactor attr height barHeight 1 Step 7 Display data this is the last step and lets you display the data on each bar using the following bar append text attr x function d return d scaleFactor attr y barHeight 2 attr dy 35em text function d return d In the above the width is defined as data value multiplied by the scale factor Text elements do not support padding or magin For this reason you need to dive it a dy offset This is used to align the text vertically Step 8 Complete working example the following brings together all of the steps DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script style svg rect fill gray svg text fill yellow font 12px sans serif text anchor end style head body style height 100pt script let data 10 5 15 4 let width 300 let scaleFactor 20 let barHeight 30 let graph d3 select body append svg attr width width attr height barHeight data length let bar graph selectAll g data data enter append g attr transform function d i return translate 0 i barHeight bar append rect attr width function d return d scaleFactor attr height barHeight 1 bar append text attr x function d return d scaleFactor attr y barHeight 2 attr dy 35em text function d return d script body html Circle Chart A circle chart is a circular statistical graphic which is divided into slices to illustrate a numerical proportion You ll now learn how to draw a circle chart using D3 Step 1 Define your variables you define the variables for your chart in the script script let width 400 let height 400 let data 10 30 40 let colors red green blue script width width of the SVG height height of the SVG data array of data elements colors colors you ll apply to the circle elements Step 2 Append SVG elements you ll now append the SVG elements with D3 using the following let svg d3 select body append svg attr width width attr height height Step 3 Apply transformation you ll apply the transformation to the SVG using the following let g svg selectAll g data data enter append g attr transform function d i return translate 0 0 let g svg selectAll g group of elements to hold all the circles data data binds your data array to the group elements enter creates placeholders for your group elements append g appends group elemetns to your page attr transform function d i return translate 0 0 The translate is used to position your elements iwth respect to the origin Step 4 Append circle elements you append the circle elements to the group using the following g append circle You add attributes to the group using the following attr cx function d i return i 75 50 You use the x coorcinate of the centre of each circle You multiply the index of the circle with 75 and add some padding 50 between the circles Next you set the y coordinates of the centre of each circle This is used to uniform all the circles attr cy function d i return 75 You then set the radius of each circle as given below attr r function d return d 1 5 The radius is multipled with the data value along with a constant 1 5 to increase the circles size Finally you use fill to color each circle as follows attr fill function d i return colors i Step 5 Display data this is the last step You dispaly the data on each cirle using the following g append text attr x function d i return i 75 25 attr y 80 attr stroke teal attr font size 10px attr font family sans serif text function d return d Step 6 Working example putting all the steps together into a complete example DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 100pt script let width 400 let height 400 let data 10 30 40 let colors red green blue let svg d3 select body append svg attr width width attr height height let g svg selectAll g data data enter append g attr transform function d i return translate 0 0 g append circle attr cx function d i return i 75 50 attr cy function d i return 75 attr r function d return d 1 5 attr fill function d i return colors i g append text attr x function d i return i 75 25 attr y 80 attr stroke teal attr font size 10px attr font family sans serif text function d return d script body html Pie Chart A pie chart divides up a circular region into slices to show numerical proportions Now you ll see how to create a simple pie chart using D3 To enable you to draw a pie chart you need to be aware of two methods d3 arc method d3 pie method The d3 arc Method The d3 arc generates an arc You nee dto set the inner radius and the outer radius for the arc If the inner radius is 0 the result will be a pie chart otherwise the result will be a donut chart which you ll learn about later The d3 pie Method The d3 pie method is used to generate a pie chart It takes the data from a dataset and calcualtes the start angle and eng angle for each wedge of the pie chart DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body insert the csv script file inline for testing however you can have an external url that refers to your csv data which is loaded in automatically by d3 csv method script id csv type text csv states percentage Up 80 00 Ma 70 00 Bi 65 00 Mp 60 00 Gu 50 00 Wb 49 00 Tn 35 00 script script let tex document getElementById csv text let csv URL createObjectURL new Blob tex d3 csv csv then function data console log columns are data columns script body html Complete Pie Chart Example DOCTYPE html html head style arc text font 10px sans serif text anchor middle arc path stroke fff title fill teal font weight bold style script src https d3js org d3 v4 min js script head body svg width 500 height 400 svg script id csv type text csv browser percent Chrome 73 70 IE Edge 4 90 Firefox 15 40 Safari 3 60 Opera 1 00 script script let svg d3 select svg let width svg attr width let height svg attr height let radius Math min width height 2 let g svg append g attr transform translate width 2 height 2 let color d3 scaleOrdinal 4daf4a 377eb8 ff7f00 984ea3 e41a1c let pie d3 pie value function d return d percent let path d3 arc outerRadius radius 10 innerRadius 0 let label d3 arc outerRadius radius innerRadius radius 80 let csv document getElementById csv text let blob new Blob csv let blobUrl URL createObjectURL blob d3 csv blobUrl function error data if error throw error let arc g selectAll arc data pie data enter append g attr class arc arc append path attr d path attr fill function d return color d data browser console log arc arc append text attr transform function d return translate label centroid d text function d return d data browser svg append g attr transform translate width 2 120 20 append text text Browser use statistics Jan 2017 attr class title script body html Donut Chart You can modify your existing pie chart to a donut with a small modification var arc d3 arc outerRadius radius innerRadius 100 DOCTYPE html html head style arc text font 10px sans serif text anchor middle arc path stroke fff title fill teal font weight bold style script src https d3js org d3 v4 min js script head body svg width 500 height 400 svg script id csv type text csv browser percent Chrome 73 70 IE Edge 4 90 Firefox 15 40 Safari 3 60 Opera 1 00 script script let svg d3 select svg let width svg attr width let height svg attr height let radius Math min width height 2 let g svg append g attr transform translate width 2 height 2 let color d3 scaleOrdinal 4daf4a 377eb8 ff7f00 984ea3 e41a1c let pie d3 pie value function d return d percent let path d3 arc outerRadius radius 10 innerRadius 100 let label d3 arc outerRadius radius innerRadius radius 80 let csv document getElementById csv text let blob new Blob csv let blobUrl URL createObjectURL blob d3 csv blobUrl function error data if error throw error let arc g selectAll arc data pie data enter append g attr class arc arc append path attr d path attr fill function d return color d data browser console log arc arc append text attr transform function d return translate label centroid d text function d return d data browser svg append g attr transform translate width 2 120 20 append text text Browser use statistics Jan 2017 attr class title script body html
Working example putting all the steps together into a complete example DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body style height 100pt script let width 400 let height 400 let data 10 30 40 let colors red green blue let svg d3 select body append svg attr width width attr height height let g svg selectAll g data data enter append g attr transform function d i return translate 0 0 g append circle attr cx function d i return i 75 50 attr cy function d i return 75 attr r function d return d 1 5 attr fill function d i return colors i g append text attr x function d i return i 75 25 attr y 80 attr stroke teal attr font size 10px attr font family sans serif text function d return d script body html Pie Chart A pie chart divides up a circular region into slices to show numerical proportions Now you ll see how to create a simple pie chart using D3 To enable you to draw a pie chart you need to be aware of two methods d3 arc method d3 pie method The d3 arc Method The d3 arc generates an arc You nee dto set the inner radius and the outer radius for the arc If the inner radius is 0 the result will be a pie chart otherwise the result will be a donut chart which you ll learn about later The d3 pie Method The d3 pie method is used to generate a pie chart It takes the data from a dataset and calcualtes the start angle and eng angle for each wedge of the pie chart DOCTYPE html html head script type text javascript src https d3js org d3 v7 min js script head body insert the csv script file inline for testing however you can have an external url that refers to your csv data which is loaded in automatically by d3 csv method script id csv type text csv states percentage Up 80 00 Ma 70 00 Bi 65 00 Mp 60 00 Gu 50 00 Wb 49 00 Tn 35 00 script script let tex document getElementById csv text let csv URL createObjectURL new Blob tex d3 csv csv then function data console log columns are data columns script body html Complete Pie Chart Example DOCTYPE html html head style arc text font 10px sans serif text anchor middle arc path stroke fff title fill teal font weight bold style script src https d3js org d3 v4 min js script head body svg width 500 height 400 svg script id csv type text csv browser percent Chrome 73 70 IE Edge 4 90 Firefox 15 40 Safari 3 60 Opera 1 00 script script let svg d3 select svg let width svg attr width let height svg attr height let radius Math min width height 2 let g svg append g attr transform translate width 2 height 2 let color d3 scaleOrdinal 4daf4a 377eb8 ff7f00 984ea3 e41a1c let pie d3 pie value function d return d percent let path d3 arc outerRadius radius 10 innerRadius 0 let label d3 arc outerRadius radius innerRadius radius 80 let csv document getElementById csv text let blob new Blob csv let blobUrl URL createObjectURL blob d3 csv blobUrl function error data if error throw error let arc g selectAll arc data pie data enter append g attr class arc arc append path attr d path attr fill function d return color d data browser console log arc arc append text attr transform function d return translate label centroid d text function d return d data browser svg append g attr transform translate width 2 120 20 append text text Browser use statistics Jan 2017 attr class title script body html Donut Chart You can modify your existing pie chart to a donut with a small modification var arc d3 arc outerRadius radius innerRadius 100 DOCTYPE html html head style arc text font 10px sans serif text anchor middle arc path stroke fff title fill teal font weight bold style script src https d3js org d3 v4 min js script head body svg width 500 height 400 svg script id csv type text csv browser percent Chrome 73 70 IE Edge 4 90 Firefox 15 40 Safari 3 60 Opera 1 00 script script let svg d3 select svg let width svg attr width let height svg attr height let radius Math min width height 2 let g svg append g attr transform translate width 2 height 2 let color d3 scaleOrdinal 4daf4a 377eb8 ff7f00 984ea3 e41a1c let pie d3 pie value function d return d percent let path d3 arc outerRadius radius 10 innerRadius 100 let label d3 arc outerRadius radius innerRadius radius 80 let csv document getElementById csv text let blob new Blob csv let blobUrl URL createObjectURL blob d3 csv blobUrl function error data if error throw error let arc g selectAll arc data pie data enter append g attr class arc arc append path attr d path attr fill function d return color d data browser console log arc arc append text attr transform function d return translate label centroid d text function d return d data browser svg append g attr transform translate width 2 120 20 append text text Browser use statistics Jan 2017 attr class title script body html