2f:T531,header = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "invisible"); const x = d3.scalePoint(IDs, [margin.left, width - margin.right]); const y = d3.scalePoint(Products, [margin.top, height - margin.bottom]); const r = d3.scaleSqrt().domain([0, 2, 3, 4]).range([0, 0.15, 0.25, 8]); const c3 = d3 .scaleOrdinal() .domain(Requirement) .range(["#51A5F2", "#B1B561", "#F2A0D5", "#4CCAD0", "#C28FFD"]); const o = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 0.2, 0.5, 1]); svg .append("text") .attr("x", 30) .attr("y", 30) .style("fill", "#100E27") .text("Header 1 Rect version"); svg .selectAll(".rect") .data(use_case) .attr("class", "rect") .join("rect") .attr("x", (d) => x(d.ID)) .attr("y", 205) .attr("rx", 6) .attr("ry", 6) .attr("width", 20) .attr("height", 20) .attr("fill", (d) => c3(d.Requirement)) .attr("opacity", (d) => o(d.Importance)); svg .selectAll(".text2") .data(Capabilities) .join("text") .attr("class", "text2") .attr("x", (d, i) => margin.left + 70 + i * 34.7) .attr("y", 157) .attr( "transform", (d, i) => `rotate(-50, ${margin.left + 70 + i * 34.7}, 240)` ) .text((d) => d); return svg.node(); }30:T8eb,header1 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "invisible"); const x = d3.scalePoint(IDs, [margin.left, width - margin.right]); const y = d3.scalePoint(Products, [margin.top, height - margin.bottom]); const r = d3.scaleSqrt().domain([0, 2, 3, 4]).range([0, 0, 5.2, 8]); const c3 = d3 .scaleOrdinal() .domain(Requirement) .range(["#51A5F2", "#B1B561", "#F2A0D5", "#4CCAD0", "#C28FFD"]); const o = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 1, 1, 1]); const o2 = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 1, 0.9, 0.8]); const tooltip = d3tip() .style("background-color", "white") .style("padding", "0.5em") .style("box-shadow", "0 3px 4px rgba(0, 0, 0, 0.2)") .style("border-radius", "10px") .style("float", "left") .attr("class", "tooltip") .html( (event, d) => `

${d.products}

${d.Requirement}
${d.Capability}

` ); svg.call(tooltip); svg .append("text") .attr("class", "text11") .attr("x", 30) .attr("y", 30) .style("fill", "#100E27") .text("Header 2 Circle version big inside"); svg .selectAll("circle1") .data(use_case) .attr("class", "circle1") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => r(d.Importance)) .attr("fill", (d) => c3(d.Requirement)) .attr("opacity", (d) => o(d.Importance)) .on("mouseover", tooltip.show) .on("mouseout", tooltip.hide); svg .selectAll("circle2") .data(use_case) .attr("class", "circle2") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => 8) .attr("stroke", (d) => c3(d.Requirement)) .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", (d) => o(d.Importance)) .on("mouseover", tooltip.show) .on("mouseout", tooltip.hide); svg .selectAll(".text2") .data(Capabilities) .join("text") .attr("class", "text2") .attr("x", (d, i) => margin.left + 68 + i * 34.7) .attr("y", 157) .attr( "transform", (d, i) => `rotate(-50, ${margin.left + 68 + i * 34.7}, 240)` ) .text((d) => d); return svg.node(); }31:T8e3,header2 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "invisible"); const x = d3.scalePoint(IDs, [margin.left, width - margin.right]); const y = d3.scalePoint(Products, [margin.top, height - margin.bottom]); const r = d3.scaleSqrt().domain([0, 2, 3, 4]).range([0, 1, 3, 8]); const c3 = d3 .scaleOrdinal() .domain(Requirement) .range(["#51A5F2", "#B1B561", "#F2A0D5", "#4CCAD0", "#C28FFD"]); const o = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 1, 1, 1]); const o2 = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 1, 0.9, 0.8]); const tooltip = d3tip() .style("background-color", "white") .style("padding", "0.5em") .style("box-shadow", "0 3px 4px rgba(0, 0, 0, 0.2)") .style("border-radius", "10px") .style("float", "left") .attr("class", "tooltip") .html( (event, d) => `

${d.products}

${d.Requirement}
${d.Capability}

` ); svg.call(tooltip); svg .append("text") .attr("class", "text11") .attr("x", 30) .attr("y", 30) .style("fill", "#100E27") .text("Header 3 Circle small inside"); svg .selectAll("circle1") .data(use_case) .attr("class", "circle1") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => r(d.Importance)) .attr("fill", (d) => c3(d.Requirement)) .attr("opacity", (d) => o(d.Importance)) .on("mouseover", tooltip.show) .on("mouseout", tooltip.hide); svg .selectAll("circle2") .data(use_case) .attr("class", "circle2") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => 8) .attr("stroke", (d) => c3(d.Requirement)) .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", (d) => o(d.Importance)) .on("mouseover", tooltip.show) .on("mouseout", tooltip.hide); svg .selectAll(".text2") .data(Capabilities) .join("text") .attr("class", "text2") .attr("x", (d, i) => margin.left + 68 + i * 34.7) .attr("y", 157) .attr( "transform", (d, i) => `rotate(-50, ${margin.left + 68 + i * 34.7}, 240)` ) .text((d) => d); return svg.node(); }32:T76b,header3 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "invisible"); const x = d3.scalePoint(IDs, [margin.left, width - margin.right]); const y = d3.scalePoint(Products, [margin.top, height - margin.bottom]); const r = d3.scaleSqrt().domain([0, 2, 3, 4]).range([0, 1, 3, 8]); const c3 = d3 .scaleOrdinal() .domain(Requirement) .range(["#51A5F2", "#B1B561", "#F2A0D5", "#4CCAD0", "#C28FFD"]); const o = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 1, 1, 1]); svg .append("text") .attr("class", "text11") .attr("x", 30) .attr("y", 30) .style("fill", "#100E27") .text("Header 4 Category text colored"); svg .selectAll("circle1") .data(use_case) .attr("class", "circle1") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => r(d.Importance)) .attr("fill", (d) => c3(d.Requirement)) .attr("opacity", (d) => o(d.Importance)); svg .selectAll("circle2") .data(use_case) .attr("class", "circle2") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => 8) .attr("stroke", (d) => c3(d.Requirement)) .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", (d) => o(d.Importance)); svg .selectAll(".text2") .data(Capabilities) .join("text") .attr("class", "text2") .attr("x", (d, i) => margin.left + 68 + i * 34.7) .attr("y", 157) .attr( "transform", (d, i) => `rotate(-50, ${margin.left + 68 + i * 34.7}, 240)` ) .text((d) => d); svg .selectAll(".text3") .data(use_case) .join("text") .attr("class", "text3") .attr("x", (d, i) => margin.left - 10 + i * 34.4) .attr("y", 246) .attr("fill", (d) => c3(d.Requirement)) .text((d) => d.Requirement2); return svg.node(); }33:T882,header4 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "invisible"); const x = d3.scalePoint(IDs, [margin.left, width - margin.right]); const y = d3.scalePoint(Products, [margin.top, height - margin.bottom]); const r = d3.scaleSqrt().domain([0, 2, 3, 4]).range([0, 1, 3, 8]); const c3 = d3 .scaleOrdinal() .domain(Requirement) .range(["#51A5F2", "#B1B561", "#F2A0D5", "#4CCAD0", "#C28FFD"]); const o = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 1, 1, 1]); svg .append("text") .attr("class", "text11") .attr("x", 30) .attr("y", 30) .style("fill", "#100E27") .text("Header 5 Category text colored"); svg .selectAll("circle1") .data(use_case) .attr("class", "circle1") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => r(d.Importance)) .attr("fill", (d) => c3(d.Requirement)) .attr("opacity", (d) => o(d.Importance)); svg .selectAll("circle2") .data(use_case) .attr("class", "circle2") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => 8) .attr("stroke", (d) => c3(d.Requirement)) .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", (d) => o(d.Importance)); svg .selectAll(".text2") .data(Capabilities) .join("text") .attr("class", "text2") .attr("x", (d, i) => margin.left + 68 + i * 34.7) .attr("y", 157) .attr( "transform", (d, i) => `rotate(-50, ${margin.left + 68 + i * 34.7}, 240)` ) .text((d) => d); svg .selectAll(".text3") .data(use_case) .join("text") .attr("class", "text3") .attr("x", (d, i) => margin.left - 10 + i * 34.4) .attr("y", 246) .attr("fill", (d) => c3(d.Requirement)) .text((d) => d.Requirement2); svg .selectAll(".line") .data(use_case) .join("line") .attr("class", "line") .attr("x1", (d) => x(d.Requirement3) - 10) .attr("x2", (d) => x(d.Requirement3) + 60) .attr("y1", 230) .attr("y2", 230) .attr("stroke", (d) => c3(d.Requirement)); return svg.node(); }34:T8c0,header5 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "invisible"); const x = d3.scalePoint(IDs, [margin.left, width - margin.right]); const y = d3.scalePoint(Products, [margin.top, height - margin.bottom]); const r = d3.scaleSqrt().domain([0, 2, 3, 4]).range([0, 1, 3, 8]); const c3 = d3 .scaleOrdinal() .domain(Requirement) .range(["#51A5F2", "#B1B561", "#F2A0D5", "#4CCAD0", "#C28FFD"]); const o = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 1, 1, 1]); svg .append("text") .attr("class", "text11") .attr("x", 30) .attr("y", 30) .style("fill", "#100E27") .text("Header 6 Category text colored"); svg .selectAll("circle1") .data(use_case) .attr("class", "circle1") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => r(d.Importance)) .attr("fill", (d) => c3(d.Requirement)) .attr("opacity", (d) => o(d.Importance)); svg .selectAll("circle2") .data(use_case) .attr("class", "circle2") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => 8) .attr("stroke", (d) => c3(d.Requirement)) .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", (d) => o(d.Importance)); svg .selectAll(".text2") .data(Capabilities) .join("text") .attr("class", "text2") .attr("x", (d, i) => margin.left + 68 + i * 34.7) .attr("y", 157) .attr( "transform", (d, i) => `rotate(-50, ${margin.left + 68 + i * 34.7}, 240)` ) .text((d) => d); svg .selectAll(".text3") .data(use_case) .join("text") .attr("class", "text3") .attr("x", (d, i) => margin.left - 6 + i * 34.4) .attr("y", 246) .attr("fill", (d) => c3(d.Requirement)) .text((d) => d.Requirement2); svg .selectAll(".line") .data(use_case.filter((d) => d.Requirement3 > 0)) .join("line") .attr("class", "line") .attr("x1", (d) => x(d.Requirement3) - 13) .attr("x2", (d) => x(d.Requirement3) - 13) .attr("y1", 250) .attr("y2", 200) .attr("stroke", (d) => c3(d.Requirement)) .attr("stroke-width", 1); return svg.node(); }35:T8c0,header6 = { const svg = d3 .create("svg") .attr("viewBox", [0, 0, width, height]) .style("overflow", "invisible"); const x = d3.scalePoint(IDs, [margin.left, width - margin.right]); const y = d3.scalePoint(Products, [margin.top, height - margin.bottom]); const r = d3.scaleSqrt().domain([0, 2, 3, 4]).range([0, 1, 3, 8]); const c3 = d3 .scaleOrdinal() .domain(Requirement) .range(["#51A5F2", "#B1B561", "#F2A0D5", "#4CCAD0", "#C28FFD"]); const o = d3.scaleLinear().domain([0, 2, 3, 4]).range([0, 1, 1, 1]); svg .append("text") .attr("class", "text11") .attr("x", 30) .attr("y", 30) .style("fill", "#100E27") .text("Header 7 Category text colored"); svg .selectAll("circle1") .data(use_case) .attr("class", "circle1") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => r(d.Importance)) .attr("fill", (d) => c3(d.Requirement)) .attr("opacity", (d) => o(d.Importance)); svg .selectAll("circle2") .data(use_case) .attr("class", "circle2") .join("circle") .attr("cx", (d) => x(d.ID)) .attr("cy", 210) .attr("r", (d) => 8) .attr("stroke", (d) => c3(d.Requirement)) .attr("stroke-width", 1) .attr("fill", "none") .attr("opacity", (d) => o(d.Importance)); svg .selectAll(".text2") .data(Capabilities) .join("text") .attr("class", "text2") .attr("x", (d, i) => margin.left + 68 + i * 34.7) .attr("y", 157) .attr( "transform", (d, i) => `rotate(-50, ${margin.left + 68 + i * 34.7}, 240)` ) .text((d) => d); svg .selectAll(".text3") .data(use_case) .join("text") .attr("class", "text3") .attr("x", (d, i) => margin.left - 6 + i * 34.4) .attr("y", 242) .attr("fill", (d) => c3(d.Requirement)) .text((d) => d.Requirement2); svg .selectAll(".line") .data(use_case.filter((d) => d.Requirement3 > 0)) .join("line") .attr("class", "line") .attr("x1", (d) => x(d.Requirement3) - 10) .attr("x2", (d) => x(d.Requirement3) - 10) .attr("y1", 247) .attr("y2", 228) .attr("stroke", (d) => c3(d.Requirement)) .attr("stroke-width", 2); return svg.node(); }36:T698,37:[{"id":"bc06c1eae2205a360194b239f9f35df4671a8197d3eef42e591e41f0e1898f2916ec897197b1d3d588ed628036b2318b5ac2fdac468afb51ab0dc96dc92b565f","href":"https://static.observableusercontent.com/files/bc06c1eae2205a360194b239f9f35df4671a8197d3eef42e591e41f0e1898f2916ec897197b1d3d588ed628036b2318b5ac2fdac468afb51ab0dc96dc92b565f","name":"Layer_1.svg","type":"image/svg+xml","lastModified":1746715709663.111,"size":206077}] 2d:{"title":"Account Sharing in Digital Contents","cells":[{"id":1163,"value":"# Account Sharing in Digital Contents\n\n### Product Requirements and Capabilities\n","pinned":false,"hidden":false,"mode":"md"},{"id":1676,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"$30","pinned":false,"hidden":false,"mode":"ojs"},{"id":1779,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":1704,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":1764,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":1790,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1841,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":1889,"value":"___\n### Ed's design \n___","pinned":false,"hidden":false,"mode":"md"},{"id":1533,"value":"layer_11 = FileAttachment(\"Layer_1.svg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":278,"value":"___\n### Data","pinned":false,"hidden":false,"mode":"md"},{"id":267,"value":"data_raw = aq.loadCSV(\n \"https://docs.google.com/spreadsheets/d/e/2PACX-1vSWjZD5Pe3j7MZM2a7wDHVhceHSSkhjiCSOC5p4wTSN_VF5sDLU3rv0xyf-mLpMDY6ytjfry_NB2Is6/pub?gid=1094842976&single=true&output=csv\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":847,"value":"first = data_raw.select(0, 1, 2, 3, 4, 5, 6)","pinned":false,"hidden":false,"mode":"ojs"},{"id":856,"value":"use_case = first.objects()","pinned":false,"hidden":false,"mode":"ojs"},{"id":523,"value":"sum = data_raw\n .fold(aq.range(\"GeoComply Core\", \"Fraudnetic Solutions\"), {\n as: [\"products\", \"values\"]\n })\n .groupby(\"products\")\n .rollup({\n sum: (d) => op.sum(d.values),\n count: op.count()\n })\n .orderby(aq.desc(\"sum\"))","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"all = data_raw.fold(aq.range(\"GeoComply Core\", \"Fraudnetic Solutions\"), {\n as: [\"products\", \"values\"]\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":557,"value":"merged = all.join(sum, [\"products\"])","pinned":false,"hidden":false,"mode":"ojs"},{"id":566,"value":"data = merged\n .objects()\n .sort((d) => d.sum)\n .filter((d) => d.sum >= 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":590,"value":"___\n\n### Lists","pinned":false,"hidden":false,"mode":"md"},{"id":283,"value":"IDs = [...new Set(data.flatMap((d) => d.ID))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":588,"value":"Requirement = [...new Set(data.flatMap((d) => d.Requirement))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":911,"value":"Capabilities = use_case.map((d) => d.Capability)","pinned":false,"hidden":false,"mode":"ojs"},{"id":303,"value":"Products = [...new Set(data.flatMap((d) => d.products).sort((d) => d.sum))]","pinned":false,"hidden":false,"mode":"ojs"},{"id":264,"value":"---\n### Appendix","pinned":false,"hidden":false,"mode":"md"},{"id":873,"value":"height = 250","pinned":false,"hidden":false,"mode":"ojs"},{"id":1347,"value":"width = 1300","pinned":false,"hidden":false,"mode":"ojs"},{"id":357,"value":"margin = ({ top: 100, right: 120, bottom: 30, left: 320 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":921,"value":"d3tip = require(\"d3-tip\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"import { aq, op } from \"@uwdata/arquero\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":256,"value":"$36","pinned":false,"hidden":false,"mode":"html"},{"id":1928,"value":"","pinned":false,"hidden":false,"mode":"html"}],"files":"$W37","stdlib":"1","titling":"auto"}