2f:T174a,tasks = [ { task: "BVS 合作諮詢與討論 (2022-06-09~2022-08-31)", group: "總經理", startDate: "2022-06-09", endDate: "2022-08-31", description: "" }, { task: "BVS 合約書討論與簽訂 (2022-09-01~2023-01-09)", group: "總經理", startDate: "2022-09-01", endDate: "2023-01-09", description: "" }, { task: "與 Precone 接洽實驗水盒 (2023-02-15~2023-05-25)", group: "總經理", startDate: "2023-02-15", endDate: "2023-05-25", description: "" }, { task: "BVS 技轉與接洽台灣永勝與均賀藥水製造商 (2023-02-03~2023-04-30)", group: "總經理", startDate: "2023-02-03", endDate: "2023-04-30", description: "" }, { task: "BVS 討論 FDA 送件內容 (2023-04-01~2023-04-30)", group: "總經理", startDate: "2023-04-01", endDate: "2023-04-30", description: "" }, { task: "與 Precone 購買實驗水盒 (2023-05-26~2023-11-15)", group: "採購", startDate: "2023-05-26", endDate: "2023-11-15", description: "" }, { task: "BTOX 撰寫與修訂合作計畫書 (2023-04-11~2023-05-30)", group: "研發", startDate: "2023-04-11", endDate: "2023-05-30", description: "" }, { task: "開始籌畫實驗與購買器材 (2023-06-01~2023-07-15) ", group: "研發", startDate: "2023-06-01", endDate: "2023-07-15", description: "" }, { task: "BVS 討論雙氧水濃度與等級 (2023-07-03~2023-08-04)", group: "研發", startDate: "2023-07-03", endDate: "2023-08-04", description: "" }, { task: "採購藥水原物料 (2023-06-01~2023-09-22)", group: "研發", startDate: "2023-06-01", endDate: "2023-09-22", description: "" }, { task: "金屬離子檢驗方法建立 (2023-07-15~2023-08-31)", group: "研發", startDate: "2023-07-15", endDate: "2023-08-31", description: "" }, { task: "與 EO、Gamma 滅菌商接洽和容器滅菌 (2023-08-12-01~2023-09-02)", group: "研發", startDate: "2023-08-12", endDate: "2023-09-02", description: "" }, { task: "諮詢 FCMCS 蛋白質、脂質測試方法合作事宜 (2023-05-03~2023-06-15)", group: "研發", startDate: "2023-05-03", endDate: "2023-06-15", description: "" }, { task: "嘗試蛋白質、脂質、反應後殘留濃度的方法 (2023-06-15~2023-08-06)", group: "研發", startDate: "2023-06-15", endDate: "2023-08-06", description: "" }, { task: "BVS 訪台討論實驗細節 (2023-09-24~2023-09-28)", group: "研發", startDate: "2023-09-24", endDate: "2023-09-28", description: "" }, { task: "與 FCMCS 接洽蛋白質、脂質測試方法顧問合約與簽訂 (2023-08-07~2023-09-21)", group: "研發", startDate: "2023-08-07", endDate: "2023-09-21", description: "" }, { task: "FCMCS 提供蛋白質、脂質測試方法文件 (2023-09-18~2023-09-30)", group: "研發", startDate: "2023-09-18", endDate: "2023-09-30", description: "" }, { task: "首次試合成藥水 (2023-09-01~2023-09-22)", group: "研發", startDate: "2023-09-01", endDate: "2023-09-22", description: "" }, { task: "建構反應槽設備 (2023-09-25~2023-10-08)", group: "研發", startDate: "2023-09-25", endDate: "2023-10-08", description: "" }, { task: "建立實驗型生產線 (2023-10-31~2023-11-21)", group: "研發", startDate: "2023-10-31", endDate: "2023-11-21", description: "" }, { task: "藥水金屬離子濃度高重買原料 (2023-09-25~2023-11-07)", group: "研發", startDate: "2023-09-25", endDate: "2023-11-07", description: "" }, { task: "界面活性劑原料貨源短缺等待取得 (2023-10-13~2023-11-07)", group: "研發", startDate: "2023-10-13", endDate: "2023-11-07", description: "" }, { task: "開始試量產 (2023-11-24~2023-12-07)", group: "研發", startDate: "2023-11-24", endDate: "2023-12-07", description: "" }, { task: "與 Precone 接洽補買纖維布和中和環 (2023-11-15~2024-02-28)", group: "研發", startDate: "2023-11-15", endDate: "2024-02-28", description: "" }, { task: "與亮宇生物接洽和討論實驗項目 (2023-12-22~2026-09-04)", group: "研發", startDate: "2023-10-15", endDate: "2023-12-21", description: "" }, { task: "亮宇生物開始實驗項目 (2023-12-22~2026-09-04)", group: "研發", startDate: "2023-12-22", endDate: "2026-09-04", description: "" }, { task: "與伯明罕大學接洽阿米巴實驗合約和簽訂 (2023-10-13~2024-01-31)", group: "研發", startDate: "2023-10-13", endDate: "2024-01-31", description: "" }, { task: "與伯明罕大學開始阿米巴實驗 (2024-03-01~2024-12-31)", group: "研發", startDate: "2024-03-01", endDate: "2024-12-31", description: "" }, { task: "開始執行 FDA 510k 所需的技術性文件 (2023-11-24~2025-06-30)", group: "研發", startDate: "2023-11-24", endDate: "2025-06-30", description: "" }, { task: "加速架儲期 (2023-12-08~2025-04-25)", group: "研發", startDate: "2023-12-08", endDate: "2025-04-25", description: "" }, { task: "FDA 510k 送件與與取證(2025-07-01~2026-01-31)", group: "研發", startDate: "2025-07-01", endDate: "2026-01-31", description: "" }, { task: "實時架儲期 (2023-11-24~2026-09-04)", group: "研發", startDate: "2023-11-24", endDate: "2026-09-04", description: "" } ]30:T8e0,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}` })), // Plot.stackedData.forEach((s, sNdx) => { // svg // .append("g") // .selectAll("rect") // .data(s) // .join("rect") // .attr("class", `rect_${sNdx}`) // .attr("x", (d) => xScale(d[0])) // .attr("y", (d) => yScale(d.data["Bank"])) // .attr("height", yScale.bandwidth()) // .attr("width", (d) => xScale(d[1]) - xScale(d[0])) // .attr("fill", sNdx === 0 ? "lightgrey" : "black"); // if (sNdx === 1) { // svg // .append("g") // .selectAll("text") // .data(s) // .join("text") // .attr("class", "valueLabel") // .text((d) => format(d[0])) // .attr("x", (d) => xScale(d[0]) + 5) // .attr("y", (d) => yScale(d.data["Bank"]) + yScale.bandwidth() * 0.6) // .attr("fill", "lightgrey"); // }}) ], 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":1706061403219.879,"size":129452}] 2d:{"title":"interactive Gantt chart Trandition Chinese","cells":[{"id":0,"value":"# interactive Gantt chart Trandition Chinese","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":1996,"value":"data = d3.tsvParse(\n `Bank\tRenewables\tFossil Fuels\n藥水室溫架儲 3 年穩定性測試\t0.349\t0.651\nSumitomo Mitsui Financial\t0.310\t0.690\nMitsubishi UFJ Financial Group\t0.298\t0.702\nDeutsche Bank\t0.285\t0.715\nBarclays\t0.243\t0.757\nBofA Securities\t0.231\t0.769\nJP Morgan\t0.213\t0.787\nCitigroup\t0.201\t0.799\nRBC Capital Markets\t0.137\t0.863\nWells Fargo\t0.061\t0.939`,\n d3.autoType\n)","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: \"總經理\", color: \"gold\"},\n {group: \"研發\", color: \"#56B4e9\"},\n {group: \"採購\", color: \"tomato\"}]","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":2006,"value":"xScale = d3.scaleLinear().domain([0, 1]).nice().range([200, 600])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2008,"value":"yScale = d3\n .scaleBand()\n .domain(\n data\n .map((d) => d[\"Bank\"])\n .filter((d, i, s) => {\n return s.indexOf(d) === i;\n })\n )\n .range([60, 560])\n .padding(0.2)","pinned":true,"hidden":false,"mode":"ojs"},{"id":2010,"value":"stack = d3.stack().keys([\"Fossil Fuels\",\"Renewables\"])","pinned":true,"hidden":false,"mode":"ojs"},{"id":2021,"value":"stackedData = stack(data)","pinned":true,"hidden":false,"mode":"ojs"},{"id":8,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":2001,"value":"format = d3.format(\"~p\")","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"}