2f:T1316,viewof bar = { const svg = d3.select(DOM.svg(width, height)), n = svg.node(); const heightBar = 40; const textPosition = (heightBar/2)+5; var x = d3.scalePoint() //.domain(["broad", "medium", "tight"]) //.range([0, 500]) //.padding(0); const g = svg.append("g") .attr("transform", marginBar); g.append('rect') .attr('x', 0) .attr('y', 0) .attr('width', relevance) .attr('height', heightBar) .attr('fill', '#00ACB7'); g.append("text") .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", "black") .attr("font-family", "sans-serif") .attr("font-weight", "800") .attr("x", -20) .attr("y",textPosition ) .text("Relevance"); g.append("text") .attr("text-anchor", "start") .attr("font-size", 12) .attr("font-style", 'italic') .attr("fill", "black") .attr("font-family", "sans-serif") .attr("x", relevance+30) .attr("y",textPosition ) .text(textScope); const gSitua = svg.append("g") .attr("transform", marginBar); gSitua.append('rect') .attr('x', 0) .attr('y', 40) .attr('width', situa) .attr('height', 40) .attr('fill', '#9565FC'); gSitua.append("g") .attr("class", "label") .attr("text-anchor", "middle") .call(d3.axisBottom(x)); gSitua.append("text") .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", "black") .attr("font-family", "sans-serif") .attr("font-weight", "800") .attr("x", -20) .attr("y", textPosition+40) .text("Situatedness"); g.append("text") .attr("text-anchor", "start") .attr("font-size", 12) .attr("font-style", 'italic') .attr("fill", "balck") .attr("font-family", "sans-serif") .attr("x", situa+30) .attr("y",textPosition+40 ) .text(textSitua); const gPower = svg.append("g") .attr("transform", marginBar); gPower.append('rect') .attr('x', 0) .attr('y', 80) .attr('width', power) .attr('height', 40) .attr('fill', '#FF0C56'); gPower.append("text") .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", "black") .attr("font-family", "sans-serif") .attr("font-weight", "800") .attr("x", -20) .attr("y", textPosition+80) .text("Power"); gPower.append("g") .attr("class", "label") .attr("text-anchor", "middle"); g.append("text") .attr("text-anchor", "start") .attr("font-size", 12) .attr("font-style", 'italic') .attr("fill", "balck") .attr("font-family", "sans-serif") .attr("x", power+30) .attr("y",textPosition+80 ) .text(textPower); const gPart = svg.append("g") .attr("transform", marginBar); gPart.append('rect') .attr('x', 0) .attr('y', 120) .attr('width', participation) .attr('height', 40) .attr('fill', '#FF9900'); gPart.append("text") .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", "black") .attr("font-family", "sans-serif") .attr("font-weight", "800") .attr("x", -20) .attr("y", textPosition+120) .text("Participation"); g.append("text") .attr("text-anchor", "start") .attr("font-size", 12) .attr("font-style", 'italic') .attr("fill", "balck") .attr("font-family", "sans-serif") .attr("x", participation+30) .attr("y",textPosition+120) .text(textPart); const gAct = svg.append("g") .attr("transform", marginBar); gAct.append('rect') .attr('x', 0) .attr('y', 160) .attr('width', solvability) .attr('height', 40) .attr('fill', '#00C696'); gAct.append("text") .attr("text-anchor", "end") .attr("font-size", 12) .attr("fill", "black") .attr("font-family", "sans-serif") .attr("font-weight", "800") .attr("x", -20) .attr("y", textPosition+160) .text("Solvability"); g.append("text") .attr("text-anchor", "start") .attr("font-size", 12) .attr("font-style", 'italic') .attr("fill", "black") .attr("font-family", "sans-serif") .attr("x", solvability+30) .attr("y",textPosition+160) .text(textAct); const line = svg.append("g") .attr("transform", `translate(270, 10)`); line.append("rect") .attr('x', 0) .attr('y', 2) .attr('width', 1) .attr('height', heightBar*7) .attr('fill', 'black'); line.append('rect') .attr('x', -20) .attr('y', 250) .attr('width', 40) .attr('height', 40) .attr('fill', '#EBD7C5'); line.append('rect') .attr('x', -20) .attr('y', 40) .attr('width', 40) .attr('height', heightBar*5) .attr('fill', '#EBD7C5') .style("mix-blend-mode", "multiply"); return n; } 30:[] 2d:{"title":"Shaping AI Indicators","cells":[{"id":4,"value":"# Shaping AI Indicators\n\nInput your definition and move the slider according to your evaluation.","pinned":false,"hidden":false,"mode":"md"},{"id":135,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":6,"value":"viewof relevance = Inputs.range([40, 500], {step: 1, label: \"Relevance\", value: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":15,"value":"viewof situa = Inputs.range([40, 500], {step: 1, label: \"Situatedness\", value: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":20,"value":"viewof power = Inputs.range([40, 500], {step: 1, label: \"Power\", value: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":91,"value":"viewof participation = Inputs.range([40, 500], {step: 1, label: \"Participation\", color:'red',value: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"viewof solvability = Inputs.range([40, 500], {step: 1, label: \"Solvability\", value: 500})","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"

Input your definition of Relevance

","pinned":false,"hidden":false,"mode":"html"},{"id":300,"value":"viewof textScope = Inputs.text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":416,"value":"

Input your definition of situatedness

","pinned":false,"hidden":false,"mode":"html"},{"id":305,"value":"viewof textSitua = Inputs.text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":428,"value":"

Input your definition of power

","pinned":false,"hidden":false,"mode":"html"},{"id":307,"value":"viewof textPower = Inputs.text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"

Input your definition of participation

","pinned":false,"hidden":false,"mode":"html"},{"id":319,"value":"viewof textPart = Inputs.text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":437,"value":"

Input your definition of solvability

","pinned":false,"hidden":false,"mode":"html"},{"id":310,"value":"viewof textAct = Inputs.text()","pinned":false,"hidden":false,"mode":"ojs"},{"id":564,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":391,"value":"\n function update(bar) {\n d3.select(bar)\n .style(\"stroke\", \"black\")\n .attr(\"stroke-dasharray\", 8 + \" \" + 4)\n .attr(\"x1\", 250)\n .attr(\"y1\", 0)\n .attr(\"x2\", 250)\n .attr(\"y2\", 300)\n .classed(\"u-line\", true);}","pinned":false,"hidden":false,"mode":"ojs"},{"id":34,"value":"d3 = require('d3@5')","pinned":false,"hidden":false,"mode":"ojs"},{"id":277,"value":"margin = ({top: 100, right: 30, bottom: 0, left: 40});","pinned":true,"hidden":false,"mode":"ojs"},{"id":726,"value":"marginBar = `translate(250, 50)`","pinned":true,"hidden":false,"mode":"ojs"},{"id":281,"value":"width = 1600 - margin.left - margin.right;","pinned":true,"hidden":false,"mode":"ojs"},{"id":283,"value":"height = 300","pinned":true,"hidden":false,"mode":"ojs"},{"id":761,"value":"import {mixBlendModes} from \"@martien/mix-blend-mode\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":64,"value":"import {rangeSlider} from \"@mootari/range-slider\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}