Public
Edited
Mar 8, 2024
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
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:
""
}
]
Insert cell
data = d3.tsvParse(
`Bank Renewables Fossil Fuels
藥水室溫架儲 3 年穩定性測試 0.349 0.651
Sumitomo Mitsui Financial 0.310 0.690
Mitsubishi UFJ Financial Group 0.298 0.702
Deutsche Bank 0.285 0.715
Barclays 0.243 0.757
BofA Securities 0.231 0.769
JP Morgan 0.213 0.787
Citigroup 0.201 0.799
RBC Capital Markets 0.137 0.863
Wells Fargo 0.061 0.939`,
d3.autoType
)
Insert cell
Insert cell
Insert cell
myColors = [{group: "總經理", color: "gold"},
{group: "研發", color: "#56B4e9"},
{group: "採購", color: "tomato"}]
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
xScale = d3.scaleLinear().domain([0, 1]).nice().range([200, 600])
Insert cell
yScale = d3
.scaleBand()
.domain(
data
.map((d) => d["Bank"])
.filter((d, i, s) => {
return s.indexOf(d) === i;
})
)
.range([60, 560])
.padding(0.2)
Insert cell
stack = d3.stack().keys(["Fossil Fuels","Renewables"])
Insert cell
stackedData = stack(data)
Insert cell
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 }
})
Insert cell
format = d3.format("~p")
Insert cell
Insert cell
Insert cell
Insert cell
Insert cell
domainByDate = tasks.sort((a, b) => d3.ascending(a.startDate, b.startDate)).map(d => d.task)
Insert cell
Insert cell
domainByGroup = d3.groups(tasks, d => d.group).sort((a, b) => d3.ascending(a.startDate, b.startDate)).map(d => d[0])
Insert cell
Insert cell
parser = d3.utcParse("%Y-%m-%d")
Insert cell
Insert cell
colorMap = new Map(myColors.map((obj) => [obj.group, obj.color]))
Insert cell
colors = domainByGroup.map(d => colorMap.get(d))
Insert cell
Insert cell
import {getIcon} from '@observablehq/product-education-icon-helpers'
Insert cell
Insert cell
Insert cell

Purpose-built for displays of data

Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
Learn more