{"id":69335,"date":"2016-12-23T16:14:39","date_gmt":"2016-12-23T16:14:39","guid":{"rendered":"http:\/\/webkul.com\/blog\/?p=69335"},"modified":"2016-12-27T06:25:11","modified_gmt":"2016-12-27T06:25:11","slug":"create-charts-using-d3-js","status":"publish","type":"post","link":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/","title":{"rendered":"How to create charts using D3 JS ."},"content":{"rendered":"<p>In this blog , we will learn how to create the charts using d3(Data Driven Documents JS ) . First of all we have to download its library from\u00a0<a href=\"https:\/\/d3js.org\/\" target=\"_blank\">https:\/\/d3js.org\/<\/a>\u00a0 or we can use the cdn \u00a0&lt;script src=&#8221;https:\/\/d3js.org\/d3.v4.min.js&#8221;&gt;&lt;\/script&gt; .<\/p>\n<p>After including the library or using cdn , we can create the charts very easily . For creating the pie chart we can use the following code :<\/p>\n<pre class=\"brush:js\">\/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @package chart\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n\r\nfunction pie_chart(donut){\r\n    var w = 300,                        \r\n    h = 400,                            \r\n    r = 200,                            \r\n    color = d3.scale.category10();     \r\n    \r\n    var vis = d3.select('#report_div')\r\n        .append(\"svg:svg\")              \r\n        .data([data])                   \r\n            .attr(\"width\", '100%')      \r\n            .attr(\"height\", h)\r\n            \r\n        .append(\"svg:g\")                \r\n            .attr(\"transform\", \"translate(\" + r + \",\" + r + \")\")\r\n            if (donut) {\r\n              var arc = d3.svg.arc()              \r\n              .innerRadius(r\/2)\r\n              .outerRadius(r);\r\n            }else{\r\n              var arc = d3.svg.arc()              \r\n              .outerRadius(r);\r\n            }\r\n    \r\n        \r\n    var pie = d3.layout.pie()           \r\n        .value(function(d) { \r\n          return d.value;   \r\n        });\r\n    var arcs = vis.selectAll(\"g.slice\")     \r\n        .data(pie)                          \r\n        .enter()                            \r\n            .append(\"svg:g\")                \r\n                .attr(\"class\", \"slice\")\r\n                .on(\"mouseover\", mouseOverArc_pie)\r\n           .on(\"mousemove\", mouseMoveArc)\r\n           .on(\"mouseout\", mouseOutArc)\r\n              \r\n        arcs.append(\"svg:path\")\r\n                .attr(\"fill\", function(d, i) { return color(i); } ) \r\n                .attr(\"d\", arc);                                    \r\n        arcs.append(\"svg:text\")                                     \r\n                .attr(\"transform\", function(d) {                    \r\n                d.outerRadius = r;\r\n                d.innerRadius = r\/2;\r\n                return \"translate(\" + arc.centroid(d) + \")rotate(\" + angle(d) + \")\";   \r\n              })\r\n            .attr(\"text-anchor\", \"middle\")\r\n            .attr(\"font-size\", \"14px\")                          \r\n            .text(function(d, i) { \r\n              return data[i].label;                \r\n            });   \r\n        }<\/pre>\n<p>&nbsp;<\/p>\n<p><strong>Function Description :\u00a0<\/strong><\/p>\n<p>d3.select(selector) : As the name implies , function is used to select the DOM element by using the selector like id , class or element .<\/p>\n<p>d3.scale.category10() : The function defines a built-in color scheme in the d3 library . We can also use\u00a0d3.scale.category20() ,\u00a0d3.scale.category20b() ,d3.scale.category20c()<\/p>\n<p>d3.layout.pie() : The function is used to calculate the inner and outer angle for drawing the pie chart .<\/p>\n<p>d3.svg.axis() : The function is used to draw the horizontal and vertical axis .<\/p>\n<p>d3.tip() : The function is used to specify the tool tip for specific slice \/ bar in the chart .<\/p>\n<p>The output will be something like this :<\/p>\n<p><img decoding=\"async\" class=\"aligncenter wp-image-69452\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/pie_output.png\" width=\"310\" height=\"300\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/pie_output.png 449w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/pie_output-250x242.png 250w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/pie_output-300x290.png 300w\" sizes=\"(max-width: 310px) 100vw, 310px\" loading=\"lazy\" \/><\/p>\n<p>We can also create other charts like bar chart , bi-level chart , bullet chart , bubble chart etc . Here&#8217;s the code for the bar chart :<\/p>\n<pre class=\"brush:js\">\/**\r\n * Webkul Software.\r\n *\r\n * @category Webkul\r\n * @package chart\r\n * @author Webkul\r\n * @copyright Copyright (c) 2010-2016 Webkul Software Private Limited (https:\/\/webkul.com)\r\n * @license https:\/\/store.webkul.com\/license.html\r\n *\/\r\n\r\nfunction bar_chart(){\r\n  var margin = {top: 40, right: 20, bottom: 30, left: 65},\r\n      \r\n      height = 400 - margin.top - margin.bottom;\r\n  var color = d3.scale.category10();         \r\n  var formatPercent = d3.format(\",d\");\r\n\r\n  var x = d3.scale.ordinal()\r\n      .rangeRoundBands([0, width], .1);\r\n\r\n  var y = d3.scale.linear()\r\n      .range([height, 0]);\r\n\r\n  var xAxis = d3.svg.axis()\r\n      .scale(x)\r\n      \/\/.tickSize('20')\r\n      .orient(\"bottom\");\r\n\r\n  var yAxis = d3.svg.axis()\r\n      .scale(y)\r\n      .orient(\"left\")\r\n      \r\n      .tickFormat(formatPercent);\r\n\r\n  var tip = d3.tip()\r\n    .attr('class', 'd3-tip')\r\n    .offset([-10, 0])\r\n    .html(function(d) {\r\n      return \"&lt;strong&gt;Value:&lt;\/strong&gt; &lt;span style='color:red'&gt;$\" + d.value + \"&lt;\/span&gt;\";\r\n    })\r\n\r\n  var svg = d3.select(\"#report_div\").append(\"svg\")\r\n      .attr(\"width\", width + margin.left + margin.right)\r\n      .attr(\"height\", \"500px\")\r\n    .append(\"g\")\r\n      .attr(\"transform\", \"translate(\" + margin.left + \",\" + margin.top + \")\");\r\n\r\n  svg.call(tip);          \r\n\r\n  data.sort(function(a, b){\r\n    return b.value-a.value;\r\n  });\r\n  var max = 0 ;\r\n  max = data[0].value;\r\n    \/\/ X Axis Label\r\n    x.domain(data.map(function(d) { return d.label; }));\r\n    y.domain([0,max]);\r\n    if (total&gt;20) {\r\n      svg.append(\"g\")\r\n        .attr(\"class\", \"x axis\")\r\n        .attr(\"transform\", \"translate(0,\" + height + \")\")\r\n        .call(xAxis)\r\n        .selectAll(\"text\")\r\n        .style(\"text-anchor\", \"end\")\r\n        .attr(\"dx\", \"0em\")\r\n        .attr(\"dy\", \"0.75em\")\r\n        .attr(\"font-size\", \"10px\")\r\n        .attr(\"transform\", \"rotate(-35)\" );\r\n    } else {\r\n      svg.append(\"g\")\r\n        .attr(\"class\", \"x axis\")\r\n        .attr(\"transform\", \"translate(0,\" + height + \")\")\r\n        .call(xAxis)\r\n        .selectAll(\"text\")\r\n        .style(\"text-anchor\", \"end\")\r\n        .attr(\"dx\", \"0em\")\r\n        .attr(\"dy\", \"0.75em\")\r\n        .attr(\"font-size\", \"14px\")\r\n        .attr(\"transform\", \"rotate(-35)\" );  \r\n    }    \r\n    \r\n\r\n    svg.append(\"g\")\r\n        .attr(\"class\", \"y axis\")\r\n        .attr(\"font-size\", \"14px\")\r\n        .call(yAxis)\r\n      .append(\"text\")\r\n        \r\n        .attr(\"transform\", \"rotate(-90)\")\r\n        .attr(\"y\", 6)\r\n        .attr(\"dy\", \".71em\")\r\n        .style(\"text-anchor\", \"end\")\r\n        .attr(\"font-size\", \"14px\")\r\n        \r\n\r\n    svg.selectAll(\".bar\")\r\n        .data(data)\r\n      .enter().append(\"rect\")\r\n        \/\/.attr(\"class\", \"bar\")\r\n        .attr(\"fill\", function(d, i) { return color(i); } ) \r\n        .attr(\"x\", function(d) { return x(d.label); })\r\n        .attr(\"width\", x.rangeBand())\r\n        .attr(\"y\", function(d) { \r\n          return y(d.value);\r\n         })\r\n        .attr(\"height\", function(d) {\r\n          return height - y(d.value);\r\n         })\r\n        .on('mouseover', tip.show)\r\n        .on('mouseout', tip.hide)\r\n}<\/pre>\n<p>The bar chart will look like as follows :<\/p>\n<p><img decoding=\"async\" class=\"aligncenter size-full wp-image-69453\" src=\"http:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/bar_output.png\" alt=\"\" width=\"265\" height=\"463\" srcset=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/bar_output.png 265w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/bar_output-143x249.png 143w, https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/12\/bar_output-172x300.png 172w\" sizes=\"(max-width: 265px) 100vw, 265px\" loading=\"lazy\" \/><\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>In this blog , we will learn how to create the charts using d3(Data Driven Documents JS ) . First of all we have to download its library from\u00a0https:\/\/d3js.org\/\u00a0 or we can use the cdn \u00a0&lt;script src=&#8221;https:\/\/d3js.org\/d3.v4.min.js&#8221;&gt;&lt;\/script&gt; . After including the library or using cdn , we can create the charts very easily . For <a href=\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/\">[&#8230;]<\/a><\/p>\n","protected":false},"author":124,"featured_media":41008,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"footnotes":""},"categories":[305,13,1],"tags":[1934,4248,1894,1935],"class_list":["post-69335","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-opencart","category-php","category-uncategorized","tag-chart","tag-d3","tag-js","tag-piechart"],"yoast_head":"<!-- This site is optimized with the Yoast SEO plugin v24.5 - https:\/\/yoast.com\/wordpress\/plugins\/seo\/ -->\n<title>How to create charts using D3 JS . - Webkul Blog<\/title>\n<meta name=\"description\" content=\"var w = 300, h = 400, r = 200, color = d3.scale.category10(); var vis = d3.select(&#039;#div&#039;) .append(&quot;svg:svg&quot;) .data([data]) .attr(&quot;width&quot;, &#039;100%&#039;) .attr(&quot;height&quot;, h) .append(&quot;svg:g&quot;) .attr(&quot;transform&quot;, &quot;translate(&quot; + r + &quot;,&quot; + r + &quot;)&quot;) if (donut) { var arc = d3.svg.arc() .innerRadius(r\/2) .outerRadius(r); }else{ var arc = d3.svg.arc() .outerRadius(r); } var pie = d3.layout.pie() .value(function(d) { return d.value; }); var arcs = vis.selectAll(&quot;g.slice&quot;) .data(pie) .enter() .append(&quot;svg:g&quot;) .attr(&quot;class&quot;, &quot;slice&quot;) .on(&quot;mouseover&quot;, mouseOverArc_pie) .on(&quot;mousemove&quot;, mouseMoveArc) .on(&quot;mouseout&quot;, mouseOutArc) arcs.append(&quot;svg:path&quot;) .attr(&quot;fill&quot;, function(d, i) { return color(i); } ) .attr(&quot;d&quot;, arc); arcs.append(&quot;svg:text&quot;) .attr(&quot;transform&quot;, function(d) { d.outerRadius = r; d.innerRadius = r\/2; return &quot;translate(&quot; + arc.centroid(d) + &quot;)rotate(&quot; + angle(d) + &quot;)&quot;; }) .attr(&quot;text-anchor&quot;, &quot;middle&quot;) .attr(&quot;font-size&quot;, &quot;14px&quot;) .text(function(d, i) { return data[i].label; });\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to create charts using D3 JS . - Webkul Blog\" \/>\n<meta property=\"og:description\" content=\"var w = 300, h = 400, r = 200, color = d3.scale.category10(); var vis = d3.select(&#039;#div&#039;) .append(&quot;svg:svg&quot;) .data([data]) .attr(&quot;width&quot;, &#039;100%&#039;) .attr(&quot;height&quot;, h) .append(&quot;svg:g&quot;) .attr(&quot;transform&quot;, &quot;translate(&quot; + r + &quot;,&quot; + r + &quot;)&quot;) if (donut) { var arc = d3.svg.arc() .innerRadius(r\/2) .outerRadius(r); }else{ var arc = d3.svg.arc() .outerRadius(r); } var pie = d3.layout.pie() .value(function(d) { return d.value; }); var arcs = vis.selectAll(&quot;g.slice&quot;) .data(pie) .enter() .append(&quot;svg:g&quot;) .attr(&quot;class&quot;, &quot;slice&quot;) .on(&quot;mouseover&quot;, mouseOverArc_pie) .on(&quot;mousemove&quot;, mouseMoveArc) .on(&quot;mouseout&quot;, mouseOutArc) arcs.append(&quot;svg:path&quot;) .attr(&quot;fill&quot;, function(d, i) { return color(i); } ) .attr(&quot;d&quot;, arc); arcs.append(&quot;svg:text&quot;) .attr(&quot;transform&quot;, function(d) { d.outerRadius = r; d.innerRadius = r\/2; return &quot;translate(&quot; + arc.centroid(d) + &quot;)rotate(&quot; + angle(d) + &quot;)&quot;; }) .attr(&quot;text-anchor&quot;, &quot;middle&quot;) .attr(&quot;font-size&quot;, &quot;14px&quot;) .text(function(d, i) { return data[i].label; });\" \/>\n<meta property=\"og:url\" content=\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/\" \/>\n<meta property=\"og:site_name\" content=\"Webkul Blog\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/webkul\/\" \/>\n<meta property=\"article:published_time\" content=\"2016-12-23T16:14:39+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2016-12-27T06:25:11+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\" \/>\n\t<meta property=\"og:image:width\" content=\"825\" \/>\n\t<meta property=\"og:image:height\" content=\"260\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Sarang Agrawal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@webkul\" \/>\n<meta name=\"twitter:site\" content=\"@webkul\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Sarang Agrawal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"4 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/\"},\"author\":{\"name\":\"Sarang Agrawal\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3fe787f5e9200d06d3ebf9aa86af1558\"},\"headline\":\"How to create charts using D3 JS .\",\"datePublished\":\"2016-12-23T16:14:39+00:00\",\"dateModified\":\"2016-12-27T06:25:11+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/\"},\"wordCount\":230,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"keywords\":[\"Chart\",\"D3\",\"js\",\"Piechart\"],\"articleSection\":[\"opencart\",\"php\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/\",\"url\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/\",\"name\":\"How to create charts using D3 JS . - Webkul Blog\",\"isPartOf\":{\"@id\":\"https:\/\/webkul.com\/blog\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"datePublished\":\"2016-12-23T16:14:39+00:00\",\"dateModified\":\"2016-12-27T06:25:11+00:00\",\"description\":\"var w = 300, h = 400, r = 200, color = d3.scale.category10(); var vis = d3.select('#div') .append(\\\"svg:svg\\\") .data([data]) .attr(\\\"width\\\", '100%') .attr(\\\"height\\\", h) .append(\\\"svg:g\\\") .attr(\\\"transform\\\", \\\"translate(\\\" + r + \\\",\\\" + r + \\\")\\\") if (donut) { var arc = d3.svg.arc() .innerRadius(r\/2) .outerRadius(r); }else{ var arc = d3.svg.arc() .outerRadius(r); } var pie = d3.layout.pie() .value(function(d) { return d.value; }); var arcs = vis.selectAll(\\\"g.slice\\\") .data(pie) .enter() .append(\\\"svg:g\\\") .attr(\\\"class\\\", \\\"slice\\\") .on(\\\"mouseover\\\", mouseOverArc_pie) .on(\\\"mousemove\\\", mouseMoveArc) .on(\\\"mouseout\\\", mouseOutArc) arcs.append(\\\"svg:path\\\") .attr(\\\"fill\\\", function(d, i) { return color(i); } ) .attr(\\\"d\\\", arc); arcs.append(\\\"svg:text\\\") .attr(\\\"transform\\\", function(d) { d.outerRadius = r; d.innerRadius = r\/2; return \\\"translate(\\\" + arc.centroid(d) + \\\")rotate(\\\" + angle(d) + \\\")\\\"; }) .attr(\\\"text-anchor\\\", \\\"middle\\\") .attr(\\\"font-size\\\", \\\"14px\\\") .text(function(d, i) { return data[i].label; });\",\"breadcrumb\":{\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#primaryimage\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png\",\"width\":825,\"height\":260},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/webkul.com\/blog\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"How to create charts using D3 JS .\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/webkul.com\/blog\/#website\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"name\":\"Webkul Blog\",\"description\":\"\",\"publisher\":{\"@id\":\"https:\/\/webkul.com\/blog\/#organization\"},\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/webkul.com\/blog\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/webkul.com\/blog\/#organization\",\"name\":\"WebKul Software Private Limited\",\"url\":\"https:\/\/webkul.com\/blog\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\",\"url\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"contentUrl\":\"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png\",\"width\":380,\"height\":380,\"caption\":\"WebKul Software Private Limited\"},\"image\":{\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/webkul\/\",\"https:\/\/x.com\/webkul\",\"https:\/\/www.instagram.com\/webkul\/\",\"https:\/\/www.linkedin.com\/company\/webkul\",\"https:\/\/www.youtube.com\/user\/webkul\/\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/3fe787f5e9200d06d3ebf9aa86af1558\",\"name\":\"Sarang Agrawal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/463bd0dd4a24de98604547719c1903e8af6b4133153ba8cc08799c7b2e3a5ce6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/463bd0dd4a24de98604547719c1903e8af6b4133153ba8cc08799c7b2e3a5ce6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g\",\"caption\":\"Sarang Agrawal\"},\"sameAs\":[\"http:\/\/webkul.com\/blog\"],\"url\":\"https:\/\/webkul.com\/blog\/author\/sarang-agrawal032\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"How to create charts using D3 JS . - Webkul Blog","description":"var w = 300, h = 400, r = 200, color = d3.scale.category10(); var vis = d3.select('#div') .append(\"svg:svg\") .data([data]) .attr(\"width\", '100%') .attr(\"height\", h) .append(\"svg:g\") .attr(\"transform\", \"translate(\" + r + \",\" + r + \")\") if (donut) { var arc = d3.svg.arc() .innerRadius(r\/2) .outerRadius(r); }else{ var arc = d3.svg.arc() .outerRadius(r); } var pie = d3.layout.pie() .value(function(d) { return d.value; }); var arcs = vis.selectAll(\"g.slice\") .data(pie) .enter() .append(\"svg:g\") .attr(\"class\", \"slice\") .on(\"mouseover\", mouseOverArc_pie) .on(\"mousemove\", mouseMoveArc) .on(\"mouseout\", mouseOutArc) arcs.append(\"svg:path\") .attr(\"fill\", function(d, i) { return color(i); } ) .attr(\"d\", arc); arcs.append(\"svg:text\") .attr(\"transform\", function(d) { d.outerRadius = r; d.innerRadius = r\/2; return \"translate(\" + arc.centroid(d) + \")rotate(\" + angle(d) + \")\"; }) .attr(\"text-anchor\", \"middle\") .attr(\"font-size\", \"14px\") .text(function(d, i) { return data[i].label; });","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/","og_locale":"en_US","og_type":"article","og_title":"How to create charts using D3 JS . - Webkul Blog","og_description":"var w = 300, h = 400, r = 200, color = d3.scale.category10(); var vis = d3.select('#div') .append(\"svg:svg\") .data([data]) .attr(\"width\", '100%') .attr(\"height\", h) .append(\"svg:g\") .attr(\"transform\", \"translate(\" + r + \",\" + r + \")\") if (donut) { var arc = d3.svg.arc() .innerRadius(r\/2) .outerRadius(r); }else{ var arc = d3.svg.arc() .outerRadius(r); } var pie = d3.layout.pie() .value(function(d) { return d.value; }); var arcs = vis.selectAll(\"g.slice\") .data(pie) .enter() .append(\"svg:g\") .attr(\"class\", \"slice\") .on(\"mouseover\", mouseOverArc_pie) .on(\"mousemove\", mouseMoveArc) .on(\"mouseout\", mouseOutArc) arcs.append(\"svg:path\") .attr(\"fill\", function(d, i) { return color(i); } ) .attr(\"d\", arc); arcs.append(\"svg:text\") .attr(\"transform\", function(d) { d.outerRadius = r; d.innerRadius = r\/2; return \"translate(\" + arc.centroid(d) + \")rotate(\" + angle(d) + \")\"; }) .attr(\"text-anchor\", \"middle\") .attr(\"font-size\", \"14px\") .text(function(d, i) { return data[i].label; });","og_url":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/","og_site_name":"Webkul Blog","article_publisher":"https:\/\/www.facebook.com\/webkul\/","article_published_time":"2016-12-23T16:14:39+00:00","article_modified_time":"2016-12-27T06:25:11+00:00","og_image":[{"width":825,"height":260,"url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","type":"image\/png"}],"author":"Sarang Agrawal","twitter_card":"summary_large_image","twitter_creator":"@webkul","twitter_site":"@webkul","twitter_misc":{"Written by":"Sarang Agrawal","Est. reading time":"4 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#article","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/"},"author":{"name":"Sarang Agrawal","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3fe787f5e9200d06d3ebf9aa86af1558"},"headline":"How to create charts using D3 JS .","datePublished":"2016-12-23T16:14:39+00:00","dateModified":"2016-12-27T06:25:11+00:00","mainEntityOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/"},"wordCount":230,"commentCount":0,"publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","keywords":["Chart","D3","js","Piechart"],"articleSection":["opencart","php"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/","url":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/","name":"How to create charts using D3 JS . - Webkul Blog","isPartOf":{"@id":"https:\/\/webkul.com\/blog\/#website"},"primaryImageOfPage":{"@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#primaryimage"},"image":{"@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#primaryimage"},"thumbnailUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","datePublished":"2016-12-23T16:14:39+00:00","dateModified":"2016-12-27T06:25:11+00:00","description":"var w = 300, h = 400, r = 200, color = d3.scale.category10(); var vis = d3.select('#div') .append(\"svg:svg\") .data([data]) .attr(\"width\", '100%') .attr(\"height\", h) .append(\"svg:g\") .attr(\"transform\", \"translate(\" + r + \",\" + r + \")\") if (donut) { var arc = d3.svg.arc() .innerRadius(r\/2) .outerRadius(r); }else{ var arc = d3.svg.arc() .outerRadius(r); } var pie = d3.layout.pie() .value(function(d) { return d.value; }); var arcs = vis.selectAll(\"g.slice\") .data(pie) .enter() .append(\"svg:g\") .attr(\"class\", \"slice\") .on(\"mouseover\", mouseOverArc_pie) .on(\"mousemove\", mouseMoveArc) .on(\"mouseout\", mouseOutArc) arcs.append(\"svg:path\") .attr(\"fill\", function(d, i) { return color(i); } ) .attr(\"d\", arc); arcs.append(\"svg:text\") .attr(\"transform\", function(d) { d.outerRadius = r; d.innerRadius = r\/2; return \"translate(\" + arc.centroid(d) + \")rotate(\" + angle(d) + \")\"; }) .attr(\"text-anchor\", \"middle\") .attr(\"font-size\", \"14px\") .text(function(d, i) { return data[i].label; });","breadcrumb":{"@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#primaryimage","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2016\/02\/Opencart-Code-Snippet.png","width":825,"height":260},{"@type":"BreadcrumbList","@id":"https:\/\/webkul.com\/blog\/create-charts-using-d3-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/webkul.com\/blog\/"},{"@type":"ListItem","position":2,"name":"How to create charts using D3 JS ."}]},{"@type":"WebSite","@id":"https:\/\/webkul.com\/blog\/#website","url":"https:\/\/webkul.com\/blog\/","name":"Webkul Blog","description":"","publisher":{"@id":"https:\/\/webkul.com\/blog\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/webkul.com\/blog\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/webkul.com\/blog\/#organization","name":"WebKul Software Private Limited","url":"https:\/\/webkul.com\/blog\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/","url":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","contentUrl":"https:\/\/cdnblog.webkul.com\/blog\/wp-content\/uploads\/2021\/08\/webkul-logo-accent-sq.png","width":380,"height":380,"caption":"WebKul Software Private Limited"},"image":{"@id":"https:\/\/webkul.com\/blog\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/webkul\/","https:\/\/x.com\/webkul","https:\/\/www.instagram.com\/webkul\/","https:\/\/www.linkedin.com\/company\/webkul","https:\/\/www.youtube.com\/user\/webkul\/"]},{"@type":"Person","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/3fe787f5e9200d06d3ebf9aa86af1558","name":"Sarang Agrawal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/webkul.com\/blog\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/463bd0dd4a24de98604547719c1903e8af6b4133153ba8cc08799c7b2e3a5ce6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/463bd0dd4a24de98604547719c1903e8af6b4133153ba8cc08799c7b2e3a5ce6?s=96&d=https%3A%2F%2Fcdnblog.webkul.com%2Fblog%2Fwp-content%2Fuploads%2F2019%2F10%2Fmike.png&r=g","caption":"Sarang Agrawal"},"sameAs":["http:\/\/webkul.com\/blog"],"url":"https:\/\/webkul.com\/blog\/author\/sarang-agrawal032\/"}]}},"amp_enabled":true,"_links":{"self":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/69335","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/users\/124"}],"replies":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/comments?post=69335"}],"version-history":[{"count":8,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/69335\/revisions"}],"predecessor-version":[{"id":69467,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/posts\/69335\/revisions\/69467"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media\/41008"}],"wp:attachment":[{"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/media?parent=69335"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/categories?post=69335"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/webkul.com\/blog\/wp-json\/wp\/v2\/tags?post=69335"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}