{"id":10348,"date":"2024-03-04T10:30:00","date_gmt":"2024-03-04T10:30:00","guid":{"rendered":"https:\/\/codehim.com\/?p=10348"},"modified":"2024-03-04T08:30:59","modified_gmt":"2024-03-04T03:30:59","slug":"interactive-gantt-chart-using-d3-js","status":"publish","type":"post","link":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/","title":{"rendered":"Interactive Gantt Chart Using D3 JS"},"content":{"rendered":"

This code generates an Interactive Gantt Chart using D3 JS. It visualizes tasks over time. The chart displays task types, start, and end times. It helps manage project timelines visually. The chart color-codes tasks by type for easy distinction.<\/p>\n

You can use this code for project management<\/a>. It helps track tasks visually, aiding in schedule planning.<\/p>\n

How to Create Interactive Gantt Chart Using D3 Js<\/h2>\n

1. First of all, load the D3 JS by adding the following CDN link into the head tag of your HTML document.<\/p>\n

<script src='https:\/\/cdnjs.cloudflare.com\/ajax\/libs\/d3\/3.3.3\/d3.min.js'><\/script><\/pre>\n
2. Create the necessary HTML structure. Use the following code snippet that includes the div elements for the container and SVG:<\/p>\n
<div id = \"container\">\r\n<div class = \"svg\"><\/div>\r\n<div id = \"tag\"><\/div>\r\n<\/div><\/pre>\n
3. Now, use the following CSS code to style the Gantt Chart and its elements. This code ensures proper layout and appearance.<\/p>\n
* {\r\n      margin: 0;\r\n      padding: 0;\r\n  }\r\n\r\n  body {\r\n      background: #fff;\r\n      font-family: 'Open-Sans',sans-serif;\r\n\r\n  }\r\n\r\n#container{\r\n  margin: 0 auto;\r\n  position: relative;\r\n  width:800px;\r\n  overflow: visible;\r\n}\r\n\r\n\r\n  .svg {\r\n    width:800px;\r\n    height:400px;\r\n    overflow: visible;\r\n    position:absolute;\r\n}\r\n\r\n.grid .tick {\r\n    stroke: lightgrey;\r\n    opacity: 0.3;\r\n    shape-rendering: crispEdges;\r\n}\r\n.grid path {\r\n      stroke-width: 0;\r\n}\r\n\r\n\r\n#tag {\r\n  color: white;\r\n  background: #FA283D;\r\n  width: 150px;\r\n  position: absolute;\r\n  display: none;\r\n  padding:3px 6px;\r\n  margin-left: -80px;\r\n  font-size: 11px;\r\n}\r\n\r\n\r\n\r\n#tag:before {\r\n  border: solid transparent;\r\n  content: ' ';\r\n  height: 0;\r\n  left: 50%;\r\n  margin-left: -5px;\r\n  position: absolute;\r\n  width: 0;\r\n  border-width: 10px;\r\n  border-bottom-color: #FA283D;\r\n  top: -20px;\r\n}<\/pre>\n
4. Finally, add the following JavaScript function to activate the chart. Define your tasks in the JavaScript code. Modify the taskArray<\/code> variable to include your project’s tasks. Specify task names, types, start times, end times, and additional details if needed.<\/p>\n
Adjust parameters like chart dimensions, colors, and padding within the makeGant<\/code> function to suit your project requirements.<\/p>\n
var w = 800;\r\n  var h = 400;\r\n\r\n\r\n  var svg = d3.selectAll(\".svg\")\r\n  \/\/.selectAll(\"svg\")\r\n  .append(\"svg\")\r\n  .attr(\"width\", w)\r\n  .attr(\"height\", h)\r\n  .attr(\"class\", \"svg\");\r\n\r\n\r\n    var taskArray = [\r\n  {\r\n    task: \"conceptualize\",\r\n    type: \"development\",\r\n    startTime: \"2013-1-28\", \/\/year\/month\/day\r\n    endTime: \"2013-2-1\",\r\n    details: \"This actually didn't take any conceptualization\"\r\n},\r\n\r\n{\r\n    task: \"sketch\",\r\n    type: \"development\",\r\n    startTime: \"2013-2-1\",\r\n    endTime: \"2013-2-6\",\r\n    details: \"No sketching either, really\"\r\n},\r\n\r\n{\r\n    task: \"color profiles\",\r\n    type: \"development\",\r\n    startTime: \"2013-2-6\",\r\n    endTime: \"2013-2-9\"\r\n},\r\n\r\n{\r\n    task: \"HTML\",\r\n    type: \"coding\",\r\n    startTime: \"2013-2-2\",\r\n    endTime: \"2013-2-6\",\r\n    details: \"all three lines of it\"\r\n},\r\n\r\n{\r\n    task: \"write the JS\",\r\n    type: \"coding\",\r\n    startTime: \"2013-2-6\",\r\n    endTime: \"2013-2-9\"\r\n},\r\n\r\n{\r\n    task: \"advertise\",\r\n    type: \"promotion\",\r\n    startTime: \"2013-2-9\",\r\n    endTime: \"2013-2-12\",\r\n    details: \"This counts, right?\"\r\n},\r\n\r\n{\r\n    task: \"spam links\",\r\n    type: \"promotion\",\r\n    startTime: \"2013-2-12\",\r\n    endTime: \"2013-2-14\"\r\n},\r\n{\r\n    task: \"eat\",\r\n    type: \"celebration\",\r\n    startTime: \"2013-2-8\",\r\n    endTime: \"2013-2-13\",\r\n    details: \"All the things\"\r\n},\r\n\r\n{\r\n    task: \"crying\",\r\n    type: \"celebration\",\r\n    startTime: \"2013-2-13\",\r\n    endTime: \"2013-2-16\"\r\n},\r\n\r\n];\r\n\r\nvar dateFormat = d3.time.format(\"%Y-%m-%d\");\r\n\r\nvar timeScale = d3.time.scale()\r\n        .domain([d3.min(taskArray, function(d) {return dateFormat.parse(d.startTime);}),\r\n                 d3.max(taskArray, function(d) {return dateFormat.parse(d.endTime);})])\r\n        .range([0,w-150]);\r\n\r\nvar categories = new Array();\r\n\r\nfor (var i = 0; i < taskArray.length; i++){\r\n    categories.push(taskArray[i].type);\r\n}\r\n\r\nvar catsUnfiltered = categories; \/\/for vert labels\r\n\r\ncategories = checkUnique(categories);\r\n\r\n\r\nmakeGant(taskArray, w, h);\r\n\r\nvar title = svg.append(\"text\")\r\n              .text(\"Gantt Chart Process\")\r\n              .attr(\"x\", w\/2)\r\n              .attr(\"y\", 25)\r\n              .attr(\"text-anchor\", \"middle\")\r\n              .attr(\"font-size\", 18)\r\n              .attr(\"fill\", \"#009FFC\");\r\n\r\n\r\n\r\nfunction makeGant(tasks, pageWidth, pageHeight){\r\n\r\nvar barHeight = 20;\r\nvar gap = barHeight + 4;\r\nvar topPadding = 75;\r\nvar sidePadding = 75;\r\n\r\nvar colorScale = d3.scale.linear()\r\n    .domain([0, categories.length])\r\n    .range([\"#00B9FA\", \"#F95002\"])\r\n    .interpolate(d3.interpolateHcl);\r\n\r\nmakeGrid(sidePadding, topPadding, pageWidth, pageHeight);\r\ndrawRects(tasks, gap, topPadding, sidePadding, barHeight, colorScale, pageWidth, pageHeight);\r\nvertLabels(gap, topPadding, sidePadding, barHeight, colorScale);\r\n\r\n}\r\n\r\n\r\nfunction drawRects(theArray, theGap, theTopPad, theSidePad, theBarHeight, theColorScale, w, h){\r\n\r\nvar bigRects = svg.append(\"g\")\r\n    .selectAll(\"rect\")\r\n   .data(theArray)\r\n   .enter()\r\n   .append(\"rect\")\r\n   .attr(\"x\", 0)\r\n   .attr(\"y\", function(d, i){\r\n      return i*theGap + theTopPad - 2;\r\n  })\r\n   .attr(\"width\", function(d){\r\n      return w-theSidePad\/2;\r\n   })\r\n   .attr(\"height\", theGap)\r\n   .attr(\"stroke\", \"none\")\r\n   .attr(\"fill\", function(d){\r\n    for (var i = 0; i < categories.length; i++){\r\n        if (d.type == categories[i]){\r\n          return d3.rgb(theColorScale(i));\r\n        }\r\n    }\r\n   })\r\n   .attr(\"opacity\", 0.2);\r\n\r\n\r\n     var rectangles = svg.append('g')\r\n     .selectAll(\"rect\")\r\n     .data(theArray)\r\n     .enter();\r\n\r\n\r\n   var innerRects = rectangles.append(\"rect\")\r\n             .attr(\"rx\", 3)\r\n             .attr(\"ry\", 3)\r\n             .attr(\"x\", function(d){\r\n              return timeScale(dateFormat.parse(d.startTime)) + theSidePad;\r\n              })\r\n             .attr(\"y\", function(d, i){\r\n                return i*theGap + theTopPad;\r\n            })\r\n             .attr(\"width\", function(d){\r\n                return (timeScale(dateFormat.parse(d.endTime))-timeScale(dateFormat.parse(d.startTime)));\r\n             })\r\n             .attr(\"height\", theBarHeight)\r\n             .attr(\"stroke\", \"none\")\r\n             .attr(\"fill\", function(d){\r\n              for (var i = 0; i < categories.length; i++){\r\n                  if (d.type == categories[i]){\r\n                    return d3.rgb(theColorScale(i));\r\n                  }\r\n              }\r\n             })\r\n   \r\n\r\n         var rectText = rectangles.append(\"text\")\r\n               .text(function(d){\r\n                return d.task;\r\n               })\r\n               .attr(\"x\", function(d){\r\n                return (timeScale(dateFormat.parse(d.endTime))-timeScale(dateFormat.parse(d.startTime)))\/2 + timeScale(dateFormat.parse(d.startTime)) + theSidePad;\r\n                })\r\n               .attr(\"y\", function(d, i){\r\n                  return i*theGap + 14+ theTopPad;\r\n              })\r\n               .attr(\"font-size\", 11)\r\n               .attr(\"text-anchor\", \"middle\")\r\n               .attr(\"text-height\", theBarHeight)\r\n               .attr(\"fill\", \"#fff\");\r\n\r\n\r\nrectText.on('mouseover', function(e) {\r\n \/\/ console.log(this.x.animVal.getItem(this));\r\n               var tag = \"\";\r\n\r\n         if (d3.select(this).data()[0].details != undefined){\r\n          tag = \"Task: \" + d3.select(this).data()[0].task + \"<br\/>\" + \r\n                \"Type: \" + d3.select(this).data()[0].type + \"<br\/>\" + \r\n                \"Starts: \" + d3.select(this).data()[0].startTime + \"<br\/>\" + \r\n                \"Ends: \" + d3.select(this).data()[0].endTime + \"<br\/>\" + \r\n                \"Details: \" + d3.select(this).data()[0].details;\r\n         } else {\r\n          tag = \"Task: \" + d3.select(this).data()[0].task + \"<br\/>\" + \r\n                \"Type: \" + d3.select(this).data()[0].type + \"<br\/>\" + \r\n                \"Starts: \" + d3.select(this).data()[0].startTime + \"<br\/>\" + \r\n                \"Ends: \" + d3.select(this).data()[0].endTime;\r\n         }\r\n         var output = document.getElementById(\"tag\");\r\n\r\n          var x = this.x.animVal.getItem(this) + \"px\";\r\n          var y = this.y.animVal.getItem(this) + 25 + \"px\";\r\n\r\n         output.innerHTML = tag;\r\n         output.style.top = y;\r\n         output.style.left = x;\r\n         output.style.display = \"block\";\r\n       }).on('mouseout', function() {\r\n         var output = document.getElementById(\"tag\");\r\n         output.style.display = \"none\";\r\n             });\r\n\r\n\r\ninnerRects.on('mouseover', function(e) {\r\n \/\/console.log(this);\r\n         var tag = \"\";\r\n\r\n         if (d3.select(this).data()[0].details != undefined){\r\n          tag = \"Task: \" + d3.select(this).data()[0].task + \"<br\/>\" + \r\n                \"Type: \" + d3.select(this).data()[0].type + \"<br\/>\" + \r\n                \"Starts: \" + d3.select(this).data()[0].startTime + \"<br\/>\" + \r\n                \"Ends: \" + d3.select(this).data()[0].endTime + \"<br\/>\" + \r\n                \"Details: \" + d3.select(this).data()[0].details;\r\n         } else {\r\n          tag = \"Task: \" + d3.select(this).data()[0].task + \"<br\/>\" + \r\n                \"Type: \" + d3.select(this).data()[0].type + \"<br\/>\" + \r\n                \"Starts: \" + d3.select(this).data()[0].startTime + \"<br\/>\" + \r\n                \"Ends: \" + d3.select(this).data()[0].endTime;\r\n         }\r\n         var output = document.getElementById(\"tag\");\r\n\r\n         var x = (this.x.animVal.value + this.width.animVal.value\/2) + \"px\";\r\n         var y = this.y.animVal.value + 25 + \"px\";\r\n\r\n         output.innerHTML = tag;\r\n         output.style.top = y;\r\n         output.style.left = x;\r\n         output.style.display = \"block\";\r\n       }).on('mouseout', function() {\r\n         var output = document.getElementById(\"tag\");\r\n         output.style.display = \"none\";\r\n\r\n });\r\n\r\n\r\n\r\n}\r\n\r\n\r\nfunction makeGrid(theSidePad, theTopPad, w, h){\r\n\r\nvar xAxis = d3.svg.axis()\r\n    .scale(timeScale)\r\n    .orient('bottom')\r\n    .ticks(d3.time.days, 1)\r\n    .tickSize(-h+theTopPad+20, 0, 0)\r\n    .tickFormat(d3.time.format('%d %b'));\r\n\r\nvar grid = svg.append('g')\r\n    .attr('class', 'grid')\r\n    .attr('transform', 'translate(' +theSidePad + ', ' + (h - 50) + ')')\r\n    .call(xAxis)\r\n    .selectAll(\"text\")  \r\n            .style(\"text-anchor\", \"middle\")\r\n            .attr(\"fill\", \"#000\")\r\n            .attr(\"stroke\", \"none\")\r\n            .attr(\"font-size\", 10)\r\n            .attr(\"dy\", \"1em\");\r\n}\r\n\r\nfunction vertLabels(theGap, theTopPad, theSidePad, theBarHeight, theColorScale){\r\n  var numOccurances = new Array();\r\n  var prevGap = 0;\r\n\r\n  for (var i = 0; i < categories.length; i++){\r\n    numOccurances[i] = [categories[i], getCount(categories[i], catsUnfiltered)];\r\n  }\r\n\r\n  var axisText = svg.append(\"g\") \/\/without doing this, impossible to put grid lines behind text\r\n   .selectAll(\"text\")\r\n   .data(numOccurances)\r\n   .enter()\r\n   .append(\"text\")\r\n   .text(function(d){\r\n    return d[0];\r\n   })\r\n   .attr(\"x\", 10)\r\n   .attr(\"y\", function(d, i){\r\n    if (i > 0){\r\n        for (var j = 0; j < i; j++){\r\n          prevGap += numOccurances[i-1][1];\r\n         \/\/ console.log(prevGap);\r\n          return d[1]*theGap\/2 + prevGap*theGap + theTopPad;\r\n        }\r\n    } else{\r\n    return d[1]*theGap\/2 + theTopPad;\r\n    }\r\n   })\r\n   .attr(\"font-size\", 11)\r\n   .attr(\"text-anchor\", \"start\")\r\n   .attr(\"text-height\", 14)\r\n   .attr(\"fill\", function(d){\r\n    for (var i = 0; i < categories.length; i++){\r\n        if (d[0] == categories[i]){\r\n        \/\/  console.log(\"true!\");\r\n          return d3.rgb(theColorScale(i)).darker();\r\n        }\r\n    }\r\n   });\r\n\r\n}\r\n\r\n\/\/from this stackexchange question: http:\/\/stackoverflow.com\/questions\/1890203\/unique-for-arrays-in-javascript\r\nfunction checkUnique(arr) {\r\n    var hash = {}, result = [];\r\n    for ( var i = 0, l = arr.length; i < l; ++i ) {\r\n        if ( !hash.hasOwnProperty(arr[i]) ) { \/\/it works with objects! in FF, at least\r\n            hash[ arr[i] ] = true;\r\n            result.push(arr[i]);\r\n        }\r\n    }\r\n    return result;\r\n}\r\n\r\n\/\/from this stackexchange question: http:\/\/stackoverflow.com\/questions\/14227981\/count-how-many-strings-in-an-array-have-duplicates-in-the-same-array\r\nfunction getCounts(arr) {\r\n    var i = arr.length, \/\/ var to loop over\r\n        obj = {}; \/\/ obj to store results\r\n    while (i) obj[arr[--i]] = (obj[arr[i]] || 0) + 1; \/\/ count occurrences\r\n    return obj;\r\n}\r\n\r\n\/\/ get specific from everything\r\nfunction getCount(word, arr) {\r\n    return getCounts(arr)[word] || 0;\r\n}<\/pre>\n
Feel free to modify the code further to suit your specific project needs or integrate it into your web application for streamlined project management.<\/p>\n
That’s all! hopefully, you have successfully created a Gantt Chart Using D3 JS. If you have any questions or suggestions, feel free to comment below.<\/p>\n","protected":false},"excerpt":{"rendered":"
This code generates an Interactive Gantt Chart using D3 JS. It visualizes tasks over time. The chart displays task types,…<\/p>\n","protected":false},"author":1,"featured_media":10357,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[111],"tags":[],"class_list":["post-10348","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-chart-graph"],"acf":[],"yoast_head":"\nInteractive Gantt Chart Using D3 JS — CodeHim<\/title>\n<meta name=\"description\" content=\"Here is a free code snippet to create a Interactive Gantt Chart Using D3 JS. You can view demo and download the source code.\" \/>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"Interactive Gantt Chart Using D3 JS — CodeHim\" \/>\n<meta property=\"og:description\" content=\"Here is a free code snippet to create a Interactive Gantt Chart Using D3 JS. You can view demo and download the source code.\" \/>\n<meta property=\"og:url\" content=\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/\" \/>\n<meta property=\"og:site_name\" content=\"CodeHim\" \/>\n<meta property=\"article:publisher\" content=\"https:\/\/www.facebook.com\/codehimofficial\" \/>\n<meta property=\"article:published_time\" content=\"2024-03-04T10:30:00+00:00\" \/>\n<meta property=\"og:image\" content=\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png\" \/>\n\t<meta property=\"og:image:width\" content=\"1280\" \/>\n\t<meta property=\"og:image:height\" content=\"980\" \/>\n\t<meta property=\"og:image:type\" content=\"image\/png\" \/>\n<meta name=\"author\" content=\"Asif Mughal\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:creator\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:site\" content=\"@CodeHimOfficial\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Asif Mughal\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"2 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\"@context\":\"https:\/\/schema.org\",\"@graph\":[{\"@type\":\"Article\",\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#article\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/\"},\"author\":{\"name\":\"Asif Mughal\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\"},\"headline\":\"Interactive Gantt Chart Using D3 JS\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"mainEntityOfPage\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/\"},\"wordCount\":238,\"commentCount\":0,\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png\",\"articleSection\":[\"Chart & Graph\"],\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"CommentAction\",\"name\":\"Comment\",\"target\":[\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#respond\"]}]},{\"@type\":\"WebPage\",\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/\",\"url\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/\",\"name\":\"Interactive Gantt Chart Using D3 JS — CodeHim\",\"isPartOf\":{\"@id\":\"https:\/\/codehim.com\/#website\"},\"primaryImageOfPage\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#primaryimage\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#primaryimage\"},\"thumbnailUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png\",\"datePublished\":\"2024-03-04T10:30:00+00:00\",\"description\":\"Here is a free code snippet to create a Interactive Gantt Chart Using D3 JS. You can view demo and download the source code.\",\"breadcrumb\":{\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#breadcrumb\"},\"inLanguage\":\"en-US\",\"potentialAction\":[{\"@type\":\"ReadAction\",\"target\":[\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/\"]}]},{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#primaryimage\",\"url\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png\",\"contentUrl\":\"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png\",\"width\":1280,\"height\":980,\"caption\":\"Interactive Gantt Chart Using D3 JS\"},{\"@type\":\"BreadcrumbList\",\"@id\":\"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#breadcrumb\",\"itemListElement\":[{\"@type\":\"ListItem\",\"position\":1,\"name\":\"Home\",\"item\":\"https:\/\/codehim.com\/\"},{\"@type\":\"ListItem\",\"position\":2,\"name\":\"Chart & Graph\",\"item\":\"https:\/\/codehim.com\/category\/chart-graph\/\"},{\"@type\":\"ListItem\",\"position\":3,\"name\":\"Interactive Gantt Chart Using D3 JS\"}]},{\"@type\":\"WebSite\",\"@id\":\"https:\/\/codehim.com\/#website\",\"url\":\"https:\/\/codehim.com\/\",\"name\":\"CodeHim\",\"description\":\"Web Design Code Snippets\",\"publisher\":{\"@id\":\"https:\/\/codehim.com\/#organization\"},\"alternateName\":\"Web Design Codes\",\"potentialAction\":[{\"@type\":\"SearchAction\",\"target\":{\"@type\":\"EntryPoint\",\"urlTemplate\":\"https:\/\/codehim.com\/?s={search_term_string}\"},\"query-input\":{\"@type\":\"PropertyValueSpecification\",\"valueRequired\":true,\"valueName\":\"search_term_string\"}}],\"inLanguage\":\"en-US\"},{\"@type\":\"Organization\",\"@id\":\"https:\/\/codehim.com\/#organization\",\"name\":\"CodeHim - Web Design Code & Scripts\",\"url\":\"https:\/\/codehim.com\/\",\"logo\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\",\"url\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"contentUrl\":\"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg\",\"width\":280,\"height\":280,\"caption\":\"CodeHim - Web Design Code & Scripts\"},\"image\":{\"@id\":\"https:\/\/codehim.com\/#\/schema\/logo\/image\/\"},\"sameAs\":[\"https:\/\/www.facebook.com\/codehimofficial\",\"https:\/\/x.com\/CodeHimOfficial\",\"https:\/\/www.instagram.com\/codehim\/\",\"https:\/\/www.linkedin.com\/company\/codehim\",\"https:\/\/co.pinterest.com\/codehim\/\",\"https:\/\/www.youtube.com\/@codehim\"]},{\"@type\":\"Person\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed\",\"name\":\"Asif Mughal\",\"image\":{\"@type\":\"ImageObject\",\"inLanguage\":\"en-US\",\"@id\":\"https:\/\/codehim.com\/#\/schema\/person\/image\/\",\"url\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"contentUrl\":\"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g\",\"caption\":\"Asif Mughal\"},\"description\":\"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.\",\"sameAs\":[\"https:\/\/codehim.com\"],\"url\":\"https:\/\/codehim.com\/author\/asif-mughal\/\"}]}<\/script>\n<!-- \/ Yoast SEO plugin. -->","yoast_head_json":{"title":"Interactive Gantt Chart Using D3 JS — CodeHim","description":"Here is a free code snippet to create a Interactive Gantt Chart Using D3 JS. You can view demo and download the source code.","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:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/","og_locale":"en_US","og_type":"article","og_title":"Interactive Gantt Chart Using D3 JS — CodeHim","og_description":"Here is a free code snippet to create a Interactive Gantt Chart Using D3 JS. You can view demo and download the source code.","og_url":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/","og_site_name":"CodeHim","article_publisher":"https:\/\/www.facebook.com\/codehimofficial","article_published_time":"2024-03-04T10:30:00+00:00","og_image":[{"width":1280,"height":980,"url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png","type":"image\/png"}],"author":"Asif Mughal","twitter_card":"summary_large_image","twitter_creator":"@CodeHimOfficial","twitter_site":"@CodeHimOfficial","twitter_misc":{"Written by":"Asif Mughal","Est. reading time":"2 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#article","isPartOf":{"@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/"},"author":{"name":"Asif Mughal","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed"},"headline":"Interactive Gantt Chart Using D3 JS","datePublished":"2024-03-04T10:30:00+00:00","mainEntityOfPage":{"@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/"},"wordCount":238,"commentCount":0,"publisher":{"@id":"https:\/\/codehim.com\/#organization"},"image":{"@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png","articleSection":["Chart & Graph"],"inLanguage":"en-US","potentialAction":[{"@type":"CommentAction","name":"Comment","target":["https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#respond"]}]},{"@type":"WebPage","@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/","url":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/","name":"Interactive Gantt Chart Using D3 JS — CodeHim","isPartOf":{"@id":"https:\/\/codehim.com\/#website"},"primaryImageOfPage":{"@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#primaryimage"},"image":{"@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#primaryimage"},"thumbnailUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png","datePublished":"2024-03-04T10:30:00+00:00","description":"Here is a free code snippet to create a Interactive Gantt Chart Using D3 JS. You can view demo and download the source code.","breadcrumb":{"@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/"]}]},{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#primaryimage","url":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png","contentUrl":"https:\/\/codehim.com\/wp-content\/uploads\/2024\/01\/Interactive-Gantt-Chart-Using-D3-JS.png","width":1280,"height":980,"caption":"Interactive Gantt Chart Using D3 JS"},{"@type":"BreadcrumbList","@id":"https:\/\/codehim.com\/chart-graph\/interactive-gantt-chart-using-d3-js\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https:\/\/codehim.com\/"},{"@type":"ListItem","position":2,"name":"Chart & Graph","item":"https:\/\/codehim.com\/category\/chart-graph\/"},{"@type":"ListItem","position":3,"name":"Interactive Gantt Chart Using D3 JS"}]},{"@type":"WebSite","@id":"https:\/\/codehim.com\/#website","url":"https:\/\/codehim.com\/","name":"CodeHim","description":"Web Design Code Snippets","publisher":{"@id":"https:\/\/codehim.com\/#organization"},"alternateName":"Web Design Codes","potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https:\/\/codehim.com\/?s={search_term_string}"},"query-input":{"@type":"PropertyValueSpecification","valueRequired":true,"valueName":"search_term_string"}}],"inLanguage":"en-US"},{"@type":"Organization","@id":"https:\/\/codehim.com\/#organization","name":"CodeHim - Web Design Code & Scripts","url":"https:\/\/codehim.com\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/","url":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","contentUrl":"http:\/\/codehim.com\/wp-content\/uploads\/2023\/06\/Codehim-short-logo.jpg","width":280,"height":280,"caption":"CodeHim - Web Design Code & Scripts"},"image":{"@id":"https:\/\/codehim.com\/#\/schema\/logo\/image\/"},"sameAs":["https:\/\/www.facebook.com\/codehimofficial","https:\/\/x.com\/CodeHimOfficial","https:\/\/www.instagram.com\/codehim\/","https:\/\/www.linkedin.com\/company\/codehim","https:\/\/co.pinterest.com\/codehim\/","https:\/\/www.youtube.com\/@codehim"]},{"@type":"Person","@id":"https:\/\/codehim.com\/#\/schema\/person\/cc48f1dbe072a89a62a98171b7db43ed","name":"Asif Mughal","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"https:\/\/codehim.com\/#\/schema\/person\/image\/","url":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","contentUrl":"https:\/\/secure.gravatar.com\/avatar\/b25bfcd7d4e341c2c6f785a88d8ad2a4?s=96&d=mm&r=g","caption":"Asif Mughal"},"description":"I code and create web elements for amazing people around the world. I like work with new people. New people new Experiences. I truly enjoy what I'm doing, which makes me more passionate about web development and coding. I am always ready to do challenging tasks whether it is about creating a custom CMS from scratch or customizing an existing system.","sameAs":["https:\/\/codehim.com"],"url":"https:\/\/codehim.com\/author\/asif-mughal\/"}]}},"views":3322,"_links":{"self":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10348","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/comments?post=10348"}],"version-history":[{"count":1,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10348\/revisions"}],"predecessor-version":[{"id":11292,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/posts\/10348\/revisions\/11292"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media\/10357"}],"wp:attachment":[{"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/media?parent=10348"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/categories?post=10348"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/codehim.com\/wp-json\/wp\/v2\/tags?post=10348"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}