2f:T1072,tasks = [ { task: "BVS solution room temperature real-time shelf-life (2023-11-24~2026-09-04)", group: "real-time shelf-life", startDate: "2023-11-24", endDate: "2026-09-04", description: "" }, { task: "BVS solution 35°C temperature accelerated shelf-life (2023-12-12~2025-04-29)", group: "accelerated shelf-life", startDate: "2023-12-12", endDate: "2025-04-29", description: "" }, { task: "BVS solution 45°C temperature accelerated shelf-life (2023-12-11~2024-05-27)", group: "accelerated shelf-life", startDate: "2023-12-11", endDate: "2024-05-27", description: "" }, { task: "BVS solution neutralization profile: neutralization ring reused times and residual H2O2 concentration (2024-02-24~2024-03-31)", group: "neutralization profile", startDate: "2024-02-24", endDate: "2024-03-31", description: "" }, { task: "BVS empty bottle sterility validation (2024-03-31~2024-06-30)", group: "sterility test", startDate: "2024-03-31", endDate: "2024-06-30", description: "" }, { task: "BVS solution unopened sterility (2023-12-22~2026-10-03)", group: "sterility test", startDate: "2023-12-22", endDate: "2026-10-03", description: "" }, { task: "BVS solution ISO 14730 90 Discard day of opened BVS solution bottle (Accelerated 6 months and 18 months) (2024-06-01~2025-10-31)", group: "microbial ingress testing", startDate: "2024-06-01", endDate: "2025-11-30", description: "" }, { task: "BVS solution ISO 14730 90 Discard day of opened BVS solution bottle (Real time 1, 12, 24, 36 months) (2023-12-22~2027-03-31)", group: "microbial ingress testing", startDate: "2023-12-22", endDate: "2027-03-31", description: "" }, { task: "The sterility of lens case after neutralizing cleaning till 7 and 14 days sterile (2024-03-01~2024-04-30)", group: "sterility test", startDate: "2024-03-01", endDate: "2024-04-30", description: "" }, { task: "In-Vitro Cytotoxicity and Acute Ocular Irritation (2024-03-01~2024-05-31)", group: "biocompatibility", startDate: "2024-03-01", endDate: "2024-05-31", description: "" }, { task: "Solution and lens compatibility 3 specification (+15D * 5 pc、plano * 5 pc、-15D * 5 pc) repeat cleanig 30 times (2024-03-01~2024-03-31)", group: "solution and lens compatibility", startDate: "2024-03-01", endDate: "2024-03-31", description: "" }, { task: "integrate all data report (2023-07-01~2024-09-30)", group: "integrate all data report", startDate: "2024-07-01", endDate: "2024-09-30", description: "" }, { task: "Solution disinfection (ISO 14729) efficiency: P. aeruginosa, S. aureus, S.marcescen, C. albicans , F. Solani (2023-12-22~2026-10-31)", group: "disinfection efficiency for FDA", startDate: "2023-12-22", endDate: "2026-10-31", description: "" }, { task: "Solution and lens case disinfection (ISO 14729) efficiency: P. aeruginosa, S. aureus, S.marcescen, C. albicans , F. Solani (2024-03-01~2026-10-31)", group: "disinfection efficiency", startDate: "2024-03-01", endDate: "2026-10-31", description: "" }, { task: "Amoeba disinfection efficiency experiment with University of Birmingham (2024-03-01~2024-12-31)", group: "disinfection efficiency", startDate: "2024-03-01", endDate: "2024-12-31", description: "" }, { task: "Cleaning efficacy lipid and protein (2023-11-24~2024-03-31)", group: "cleaning efficacy", startDate: "2023-11-24", endDate: "2024-03-31", description: "" }, { task: "FDA 510k submission and obtaining license (2024-10-31~2025-04-30)", group: "FDA 510k review", startDate: "2024-10-31", endDate: "2025-04-30", description: "" }, { task: "FDA 510(K) administrative document preparation (2024-09-01~2024-10-30)", group: "FDA 510k document prepare", startDate: "2024-09-01", endDate: "2024-10-30", description: "" }, ]30: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 } })31:[{"id":"026477c1a8f5c605d0a6243959102befa5b2fb52776944df4a8e8de0da5f19a69235223d2cfb2e3aba781a5df4c84f98b2f56a5d980e0cac7f1055dc715b7c65","href":"https://static.observableusercontent.com/files/026477c1a8f5c605d0a6243959102befa5b2fb52776944df4a8e8de0da5f19a69235223d2cfb2e3aba781a5df4c84f98b2f56a5d980e0cac7f1055dc715b7c65","name":"image@3.png","type":"image/png","lastModified":1707211717406.589,"size":129452}] 2d:{"title":"interactive Gantt chart 510k","cells":[{"id":0,"value":"# interactive Gantt chart 510k","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"id":1917,"value":"image3 = FileAttachment(\"image@3.png\").image({width: 900})","pinned":false,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":5,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":381,"value":"---\n## Step 3. Make your custom color scheme","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":1309,"value":"myColors = [{group: \"real-time shelf-life\", color: \"#00FE75\"},\n {group: \"accelerated shelf-life\", color: \"red\"},\n {group: \"neutralization profile\", color: \"yellow\"},\n {group: \"sterility test\", color: \"#00AAFE\"},\n {group: \"microbial ingress testing\", color: \"#acb5af\"},\n {group: \"biocompatibility\", color: \"#dc6390\"},\n {group: \"solution and lens compatibility\", color: \"#332a7c\"},\n {group: \"integrate all data report\", color: \"#99ccff\"},\n {group: \"disinfection efficiency for FDA\", color: \"#11823b\"},\n {group: \"disinfection efficiency\", color: \"#c06df8\"},\n {group: \"cleaning efficacy\", color: \"#ccff33\"},\n {group: \"FDA 510k review\", color: \"#ff6600\"},\n {group: \"FDA 510k document prepare\", color: \"#b87333\"}]","pinned":true,"hidden":false,"mode":"ojs"},{"id":1467,"value":"Palette preview: ","pinned":false,"hidden":false,"mode":"md"},{"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"},{"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"},{"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"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":1488,"value":"

\n## How we prep the data:","pinned":false,"hidden":false,"mode":"md"},{"id":1513,"value":"Sort the data by task start date: ","pinned":false,"hidden":false,"mode":"md"},{"id":1079,"value":"domainByDate = tasks.sort((a, b) => d3.ascending(a.startDate, b.startDate)).map(d => d.task)","pinned":true,"hidden":false,"mode":"ojs"},{"id":1515,"value":"Get unique groups, in order based on the earliest task start date for that group:","pinned":false,"hidden":false,"mode":"md"},{"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"},{"id":1517,"value":"Parse dates (YYYY-MM-DD format):","pinned":false,"hidden":false,"mode":"md"},{"id":67,"value":"parser = d3.utcParse(\"%Y-%m-%d\")","pinned":true,"hidden":false,"mode":"ojs"},{"id":1520,"value":"Map colors to groups:","pinned":false,"hidden":false,"mode":"md"},{"id":1321,"value":"colorMap = new Map(myColors.map((obj) => [obj.group, obj.color]))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1425,"value":"colors = domainByGroup.map(d => colorMap.get(d))","pinned":true,"hidden":false,"mode":"ojs"},{"id":1625,"value":"Import function for icons:","pinned":false,"hidden":false,"mode":"md"},{"id":1614,"value":"import {getIcon} from '@observablehq/product-education-icon-helpers'","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"}],"files":"$W31","stdlib":"1","titling":"auto"}