31:T418,data = [ {id: "Patient 1", x: 1, category: "A", tooltip: [{name: "ONE", value: 2},{name: "TWO", value: 3}]}, {id: "Patient 1", x: 1, category: "B", tooltip: '

ONE

'}, {id: "Patient 1", x: 2, category: "A", tooltip: '

ONE

'}, {id: "Patient 1", x: 3, category: "A", tooltip: '

ONE

'}, {id: "Patient 1", x: 3, category: "B", tooltip: '

ONE

'}, {id: "Patient 1", x: 3, category: "C", tooltip: '

ONE

'}, {id: "Patient 2", x: 1, category: "A", tooltip: '

TWO

'}, {id: "Patient 2", x: 2, category: "B", tooltip: '

TWO

'}, {id: "Patient 2", x: 2, category: "A", tooltip: '

TWO

'}, {id: "Patient 2", x: 3, category: "A", tooltip: '

TWO

'}, {id: "Patient 3", x: 2, category: "A", tooltip: '

THREE

'}, {id: "Patient 3", x: 2, category: "B", tooltip: '

THREE

'}, {id: "Patient 3", x: 3, category: "B", tooltip: '

THREE

'}, {id: "Patient 3", x: 3, category: "C", tooltip: '

THREE

'}, ]32:T439,Plot.plot({ width: width, x: { type: "band", inset: 10, ticks: 2, label: null }, y: { //inset: 5, grid: false, fill: "white", stroke: "white", label: null }, facet: { label: null }, marginRight: 0, marginLeft: 70, symbol: { type: "categorical", legend: true }, marks: [ Plot.axisY({ anchor: "right", label: null }), Plot.axisFy({ anchor: "left" }), Plot.frame({ // 'zebra' frame fill based on frame index thanks @fil! render: (index, scales, values, dimensions, context, next) => index.fi % 2 ? next(index, scales, values, dimensions, context) : null, fill: "rgb(250,250,250)" }), Plot.dot( data, scalefreeY({ x: "x", y: "category", fy: "id", stroke: "category", fill: "category", symbol: "category", r: 5 }) ), Plot.tip( data, Plot.pointer({ x: "x", y: "category", fy: "id", title: (d) => d.tooltip }) ) ] })33:[{"id":"dce2e6f87c662dc5c4ea7dfe53f29ad0d640e53b6f000fdb9999ee9189b8d5176a84f93e22fa26540495ef317c24fad62f7cee70f373ee43817282300eac1a0b","href":"https://static.observableusercontent.com/files/dce2e6f87c662dc5c4ea7dfe53f29ad0d640e53b6f000fdb9999ee9189b8d5176a84f93e22fa26540495ef317c24fad62f7cee70f373ee43817282300eac1a0b","name":"ggplot2.png","type":"image/png","lastModified":1689603660163.439,"size":11810}] 2f:{"title":"From ggplot2 to Plot","cells":[{"id":0,"value":"# From ggplot2 to Plot","pinned":false,"hidden":false,"mode":"md"},{"id":94,"value":"### Feature Requirements\n\n✅ single column faceted with `ID` as labels\n\n✅ color mapped to `category`\n\n✅ dont show y ticks\n\n✅ show facet labels on the left side\n\n✅ remove x and y axis titles\n\n✅ legend\n\n✅ shape mapped to `category`\n\n✅ facet rows have alternating background color\n\n⛔ HTML tooltips (possible with ggiraph)\n\n✅ scale y free (only show the categories in each facet -- Patient 2 should only be two rows of shapes)","pinned":false,"hidden":false,"mode":"md"},{"id":158,"value":"## ggplot2","pinned":false,"hidden":false,"mode":"md"},{"id":143,"value":"ggplot2 = FileAttachment(\"ggplot2.png\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":150,"value":"```\nrect_data <- data.frame(\n id = unique(data$id)\n) %>%\n mutate(color = ifelse(dplyr::row_number() %% 2, \"white\", \"#f5f7fa\"))\n\nggplot(data) +\n geom_rect(\n data = rect_data,\n fill = rect_data$color,\n xmin = -Inf,\n xmax = Inf,\n ymin = -Inf,\n ymax = Inf,\n show.legend = FALSE\n ) +\n geom_point(\n data = data,\n aes(\n x = as.factor(x),\n y = category,\n color = category,\n shape = category\n ),\n size = 5\n ) +\n facet_grid(id~., scales = \"free_y\", space = \"free_y\", switch = \"y\") +\n theme(\n strip.text.y.left = element_text(angle = 0),\n axis.text.y = element_blank(),\n axis.ticks.y = element_blank(),\n legend.position = 'top',\n axis.title.x = element_blank(),\n axis.title.y = element_blank()\n )\n\n```","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":154,"value":"## Plot","pinned":false,"hidden":false,"mode":"md"},{"id":163,"value":"### Feature Requirements\n\n✅ single column faceted with `ID` as labels\n\n✅ color mapped to `category`\n\n✅ dont show y ticks\n\n✅ show facet labels on the left side\n\n✅ remove x and y axis titles\n\n✅ legend\n\n✅ shape mapped to `category`\n\n✅ facet rows have alternating background color\n\n⛔ HTML tooltips [ via `tippy` -- https://observablehq.com/@fil/plot-tippy-js-2 TODO ]\n\n✅ scale y free (only show the categories in each facet -- Patient 2 should only be two rows of shapes)","pinned":false,"hidden":false,"mode":"md"},{"id":188,"value":"scalefreeY = (options) =>\n Plot.initializer(options, (data, facets, channels, scales, dimensions) => {\n const {\n y: { value: Y, scale }\n } = channels;\n for (const index of facets) {\n const y = d3\n .scalePoint(d3.sort(Array.from(index, (i) => Y[i])), [\n dimensions.marginTop,\n dimensions.height - dimensions.marginBottom\n ])\n .padding(0.5);\n for (const i of index) Y[i] = y(Y[i]);\n }\n return { data, facets, channels: { y: { value: Y } } };\n })","pinned":false,"hidden":false,"mode":"ojs"},{"id":13,"value":"$32","pinned":true,"hidden":false,"mode":"ojs"}],"files":"$W33","stdlib":"1","titling":"auto"}