25:["$","title",null,{"children":"interactive Gantt chart2 | rita0124 | Observable"}] 49:T1c5a,tasks = [ { task: "BVS cooperation consultation and discussion (2022-06-09~2022-08-31)", group: "General Manager", startDate: "2022-06-09", endDate: "2022-08-31", description: "" }, { task: "BVS contract discussion and signed (2022-09-01~2023-01-09)", group: "General Manager", startDate: "2022-09-01", endDate: "2023-01-09", description: "" }, { task: "Contact Precone for experimental lens case (2023-02-15~2023-05-25)", group: "General Manager", startDate: "2023-02-15", endDate: "2023-05-25", description: "" }, { task: "BVS technology transfer and contact with Taiwan contact lens solution manufacturers (2023-02-03~2023-04-30)", group: "General Manager", startDate: "2023-02-03", endDate: "2023-04-30", description: "" }, { task: "BVS discusses FDA submission content (2023-04-01~2023-04-30)", group: "General Manager", startDate: "2023-04-01", endDate: "2023-04-30", description: "" }, { task: "Buy experimental lens case with Precone (2023-05-26~2023-11-15)", group: "Procurement Department", startDate: "2023-05-26", endDate: "2023-11-15", description: "" }, { task: "BTOX write and revise collaborative experiment plan (2023-04-11~2023-05-30)", group: "Research & Development Department", startDate: "2023-04-11", endDate: "2023-05-30", description: "" }, { task: "Start planning experiments and purchasing equipment (2023-06-01~2023-07-15) ", group: "Research & Development Department", startDate: "2023-06-01", endDate: "2023-07-15", description: "" }, { task: "BVS discuss hydrogen peroxide concentration and levels (2023-07-03~2023-08-04)", group: "Research & Development Department", startDate: "2023-07-03", endDate: "2023-08-04", description: "" }, { task: "Purchasing contact lens solution raw materials (2023-06-01~2023-09-22)", group: "Research & Development Department", startDate: "2023-06-01", endDate: "2023-09-22", description: "" }, { task: "Establishment of metal ion detection method (2023-07-15~2023-08-31)", group: "Research & Development Department", startDate: "2023-07-15", endDate: "2023-08-31", description: "" }, { task: "Liaise with EO and Gamma sterilizers and sterilize containers (2023-08-12-01~2023-09-02)", group: "Research & Development Department", startDate: "2023-08-12", endDate: "2023-09-02", description: "" }, { task: "Consult FCMCS protein and lipid testing method cooperation matters (2023-05-03~2023-06-15)", group: "Research & Development Department", startDate: "2023-05-03", endDate: "2023-06-15", description: "" }, { task: "Try methods of protein, lipid, and residual concentration after reaction (2023-06-15~2023-08-06)", group: "Research & Development Department", startDate: "2023-06-15", endDate: "2023-08-06", description: "" }, { task: "BVS visits Taiwan to discuss experimental details (2023-09-24~2023-09-28)", group: "Research & Development Department", startDate: "2023-09-24", endDate: "2023-09-28", description: "" }, { task: "Contact FCMCS to sign a consulting contract for protein and lipid testing methods (2023-08-07~2023-09-21)", group: "Research & Development Department", startDate: "2023-08-07", endDate: "2023-09-21", description: "" }, { task: "FCMCS provides protein and lipid testing method documents (2023-09-18~2023-09-30)", group: "Research & Development Department", startDate: "2023-09-18", endDate: "2023-09-30", description: "" }, { task: "First attempt to synthesize contact lens solution (2023-09-01~2023-09-22)", group: "Research & Development Department", startDate: "2023-09-01", endDate: "2023-09-22", description: "" }, { task: "Construct reaction tank equipment (2023-09-25~2023-10-08)", group: "Research & Development Department", startDate: "2023-09-25", endDate: "2023-10-08", description: "" }, { task: "Establish experimental production line (2023-10-31~2023-11-21)", group: "Research & Development Department", startDate: "2023-10-31", endDate: "2023-11-21", description: "" }, { task: "The concentration of metal ions in the contact lens solution is high and need to buy new raw materials. (2023-09-25~2023-11-07)", group: "Research & Development Department", startDate: "2023-09-25", endDate: "2023-11-07", description: "" }, { task: "Surfactant raw materials are in short supply and waiting to be obtained (2023-10-13~2023-11-07)", group: "Research & Development Department", startDate: "2023-10-13", endDate: "2023-11-07", description: "" }, { task: "Start trial mass production (2023-11-24~2023-12-07)", group: "Research & Development Department", startDate: "2023-11-24", endDate: "2023-12-07", description: "" }, { task: "Contact Precone to repurchase catalytic fibers and neutralizing rings (2023-11-15~2024-02-28)", group: "Research & Development Department", startDate: "2023-11-15", endDate: "2024-02-28", description: "" }, { task: "Contact and discuss experimental projects with biotech company (2023-12-22~2026-09-04)", group: "Research & Development Department", startDate: "2023-10-15", endDate: "2023-12-21", description: "" }, { task: "Leon-Biotech company begins experimental project (2023-12-22~2026-09-04)", group: "Research & Development Department", startDate: "2023-12-22", endDate: "2026-09-04", description: "" }, { task: "Contact and signed the amoeba experiment contract with the University of Birmingham (2023-10-13~2024-01-31)", group: "Research & Development Department", startDate: "2023-10-13", endDate: "2024-01-31", description: "" }, { task: "Starts amoeba experiment with University of Birmingham (2024-03-01~2024-12-31)", group: "Research & Development Department", startDate: "2024-03-01", endDate: "2024-12-31", description: "" }, { task: "FDA 510k technical documents required to start (2023-11-24~2025-06-30)", group: "Research & Development Department", startDate: "2023-11-24", endDate: "2025-06-30", description: "" }, { task: "Accelerate shelf life (2023-12-08~2025-04-25)", group: "Research & Development Department", startDate: "2023-12-08", endDate: "2025-04-25", description: "" }, { task: "FDA 510k submission and obtaining license (2025-07-01~2026-01-31)", group: "Research & Development Department", startDate: "2025-07-01", endDate: "2026-01-31", description: "" }, { task: "Real-time shelf life (2023-11-24~2026-09-04)", group: "Research & Development Department", startDate: "2023-11-24", endDate: "2026-09-04", description: "" } ]4a:T568,Plot.plot({ marks: [ Plot.frame({ stroke: settings.panelBorder == "show" ? "#ccc" : null }), Plot.barX(tasks, { y: "task", x1: (d) => parser(d.startDate), x2: (d) => parser(d.endDate), fill: "group", rx: settings.barRoundness, insetTop: settings.barHeight, insetBottom: settings.barHeight }), Plot.text(tasks, { y: "task", x: (d) => parser(d.startDate), text: (d) => d.task, textAnchor: "start", dy: settings.textPosition, fontSize: settings.fontSize, stroke: "white", fill: "dimgray", fontWeight: 900 }), Plot.tip(tasks, Plot.pointerY({ y: "task", x1: (d) => parser(d.startDate), x2: (d) => parser(d.endDate), title: (d) => `Team: ${d.group}\nTask: ${d.task}\nDescription: ${d.description}\nStart: ${d.startDate}\nEnd: ${d.endDate}` })) ], height: settings.plotHeight, width: settings.plotWidth, x: { grid: (settings.gridlines == "x") | (settings.gridlines == "both") ? true : null }, y: { domain: domainByDate, label: null, tickFormat: null, tickSize: null, grid: (settings.gridlines == "y") | (settings.gridlines == "both") ? true : null }, color: { domain: domainByGroup, range: colors, legend: true } })4b:[{"id":"026477c1a8f5c605d0a6243959102befa5b2fb52776944df4a8e8de0da5f19a69235223d2cfb2e3aba781a5df4c84f98b2f56a5d980e0cac7f1055dc715b7c65","href":"https://static.observableusercontent.com/files/026477c1a8f5c605d0a6243959102befa5b2fb52776944df4a8e8de0da5f19a69235223d2cfb2e3aba781a5df4c84f98b2f56a5d980e0cac7f1055dc715b7c65","name":"image@3.png","type":"image/png","lastModified":1707211685525.018,"size":129452}] 29:{"id":"e97c39d9aeba086f","slug":null,"title":"interactive Gantt chart2","thumbnail":"8c492ceb82f4678f465e4e2d552d122b590e0799354d9a776ab3c612b1d086ce","access_level":"public","create_time":"$D2024-02-06T09:28:05.525Z","update_time":"$D2024-02-06T09:28:05.525Z","view_time":null,"first_public_time":"$D2024-02-06T09:28:05.525Z","has_unpublished_edits":null,"fork":{"id":"1a4cff111ac73fe1","slug":null,"title":"interactive Gantt chart English","owner":{"id":"88a6e679d61ac4cb","login":"rita0124","name":""}},"stars":0,"starred":false,"owner":{"type":"team","id":"88a6e679d61ac4cb","login":"rita0124","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b4c858c76566a3d9956ebee3d762668077338bb929acc977061a909851cd1290","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":2001,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3a1b114f62273ba7","login":"rita0124","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b4c858c76566a3d9956ebee3d762668077338bb929acc977061a909851cd1290","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"3a1b114f62273ba7","login":"rita0124","name":"","avatar_url":"https://avatars-next.observableusercontent.com/b4c858c76566a3d9956ebee3d762668077338bb929acc977061a909851cd1290","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"interactive Gantt chart2","cells":[{"id":0,"value":"# interactive Gantt chart2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":218,"value":"Gantt charts provide a clear visual overview of project timelines. Use this template notebook to quickly create and share custom Gantt charts for your own projects using [Observable Plot](https://observablehq.com/@observablehq/plot). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1902,"value":"Below is an example chart created in [a fork](https://observablehq.com/@allisonhorst/lotr-gantt-sam-frodo) of this notebook, showing Frodo and Sam's journey and companions from the Shire to Mount Doom in The Lord of the Rings (data: [tolkiengateway.net](https://scifi.stackexchange.com/questions/7304/what-is-the-timeline-for-the-lord-of-the-rings-trilogy)). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1917,"value":"image3 = FileAttachment(\"image@3.png\").image({width: 900})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1601,"value":"---\n## Step 1. How to update this notebook\n\n[Fork](https://observablehq.com/@observablehq/fork-suggest-merge) this notebook to make a copy in your account so that your changes are saved. \n\nIf you don’t have an Observable account, you can still create and download your waffle chart by working in [tinker mode](https://observablehq.com/@observablehq/tinker-mode) to make temporary edits.\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":378,"value":"---\n## Step 2. Create your project timeline\n\nThe placeholder _tasks_ array below contains mock tasks with a group, start and end dates, color, and a description. Update the array below with your own data. Make sure to keep the property names the same — you should only update things in quotes. Add more objects as needed for additional tasks.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"$49","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":381,"value":"---\n## Step 3. Make your custom color scheme","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1039,"value":"Update your color scheme by changing values in the array below. From your groups defined in _tasks_ above, these are the groups you need to include in your color palette (make sure the text you enter for _group_ below matches those exactly, otherwise the color mapping won’t work): ${Array.from(new Set(tasks.map(d => d.group))).join(\" — \")}","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1309,"value":"myColors = [{group: \"General Manager\", color: \"gold\"},\n {group: \"Research & Development Department\", color: \"#56B4e9\"},\n {group: \"Procurement Department\", color: \"tomato\"}]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1467,"value":"Palette preview: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1034,"value":"{\n const div = d3.create('div')\n .style('display', 'flex')\n div.selectAll('div')\n .data(myColors.map(d => d.color))\n .join('div')\n .style('width', 'auto')\n .style('padding', '10px')\n .style('margin', '2px')\n .style('border-radius', '2px')\n .style('background-color', d => d)\n .text(d => d).node()\n div.selectAll('div')\n .data(myColors.map(d => d.group))\n .style('color', \"black\")\n .style('stroke-width', '2px') // ?\n .style('stroke', \"#fff\") // ?\n .text(d => d).node()\n return div.node()\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1473,"value":"---\n## Step 4. Create your custom Gantt chart\nThe data and color palette you created above are automatically pulled into the Gantt chart below. Further customize your chart using the inputs below, or by editing the Observable Plot code directly below the chart!","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1755,"value":"viewof settings = (\n Inputs.form(\n {\n plotHeight: Inputs.range([30 * tasks.length, 100 * tasks.length], {label: \"Plot height\", step: 1}),\n plotWidth: Inputs.range([100, 1800], {label: \"Plot width\", step: 1, value: 900}),\n barHeight: Inputs.range([0, 20], {label: \"Adjust bar height\", step: 1, value: 0}),\n textPosition: Inputs.range([-50, 50], {label: \"Label dodge\", step: 1}),\n fontSize: Inputs.range([8, 24], {label: \"Font size\", step: 1, value: 14}),\n barRoundness: Inputs.range([0, 20], {label: \"Bar roundness\", step: 1, value: 3}),\n gridlines: Inputs.radio([\"x\", \"y\", \"both\", \"none\"], {label: \"Gridlines\", value: \"x\"}),\n panelBorder: Inputs.radio([\"show\", \"hide\"], {label: \"Panel border\", value: \"hide\"})\n },\n {template}\n )\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":8,"value":"$4a","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1612,"value":"---\n## Step 5. Download or embed it\nOnce you’re done customizing your Gantt chart, click on the three dot menu (${getIcon('threeVertDots')}) in the left margin to download it as an SVG or PNG. If you’re working in a fork, you can also [embed your chart](https://observablehq.com/@observablehq/embeds) elsewhere by choosing the Embed option in the same menu.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1697,"value":"### _Looking for something different?_\nSearch for “Gantt chart” in Observable to see hundreds of Gantt chart examples shared by the Observable community! ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1488,"value":"

\n## How we prep the data:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1513,"value":"Sort the data by task start date: ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1079,"value":"domainByDate = tasks.sort((a, b) => d3.ascending(a.startDate, b.startDate)).map(d => d.task)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1515,"value":"Get unique groups, in order based on the earliest task start date for that group:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1114,"value":"domainByGroup = d3.groups(tasks, d => d.group).sort((a, b) => d3.ascending(a.startDate, b.startDate)).map(d => d[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1517,"value":"Parse dates (YYYY-MM-DD format):","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":67,"value":"parser = d3.utcParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1520,"value":"Map colors to groups:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1321,"value":"colorMap = new Map(myColors.map((obj) => [obj.group, obj.color]))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1425,"value":"colors = domainByGroup.map(d => colorMap.get(d))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1625,"value":"Import function for icons:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1614,"value":"import {getIcon} from '@observablehq/product-education-icon-helpers'","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":1749,"value":"Widgets layout template (adapted from from Martien van Steenbergen's [Horizontal inputs](https://observablehq.com/@martien/horizontal-inputs) notebook):\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":1748,"value":"// Template credit: This layout is updated from Martien van Steenbergen @martien/horizontal-inputs\n\ntemplate = (inputs) => \nhtl.html`

${Object.values(inputs)}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4b","stdlib":"1"}} 24:null