viewof compass = { const chart = Plot.plot({ marginLeft: 60, marginTop: 50, marginBottom: 60, height: 500, width: 500, style: { fontSize: 14 }, x: { domain: [0,5], ticks: [1,2,3,4], tickFormat: d3.format(".0f"), label: `digital art tool skills →` }, y: { domain: [0,5], ticks: [1,2,3,4], tickFormat: d3.format(".0f"), label: `↑ programming skills` }, r: { range: [0, 36] }, marks: [ Plot.dot(bubble_data, {x: "x", y: "y", r: d => d.value, fill: "group"}), Plot.ruleX(bubble_data, {x: "x", y: 0.05, fill: "black"}), Plot.ruleY(bubble_data, {x: 0.05, y: "y", fill: "black"}), Plot.link([1], { x1: () => 2.5, y1: () => 0, x2: () => 2.5, y2: () => 5, stroke: "#000000", strokeWidth: 2, markerEnd: "arrow" }), Plot.link([1], { x1: () => 0, y1: () => 2.5, x2: () => 5, y2: () => 2.5, stroke: "#000000", strokeWidth: 2, markerEnd: "arrow" }) ], color: { type: "categorical", range: getColor("all") } }); const legend = Plot.legend({ color: { type: "categorical", domain: ["1-Beginner", "2-Intermediate", "3-Proficient", "4-Fully Proficient"], range: [null, null, null, null] }, swatchSize: 14, style: { fontSize: "14px" }, width: 200 }); const plot = html`

Digital Art Tool Skills × Programming Skills matrix based on the self-reported confidence levels. Each bubble's radius on the matrix presents the number of respondents with corresponding self-reported skill levels. These bubbles are then subdivided into four groups: bottom-right quadrant "(1,2)(1,2)", bottom-left quadrant "(1,2)(3,4)", top-right quadrant "(3,4)(1,2)", and top-left quadrant "(3,4)(3,4)".

Self-reported skill levels:

${legend}

${chart}

`; return plot; }