D3 timeline for representation of tasks for project function

We have a project management tool built in Angular4, and to this, we now want to add a Gantt timeline feature. We believe this feature should be built using D3.js but if you have another idea please let us know. A project has tasks and subtasks that each has - start date - end date - user assigned - status (represented by a color) Summary of functions: - we need to be able to set/update colors of the tasks/subtasks (based on the status) - subtasks should be a little slimmer (less height) than tasks - we want to be able to group/order the timeline by the user or by start/end time - tasks/subtasks need to have click event to trigger a modal (we have modal already) - mouse hover over task/subtask should show a small info box with start/end date, user, status - a task should be grouped together with its' subtasks - the timeline will cover the full width of the website and need to be horizontally scrollable when needed A nice2have, but not a must (depending on workload for this feature) is to be able to drag the task/subtask to give a new date range. Both to move the entire task/subtask and to be able to move start/end date See attached images for an idea of what we're looking for, and please feel free to ask for more details.