2e:null 2f:["$","title",null,{"children":"The ASD SSG Radar Screen | Figay | Observable"}] 34:T1775,chartRadar = { const svg = d3 .create("svg") .attr("viewBox", [-width / 2, -height / 2, width, height]); var arc = d3.arc(); // ---------------------------// // RINGS // // ---------------------------// svg.append("circle").attr("id", "allRings"); svg .selectAll("allRings") .data(ringSizes) .enter() .append("circle") .style("stroke", "black") .style("stroke-width", "1px") .style("fill", (d) => "white") .attr("r", (d) => d.ringSize); // ---------------------------// // TITLE // // ---------------------------// svg .append("rect") .attr("x", -400) .attr("y", -400) .style("stroke", "black") .style("stroke-width", "1px") .style("fill", "none") .attr("width", "800") .attr("height", "800"); var title = svg .append("text") .style("font-size", "25px") .text(radarTitle) .attr("x", -230) .attr("y", -370) .attr("fill", "black"); var myblock1 = svg .append("foreignObject") .attr("x", -330) .attr("y", -310) .attr("width", 200) .attr("height", 150) .attr("class", "svg-quarter-title"); var myblock2 = svg .append("foreignObject") .attr("x", 180) .attr("y", -310) .attr("width", 200) .attr("height", 150) .attr("class", "svg-quarter-title"); var myblock3 = svg .append("foreignObject") .attr("x", -320) .attr("y", 250) .attr("width", 200) .attr("height", 150) .attr("class", "svg-quarter-title"); var myblock4 = svg .append("foreignObject") .attr("x", 250) .attr("y", 230) .attr("width", 200) .attr("height", 150) .attr("class", "svg-quarter-title"); var div1 = myblock1 .append("xhtml:div") .append("div") .style("display", "table") .attr("font-family", "futura") .attr("font-weight", "bold") .style("color", "#0000FF") .style("font-size", "15px") .append("p") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle") .html("Available External
Standards"); var div2 = myblock2 .append("xhtml:div") .append("div") .style("display", "table") .attr("font-family", "futura") .attr("font-weight", "bold") .style("color", "#0000FF") .style("font-size", "15px") .append("p") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle") .html(" Monitored External Development"); var div3 = myblock3 .append("xhtml:div") .append("div") .style("display", "table") .attr("font-family", "futura") .attr("font-weight", "bold") .style("color", "#0000FF") .style("font-size", "15px") .append("p") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle") .html(" ASD
Development"); var div4 = myblock4 .append("xhtml:div") .append("div") .style("display", "table") .append("p") .attr("font-family", "futura") .attr("font-weight", "bold") .style("color", "#0000FF") .style("font-size", "15px") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle") .html(" Participate
in External
Development"); // ---------------------------// // BARS // // ---------------------------// // horizontal text-bg svg .append("rect") .attr("x", -349.4) .attr("y", -10) .style("fill", "#f0f0ee") .attr("width", "699.8") .attr("height", "20"); // vertical text-bg svg .append("rect") .attr("x", -10) .attr("y", -349.4) .style("fill", "#f0f0ee") .attr("width", "20") .attr("height", "699.8"); // ---------------------------// // LABELS ON-AXES // // ---------------------------// // label on right x-axes svg.append("text").attr("id", "labelRightAxes"); svg .selectAll("labelRightAxes") .data([" TRACK ", "CANDIDATE", " ADOPTED"]) .join("text") .attr("x", (d, i) => i * -100) .attr("y", 0) .attr("dy", "3.5") .attr("dx", "270") .attr("font-family", "futura") .attr("font-weight", "bold") .style("fill", "black") .style("font-size", "8px") .text((d) => d); // label on left x-axes svg.append("text").attr("id", "labelLeftAxes"); svg .selectAll("labelLeftAxes") .data([" TRACK ", "CANDIDATE", "ADOPTED "]) .join("text") .attr("x", (d, i) => i * 100) .attr("y", 0) .attr("dy", "3.5") .attr("dx", "-310") .attr("font-family", "futura") .attr("font-weight", "bold") .style("fill", "black") .style("font-size", "8px") .text((d) => d); // ---------------------------// // PLOT DATA // // ---------------------------// // setting up force simulation // learn more here: https://www.d3indepth.com/force-layout/ console.log(RadarInputs); const groups = svg.selectAll("g").data(RadarInputs).join("g"); console.log(groups); var simulation = d3 .forceSimulation() .nodes(ASD_SSG_Blips) .velocityDecay(0.19) .force( "r", d3.forceRadial(function radiusRadialPoints(d) { if (d.ring === "Adopted") { d.radius = d3.randomUniform(30, 130)(); return d.radius; } else if (d.ring === "Candidate") { d.radius = d3.randomUniform(180, 230)(); return d.radius; } else if (d.ring === "Track") { d.radius = d3.randomUniform(280, 320)(); return d.radius; } }) ) .force( "collision", d3.forceCollide().radius(12).strength(0.1).iterations(100) ) // .force("collision",d3.forceCollide().strength(100).radius(function (d) {return d.radius + 1000;}).iterations(100)) // .force(d3.forceCollide().radius(12).strength(0.85).iterations(100)) .on("tick", ticked(groups)); return svg.node(); }35:Tec8,// plot data points on radar function ticked(groups) { // circle groups .append("circle") .attr("r", width / 150) .style("fill", function (d) { return dimColor(d.quadrant); }) .each((d) => { if (d.quadrant === "Available") { var newPoints = d3.pointRadial( Math.random() * (6.2 - 4.8) + 4.8, d.radius ); d.x = newPoints[0]; d.y = newPoints[1]; } else if (d.quadrant === "Monitored") { var newPoints = d3.pointRadial( Math.random() * (7.7 - 6.4) + 6.4, d.radius ); d.x = newPoints[0]; d.y = newPoints[1]; } else if (d.quadrant === "Participated") { var newPoints = d3.pointRadial(Math.random() * (9.3 - 8) + 8, d.radius); d.x = newPoints[0]; d.y = newPoints[1]; } else if (d.quadrant === "Developed") { var newPoints = d3.pointRadial( Math.random() * (10.9 - 9.6) + 9.6, d.radius ); d.x = newPoints[0]; d.y = newPoints[1]; } }) .attr("cx", function (d) { return d.x; }) .attr("cy", function (d) { return d.y; }) .attr("transform", (d) => { if (d.quadrant === "Available") { return "translate(" + [-10, -10] + ")"; } else if (d.quadrant === "Monitored") { return "translate(" + [10, -10] + ")"; } else if (d.quadrant === "Participated") { return "translate(" + [10, 10] + ")"; } else if (d.quadrant === "Developed") { return "translate(" + [-10, 10] + ")"; } }); // circle highlight groups .append("circle") .attr("r", width / 140) .style("fill", "none") .style("stroke-width", "2px") .style("opacity", "0.5") .style("stroke", function (d) { if (d.asBlip === "TRUE") { return dimColor(d.quadrant); } else { return "none"; } }) .attr("cx", function (d) { return d.x; }) .attr("cy", function (d) { return d.y; }) .attr("transform", (d) => { if (d.quadrant === "Available") { return "translate(" + [-10, -10] + ")"; } else if (d.quadrant === "Monitored") { return "translate(" + [10, -10] + ")"; } else if (d.quadrant === "Participated") { return "translate(" + [10, 10] + ")"; } else if (d.quadrant === "Developed") { return "translate(" + [-10, 10] + ")"; } }); // text in circle groups .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut) .append("text") .attr("transform", (d) => { if (d.quadrant === "Available") { if (d.index < 100) { return "translate(" + [-2, -7.75] + ")"; } else if (d.index > 99) { return "translate(" + [-4, -7.75] + ")"; } } else if (d.quadrant === "Monitored") { if (d.index < 100) { return "translate(" + [18, -7.75] + ")"; } else if (d.index > 99) { return "translate(" + [20, -7.75] + ")"; } } else if (d.quadrant === "Participated") { if (d.index < 100) { return "translate(" + [18, 12.25] + ")"; } else if (d.index > 99) { return "translate(" + [20, 12.25] + ")"; } } else if (d.quadrant === "Developed") { if (d.index < 100) { return "translate(" + [-2, 12.25] + ")"; } else if (d.index > 99) { return "translate(" + [-4, 12.25] + ")"; } } }) .attr("dx", function (d) { return d.x; }) .attr("dy", function (d) { return d.y; }) .attr("font-family", "futura") .style("font-size", "10px") .style("fill", "black") .text(function (d) { return d.label; }); }36:Tfdc,// plot data points on radar as rectangles function ticked2(groups) { // rectangle groups .append("rect") .attr("width", (1.618 * width) / 40) .attr("height", height / 70) .style("fill", function (d) { return dimColor(d.quadrant); }) .each((d) => { if (d.quadrant === "Monitored") { var newPoints = d3.pointRadial( Math.random() * (6.2 - 4.8) + 4.8, d.radius ); d.x = newPoints[0]; d.y = newPoints[1]; } else if (d.quadrant === "Available") { var newPoints = d3.pointRadial( Math.random() * (7.7 - 6.4) + 6.4, d.radius ); d.x = newPoints[0]; d.y = newPoints[1]; } else if (d.quadrant === "Developed") { var newPoints = d3.pointRadial(Math.random() * (9.3 - 8) + 8, d.radius); d.x = newPoints[0]; d.y = newPoints[1]; } else if (d.quadrant === "Participated") { var newPoints = d3.pointRadial( Math.random() * (10.9 - 9.6) + 9.6, d.radius ); d.x = newPoints[0]; d.y = newPoints[1]; } }) .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }) .attr("transform", (d) => { if (d.quadrant === "Monitored") { return "translate(" + [-10, -10] + ")"; } else if (d.quadrant === "Available") { return "translate(" + [10, -10] + ")"; } else if (d.quadrant === "Developed") { return "translate(" + [10, 10] + ")"; } else if (d.quadrant === "Participated") { return "translate(" + [-10, 10] + ")"; } }); // rectangle highlight groups .append("rect") .attr("width", (1.618 * width) / 40) .attr("height", height / 70) .style("fill", "none") .style("stroke-width", "2px") .style("opacity", "0.5") .style("stroke", function (d) { if (d.isNew === "TRUE") { return dimColor(d.quadrant); } else { return "none"; } }) .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }) .attr("transform", (d) => { if (d.quadrant === "Monitored") { return "translate(" + [-10, -10] + ")"; } else if (d.quadrant === "Available") { return "translate(" + [10, -10] + ")"; } else if (d.quadrant === "Developed") { return "translate(" + [10, 10] + ")"; } else if (d.quadrant === "Participated") { return "translate(" + [-10, 10] + ")"; } }); // name in rectangle groups .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut) .append("text") .attr("transform", (d) => { if (d.quadrant === "Monitored") { if (d.index < 100) { return "translate(" + [-0, -3] + ")"; } else if (d.index > 99) { return "translate(" + [-0, -3] + ")"; } } else if (d.quadrant === "Available") { if (d.index < 100) { return "translate(" + [width / 35, -3] + ")"; } else if (d.index > 99) { return "translate(" + [width / 35, -3] + ")"; } } else if (d.quadrant === "Developed") { if (d.index < 100) { return "translate(" + [6, 5 + height / 70] + ")"; } else if (d.index > 99) { return "translate(" + [4, 5 + height / 70] + ")"; } } else if (d.quadrant === "Participated") { if (d.index < 100) { return "translate(" + [-14, 5 + height / 70] + ")"; } else if (d.index > 99) { return "translate(" + [-16, 5 + height / 70] + ")"; } } }) .attr("x", function (d) { return d.x; }) .attr("y", function (d) { return d.y; }) // .attr("x", "50%") // .attr("y", "50%") .attr("font-family", "futura") .attr("dominant-baseline", "middle") .attr("text-anchor", "middle") .style("font-size", "6px") .style("fill", "black") .text(function (d) { return d.name; }); }37:Tb83,TreemapVisualizationScript = { var labelType, useGradients, nativeTextSupport, animate; (function f1() { var ua = navigator.userAgent, iStuff = ua.match(/iPhone/i) || ua.match(/iPad/i), typeOfCanvas = typeof HTMLCanvasElement, nativeCanvasSupport = typeOfCanvas == "object" || typeOfCanvas == "function", textSupport = nativeCanvasSupport && typeof document.createElement("canvas").getContext("2d").fillText == "function"; //I'm setting this based on the fact that ExCanvas provides text support for IE //and that as of today iPhone/iPad current text support is lame labelType = !nativeCanvasSupport || (textSupport && !iStuff) ? "Native" : "HTML"; nativeTextSupport = labelType == "Native"; useGradients = nativeCanvasSupport; animate = !(iStuff || !nativeCanvasSupport); })(); var Log = { elem: false, write: function (text) { if (!this.elem) this.elem = document.getElementById("log"); this.elem.innerHTML = text; this.elem.style.left = 200 - this.elem.offsetWidth / 2 + "px"; } }; var viz = new $jit.TM.Squarified({ //Where to inject the canvas. Any div container will do. injectInto: "infovis2", width: 978, height: 600, cushion: useGradients, //parent box title heights titleHeight: 15, //enable animations animate: animate, //box offsets offset: 0, //Attach left and right click events Events: { enable: true, onClick: function (node) { if (node) viz.enter(node); }, onRightClick: function () { viz.out(); } }, duration: 1000, //Enable tips Tips: { enable: true, //add positioning offsets offsetX: 20, offsetY: 20, //implement the onShow method to //add content to the tooltip when a node //is hovered onShow: function (tip, node, isLeaf, domElement) { var html = '

' + node.id + '

'; var data = node.data; if (data.NbConstruct) { html += "

" + "Number of views " + data.NbConstruct + "

"; } html += "

" + data.label + "

"; if (data.image) { html += ' Smiley face

'; } tip.innerHTML = html; } }, onCreateLabel: function (domElement, node) { domElement.innerHTML = node.name; var style = domElement.style; style.display = ""; style.border = "1px solid transparent"; domElement.onmouseover = function () { style.border = "1px solid #9FD4FF"; }; domElement.onmouseout = function () { style.border = "1px solid transparent"; }; } }); viz.loadJSON(Json); viz.compute(); viz.refresh(); return "OK"; }38:T1f30,Entries = [ { quadrant: 2, ring: 0, label: "AWS DynamoDB", active: true, moved: 1 }, { quadrant: 2, ring: 0, label: "Exasol", active: true, moved: 1 }, { quadrant: 2, ring: 0, label: "Redis", link: "https://engineering.zalando.com/tags/redis.html", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "Aerospike", active: true, moved: 0 }, { quadrant: 2, ring: 1, label: "Amazon Redshift", active: true, moved: 1 }, { quadrant: 2, ring: 2, label: "Hazelcast", active: true, moved: 1 }, { quadrant: 2, ring: 2, label: "Oracle DB", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "ZooKeeper", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "Google Bigtable", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "RocksDB", active: true, moved: 0 }, { quadrant: 2, ring: 0, label: "Cassandra", link: "https://engineering.zalando.com/tags/cassandra.html", active: true, moved: 0 }, { quadrant: 2, ring: 1, label: "HDFS", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "Solr", active: true, moved: -1 }, { quadrant: 2, ring: 0, label: "AWS S3", active: true, moved: 0 }, { quadrant: 2, ring: 0, label: "etcd", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "Memcached", active: true, moved: 0 }, { quadrant: 2, ring: 0, label: "PostgreSQL", link: "https://engineering.zalando.com/tags/postgresql.html", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "HBase", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "MongoDB", active: true, moved: 0 }, { quadrant: 2, ring: 0, label: "Elasticsearch", link: "https://engineering.zalando.com/tags/elasticsearch.html", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "CouchBase", active: true, moved: 0 }, { quadrant: 2, ring: 2, label: "Consul", active: true, moved: -1 }, { quadrant: 2, ring: 2, label: "MySQL", active: true, moved: 0 }, { quadrant: 3, ring: 0, label: "Databricks", active: true, moved: 1 }, { quadrant: 3, ring: 2, label: "YARN", active: true, moved: -1 }, { quadrant: 3, ring: 1, label: "Presto", active: true, moved: 0 }, { quadrant: 3, ring: 0, label: "Airflow", active: true, moved: 1 }, { quadrant: 3, ring: 1, label: "Flink", link: "https://engineering.zalando.com/tags/apache-flink.html", active: true, moved: 0 }, { quadrant: 3, ring: 2, label: "AWS Data Pipeline", active: true, moved: -1 }, { quadrant: 3, ring: 1, label: "Google BigQuery", active: true, moved: 0 }, { quadrant: 3, ring: 2, label: "AWS Glue", active: true, moved: 1 }, { quadrant: 3, ring: 0, label: "AWS EMR", active: true, moved: 0 }, { quadrant: 3, ring: 2, label: "Hadoop", active: true, moved: -1 }, { quadrant: 3, ring: 2, label: "AWS Athena", active: true, moved: 1 }, { quadrant: 3, ring: 0, label: "Spark", link: "https://engineering.zalando.com/tags/apache-spark.html", active: true, moved: 0 }, { quadrant: 1, ring: 0, label: "AWS CloudFront", active: true, moved: 1 }, { quadrant: 1, ring: 0, label: "Docker", link: "https://engineering.zalando.com/tags/docker.html", active: true, moved: 0 }, { quadrant: 1, ring: 0, label: "AWS CloudFormation", active: true, moved: 1 }, { quadrant: 1, ring: 2, label: "STUPS", link: "https://engineering.zalando.com/tags/stups.html", active: true, moved: 0 }, { quadrant: 1, ring: 0, label: "ZMON", active: true, moved: 0 }, { quadrant: 1, ring: 2, label: "Slurm", active: true, moved: 1 }, { quadrant: 1, ring: 0, label: "Skipper", active: true, moved: 1 }, { quadrant: 1, ring: 0, label: "Amazon SageMaker", active: true, moved: 1 }, { quadrant: 1, ring: 0, label: "Kubernetes", link: "https://engineering.zalando.com/tags/kubernetes.html", active: true, moved: 0 }, { quadrant: 1, ring: 0, label: "OpenTracing", active: true, moved: 0 }, { quadrant: 1, ring: 0, label: "Nginx", active: true, moved: 0 }, { quadrant: 1, ring: 1, label: "AWS Lambda", active: true, moved: 1 }, { quadrant: 0, ring: 0, label: "GraphQL", link: "https://engineering.zalando.com/tags/graphql.html", active: true, moved: 1 }, { quadrant: 0, ring: 0, label: "OpenAPI (Swagger)", link: "https://engineering.zalando.com/tags/openapi.html", active: true, moved: 0 }, { quadrant: 0, ring: 0, label: "Java", link: "https://engineering.zalando.com/tags/java.html", active: true, moved: 0 }, { quadrant: 0, ring: 0, label: "TypeScript", link: "https://engineering.zalando.com/tags/typescript.html", active: true, moved: 1 }, { quadrant: 0, ring: 2, label: "Haskell", link: "https://engineering.zalando.com/tags/haskell.html", active: true, moved: 0 }, { quadrant: 0, ring: 0, label: "Kotlin", link: "https://engineering.zalando.com/tags/kotlin.html", active: true, moved: 1 }, { quadrant: 0, ring: 2, label: "Rust", link: "https://engineering.zalando.com/tags/rust.html", active: true, moved: 0 }, { quadrant: 0, ring: 2, label: "Clojure", link: "https://engineering.zalando.com/tags/clojure.html", active: true, moved: 0 }, { quadrant: 0, ring: 0, label: "JavaScript", link: "https://engineering.zalando.com/tags/javascript.html", active: true, moved: 0 }, { quadrant: 0, ring: 0, label: "Go", link: "https://engineering.zalando.com/tags/golang.html", active: true, moved: 0 }, { quadrant: 0, ring: 0, label: "Scala", link: "https://engineering.zalando.com/tags/scala.html", active: true, moved: 0 }, { quadrant: 0, ring: 2, label: "R", active: true, moved: 0 }, { quadrant: 0, ring: 0, label: "Swift", link: "https://engineering.zalando.com/tags/swift.html", active: true, moved: 0 }, { quadrant: 0, ring: 0, label: "Python", link: "https://engineering.zalando.com/tags/python.html", active: true, moved: 0 }, { quadrant: 3, ring: 0, label: "Kafka", link: "https://engineering.zalando.com/tags/kafka.html", active: true, moved: 0 }, { quadrant: 3, ring: 0, label: "AWS SNS", active: true, moved: 0 }, { quadrant: 3, ring: 2, label: "ActiveMQ", active: true, moved: 0 }, { quadrant: 3, ring: 1, label: "AWS Kinesis", active: true, moved: 1 }, { quadrant: 3, ring: 0, label: "Nakadi", link: "https://nakadi.io", active: true, moved: 0 }, { quadrant: 3, ring: 0, label: "AWS SQS", active: true, moved: 0 }, { quadrant: 3, ring: 1, label: "RabbitMQ", link: "https://engineering.zalando.com/tags/rabbitmq.html", active: true, moved: 0 }, { quadrant: 3, ring: 2, label: "HornetQ", active: true, moved: 0 } ]39:T2d47,function radar_visualization(config) { // custom random number generator, to make random sequence reproducible // source: https://stackoverflow.com/questions/521295 var seed = 42; function random() { var x = Math.sin(seed++) * 10000; return x - Math.floor(x); } function random_between(min, max) { return min + random() * (max - min); } function normal_between(min, max) { return min + (random() + random()) * 0.5 * (max - min); } // radial_min / radial_max are multiples of PI const quadrants = [ { radial_min: 0, radial_max: 0.5, factor_x: 1, factor_y: 1 }, { radial_min: 0.5, radial_max: 1, factor_x: -1, factor_y: 1 }, { radial_min: -1, radial_max: -0.5, factor_x: -1, factor_y: -1 }, { radial_min: -0.5, radial_max: 0, factor_x: 1, factor_y: -1 } ]; const rings = [ { radius: 130 }, { radius: 220 }, { radius: 310 } // { radius: 400 } ]; const title_offset = { x: -675, y: -420 }; const footer_offset = { x: -675, y: 420 }; const legend_offset = [ { x: 450, y: 90 }, { x: -675, y: 90 }, { x: -675, y: -310 }, { x: 450, y: -310 } ]; function polar(cartesian) { var x = cartesian.x; var y = cartesian.y; return { t: Math.atan2(y, x), r: Math.sqrt(x * x + y * y) }; } function cartesian(polar) { return { x: polar.r * Math.cos(polar.t), y: polar.r * Math.sin(polar.t) }; } function bounded_interval(value, min, max) { var low = Math.min(min, max); var high = Math.max(min, max); return Math.min(Math.max(value, low), high); } function bounded_ring(polar, r_min, r_max) { return { t: polar.t, r: bounded_interval(polar.r, r_min, r_max) }; } function bounded_box(point, min, max) { return { x: bounded_interval(point.x, min.x, max.x), y: bounded_interval(point.y, min.y, max.y) }; } function segment(quadrant, ring) { var polar_min = { t: quadrants[quadrant].radial_min * Math.PI, r: ring == 0 ? 30 : rings[ring - 1].radius }; var polar_max = { t: quadrants[quadrant].radial_max * Math.PI, r: rings[ring].radius }; var cartesian_min = { x: 15 * quadrants[quadrant].factor_x, y: 15 * quadrants[quadrant].factor_y }; var cartesian_max = { x: rings[2].radius * quadrants[quadrant].factor_x, y: rings[2].radius * quadrants[quadrant].factor_y }; return { clipx: function (d) { var c = bounded_box(d, cartesian_min, cartesian_max); var p = bounded_ring(polar(c), polar_min.r + 15, polar_max.r - 15); d.x = cartesian(p).x; // adjust data too! return d.x; }, clipy: function (d) { var c = bounded_box(d, cartesian_min, cartesian_max); var p = bounded_ring(polar(c), polar_min.r + 15, polar_max.r - 15); d.y = cartesian(p).y; // adjust data too! return d.y; }, random: function () { return cartesian({ t: random_between(polar_min.t, polar_max.t), r: normal_between(polar_min.r, polar_max.r) }); } }; } // position each entry randomly in its segment for (var i = 0; i < config.entries.length; i++) { var entry = config.entries[i]; entry.segment = segment(entry.quadrant, entry.ring); var point = entry.segment.random(); entry.x = point.x; entry.y = point.y; entry.color = entry.active || config.print_layout ? config.rings[entry.ring].color : config.colors.inactive; } // partition entries according to segments var segmented = new Array(4); for (var quadrant = 0; quadrant < 4; quadrant++) { segmented[quadrant] = new Array(4); for (var ring = 0; ring < rings.length; ring++) { segmented[quadrant][ring] = []; } } for (var i = 0; i < config.entries.length; i++) { var entry = config.entries[i]; segmented[entry.quadrant][entry.ring].push(entry); } // assign unique sequential id to each entry var id = 1; for (var quadrant of [2, 3, 1, 0]) { for (var ring = 0; ring < rings.length; ring++) { var entries = segmented[quadrant][ring]; entries.sort(function (a, b) { return a.label.localeCompare(b.label); }); for (var i = 0; i < entries.length; i++) { entries[i].id = "" + id++; } } } function translate(x, y) { return "translate(" + x + "," + y + ")"; } function viewbox(quadrant) { return [ Math.max(0, quadrants[quadrant].factor_x * 400) - 420, Math.max(0, quadrants[quadrant].factor_y * 400) - 420, 440, 440 ].join(" "); } var svg = d3 .select("svg#" + config.svg_id) .style("background-color", config.colors.background) .attr("width", config.width) .attr("height", config.height); var radar = svg.append("g"); if ("zoomed_quadrant" in config) { svg.attr("viewBox", viewbox(config.zoomed_quadrant)); } else { radar.attr("transform", translate(config.width / 2, config.height / 2)); } var grid = radar.append("g"); // draw grid lines grid .append("line") .attr("x1", 0) .attr("y1", -400) .attr("x2", 0) .attr("y2", 400) .style("stroke", config.colors.grid) .style("stroke-width", 1); grid .append("line") .attr("x1", -400) .attr("y1", 0) .attr("x2", 400) .attr("y2", 0) .style("stroke", config.colors.grid) .style("stroke-width", 1); // draw rings for (var i = 0; i < rings.length; i++) { grid .append("circle") .attr("cx", 0) .attr("cy", 0) .attr("r", rings[i].radius) .style("fill", "none") .style("stroke", config.colors.grid) .style("stroke-width", 1); if (config.print_layout) { grid .append("text") .text(config.rings[i].name) .attr("y", -rings[i].radius + 62) .attr("text-anchor", "middle") .style("fill", "#e5e5e5") .style("font-family", "Arial, Helvetica") .style("font-size", 42) .style("font-weight", "bold") .style("pointer-events", "none") .style("user-select", "none"); } } function legend_transform(quadrant, ring, index = null) { var dx = ring < 2 ? 0 : 120; var dy = index == null ? -16 : index * 12; if (ring % 2 == 1) { dy = dy + 36 + segmented[quadrant][ring - 1].length * 12; } return translate( legend_offset[quadrant].x + dx, legend_offset[quadrant].y + dy ); } // draw title and legend (only in print layout) if (config.print_layout) { // title radar .append("text") .attr("transform", translate(title_offset.x, title_offset.y)) .text(config.title) .style("font-family", "Arial, Helvetica") .style("font-size", "34"); // footer radar .append("text") .attr("transform", translate(footer_offset.x, footer_offset.y)) .text("▲ moved up ▼ moved down") .attr("xml:space", "preserve") .style("font-family", "Arial, Helvetica") .style("font-size", "10"); // legend var legend = radar.append("g"); for (var quadrant = 0; quadrant < 4; quadrant++) { legend .append("text") .attr( "transform", translate(legend_offset[quadrant].x, legend_offset[quadrant].y - 45) ) .text(config.quadrants[quadrant].name) .style("font-family", "Arial, Helvetica") .style("font-size", "18"); for (var ring = 0; ring < rings.length; ring++) { legend .append("text") .attr("transform", legend_transform(quadrant, ring)) .text(config.rings[ring].name) .style("font-family", "Arial, Helvetica") .style("font-size", "12") .style("font-weight", "bold"); legend .selectAll(".legend" + quadrant + ring) .data(segmented[quadrant][ring]) .enter() .append("text") .attr("class", "legend" + quadrant + ring) .attr("transform", function (d, i) { return legend_transform(quadrant, ring, i); }) .text(function (d, i) { return d.id + ". " + d.label; }) .style("font-family", "Arial, Helvetica") .style("font-size", "11"); } } } // layer for entries var rink = radar.append("g").attr("id", "rink"); // rollover bubble (on top of everything else) var bubble = radar .append("g") .attr("id", "bubble") .attr("x", 0) .attr("y", 0) .style("opacity", 0) .style("pointer-events", "none") .style("user-select", "none"); bubble.append("rect").attr("rx", 4).attr("ry", 4).style("fill", "#333"); bubble .append("text") .style("font-family", "sans-serif") .style("font-size", "10px") .style("fill", "#fff"); bubble.append("path").attr("d", "M 0,0 10,0 5,8 z").style("fill", "#333"); function showBubble(d) { if (d.active || config.print_layout) { var tooltip = d3.select("#bubble text").text(d.label); var bbox = tooltip.node().getBBox(); d3.select("#bubble") .attr("transform", translate(d.x - bbox.width / 2, d.y - 16)) .style("opacity", 0.8); d3.select("#bubble rect") .attr("x", -5) .attr("y", -bbox.height) .attr("width", bbox.width + 10) .attr("height", bbox.height + 4); d3.select("#bubble path").attr( "transform", translate(bbox.width / 2 - 5, 3) ); } } function hideBubble(d) { var bubble = d3 .select("#bubble") .attr("transform", translate(0, 0)) .style("opacity", 0); } // draw blips on radar var blips = rink .selectAll(".blip") .data(config.entries) .enter() .append("g") .attr("class", "blip") .on("mouseover", showBubble) .on("mouseout", hideBubble); // configure each blip blips.each(function (d) { var blip = d3.select(this); // blip link if (!config.print_layout && d.active && d.hasOwnProperty("link")) { blip = blip.append("a").attr("xlink:href", d.link); } // blip shape if (d.moved > 0) { blip .append("path") .attr("d", "M -11,5 11,5 0,-13 z") // triangle pointing up .style("fill", d.color); } else if (d.moved < 0) { blip .append("path") .attr("d", "M -11,-5 11,-5 0,13 z") // triangle pointing down .style("fill", d.color); } else { blip.append("circle").attr("r", 9).attr("fill", d.color); } // blip text if (d.active || config.print_layout) { var blip_text = config.print_layout ? d.id : d.label.match(/[a-z]/i); blip .append("text") .text(blip_text) .attr("y", 3) .attr("text-anchor", "middle") .style("fill", "#fff") .style("font-family", "Arial, Helvetica") .style("font-size", function (d) { return blip_text.length > 2 ? "8" : "9"; }) .style("pointer-events", "none") .style("user-select", "none"); } }); // make sure that blips stay inside their segment function ticked() { blips.attr("transform", function (d) { return translate(d.segment.clipx(d), d.segment.clipy(d)); }); } // distribute blips, while avoiding collisions d3.forceSimulation() .nodes(config.entries) .velocityDecay(0.19) // magic number (found by experimentation) .force("collision", d3.forceCollide().radius(12).strength(0.85)) .on("tick", ticked); }3a:[{"id":"ba68a71d0c97f7a3aaa8bd9994f68d22322bd15a82371178f9874235f999c344c7e749c691e7ac2ee165b55abee909a7c17de29016ebf85db163b58ab420163e","href":"https://static.observableusercontent.com/files/ba68a71d0c97f7a3aaa8bd9994f68d22322bd15a82371178f9874235f999c344c7e749c691e7ac2ee165b55abee909a7c17de29016ebf85db163b58ab420163e","name":"ArchiMateCG.zip","type":"application/zip","lastModified":1721768133094.353,"size":40689306},{"id":"cfd43fc41cd3680a39c271a0fcd43daae99df8e2125757c1502f74fedc33b87dd6dac35e9e049f5612397db86ebd22df1847b6959d4d20fc7c19c1435ba34aeb","href":"https://static.observableusercontent.com/files/cfd43fc41cd3680a39c271a0fcd43daae99df8e2125757c1502f74fedc33b87dd6dac35e9e049f5612397db86ebd22df1847b6959d4d20fc7c19c1435ba34aeb","name":"ASD SSG Blips@6.tsv","type":"text/tab-separated-values","lastModified":1641836482815.686,"size":66477},{"id":"ce443f87383124b12d05a6a1347a1afb1366609b22962304658d7775c28a08e8d39b90d0fcaefcd091799a7197a5a6dc32101c8018ec91a97e9b64f117d19fe1","href":"https://static.observableusercontent.com/files/ce443f87383124b12d05a6a1347a1afb1366609b22962304658d7775c28a08e8d39b90d0fcaefcd091799a7197a5a6dc32101c8018ec91a97e9b64f117d19fe1","name":"ASD SSG Blips.tsv","type":"text/tab-separated-values","lastModified":1641386736603.803,"size":110234},{"id":"5922efa237c7ea00b0d63908a0dcdb7dca59a5a22a820c9c00e3fed50546a1a0da55eb45bc415cf5f70eac099b9d6b8c7f41b69569ecf87733e50be2394ad687","href":"https://static.observableusercontent.com/files/5922efa237c7ea00b0d63908a0dcdb7dca59a5a22a820c9c00e3fed50546a1a0da55eb45bc415cf5f70eac099b9d6b8c7f41b69569ecf87733e50be2394ad687","name":"ASD SSG Blips@1.tsv","type":"text/tab-separated-values","lastModified":1641424489652.671,"size":64214},{"id":"83058657349390734115bfa7c03eacf7ee151f49d942ca5f57ac8733ec2c1f9d2910ed4b8f91d5a2f81db49b4bdbaa20b4c010eb6e6b142e7fff76b76f3af688","href":"https://static.observableusercontent.com/files/83058657349390734115bfa7c03eacf7ee151f49d942ca5f57ac8733ec2c1f9d2910ed4b8f91d5a2f81db49b4bdbaa20b4c010eb6e6b142e7fff76b76f3af688","name":"ASD SSG Blips@2.tsv","type":"text/tab-separated-values","lastModified":1641463502346.757,"size":64656},{"id":"053e81c171d1f0d0b4faec745aaaeb15749e2648426cb04cbd82e31ef4d1368d0823afbed7e7c9ef5edbce230fdcf17d26e436613e39c46540944dc9b961b480","href":"https://static.observableusercontent.com/files/053e81c171d1f0d0b4faec745aaaeb15749e2648426cb04cbd82e31ef4d1368d0823afbed7e7c9ef5edbce230fdcf17d26e436613e39c46540944dc9b961b480","name":"ASD SSG Blips@7.tsv","type":"text/tab-separated-values","lastModified":1646323842429.418,"size":108324}] 32:{"id":"a725bcc4513512a7","slug":"the-asd-ssg-radar-screen","title":"The ASD SSG Radar Screen","thumbnail":"16c8848762b9d4861d95cf74c5eba70919528e4bb48bf2fba1e3bc033b597bbe","access_level":"public","create_time":"$D2022-01-05T11:53:30.208Z","update_time":"$D2024-01-09T06:56:25.600Z","view_time":null,"first_public_time":"$D2022-01-05T13:34:13.360Z","fork":{"id":"b2bad193f5d32707","slug":"basic-tooltip","title":"Basic Tooltip","owner":{"id":"881fc2b256e7c071","login":"jianan-li","name":"Jianan Li"}},"stars":3,"starred":false,"owner":{"type":"team","id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/071fc1ce1d8fbec71d4409987642a0c881b8a3651627b51e2cdaa7fcde295a10","tier":"starter_2024"},"version":953,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null}],"members":[{"type":"individual","id":"71983294fb89ee80","login":"nfigay","name":"Figay","avatar_url":"https://avatars-next.observableusercontent.com/604017b640b1f50c2b41a96fcf316faa227738b7b2b4d0f6221ace789ebbfd42","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"The ASD SSG Radar Screen","cells":[{"id":0,"value":"

The ASD SSG Radar Screen

\nBased on @aachga/techradar-reproduced and @benoldenburg/patterns-tooltip

\nThis is an attempt for automated creation of a radar screen from a data set.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"

Description

\nStandards are put on the appropriate quadrant according to its status (adopted, candidate, track) and ASD SSG positionning (Available external standard, ASD Development, Participate in external development, Monitor external development).\n

\nNote: Some color can be assigned to particular sets of standards","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":803,"value":"The last Radar release is SSG Standards Radar Chart (v1.10d 2019.10)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"radarTitle = `ASD SSG ${WorkingGroup} Standards Radar Chart ` +\n new Date().toLocaleDateString()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"WorkingGroup = \"PLM\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$35","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":98,"value":"// size of each ring\nringSizes = [\n { ringSize: 350, ringColor: \"#e6e6e4\" },\n { ringSize: 250, ringColor: \"#dddcda\" },\n { ringSize: 150, ringColor: \"#c7c7c7\" }\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"// add a scale for radar dimensions colors\ndimColor = d3\n .scaleOrdinal()\n .domain([\"STEP\", \"ASD S-Series\", \"3D Visualisation\", \"LOTAR\"])\n .range([\"#3db5be\", \"#84ad78\", \"#e88744\", \"#8d2045\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"viewof tableBlips = Inputs.table(ASD_SSG_Blips, {})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":916,"value":"ASD_SSG_Blips = FileAttachment(\"ASD SSG Blips@7.tsv\").tsv()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":933,"value":"JSON.stringify(RadarInputs)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":789,"value":"RadarInputs = ASD_SSG_Blips.filter(function (blip) {\n return blip.working_group == WorkingGroup;\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":929,"value":"JSON.stringify(ASD_SSG_Blips)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":940,"value":"createJsonDownloadButton(ASD_SSG_Blips, \"blips.json\", \"Download ASD SSG Blips\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":937,"value":"function createJsonDownloadButton(\n data,\n filename = \"data.json\",\n buttonTitle = \"Download JSON\"\n) {\n const blob = new Blob([JSON.stringify(data, null, 2)], { type: \"text/json\" });\n return DOM.download(blob, filename, buttonTitle);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"margin = ({\n top: 0,\n bottom: 0,\n left: 0,\n right: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"graphWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"graphHeight = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"da3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":233,"value":"toolTip = d3.select(\"body\").append(\"div\").attr(\"class\", \"toolTip\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":597,"value":"quarterTopLeftTitle = \"Available External Standards\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"styleTooltip = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":262,"value":"function nodeMouseOut(event, d) {\n // Hide tooltip on mouse out\n toolTip.style(\"display\", \"none\"); // Hide toolTip\n\n // Optional cursor change removed\n d3.select(event.target).style(\"cursor\", \"default\");\n\n // Optional highlight removed\n // d3.select(event.target) .transition() .attr(\"stroke\", \"#fff\") .attr(\"stroke-width\", 0);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":264,"value":"function nodeMouseOver(event, d) {\n // Get the toolTip, update the position, and append the inner html depending on your content\n // I tend to use template literal to more easily output variables.\n toolTip\n .style(\"left\", event.pageX + 18 + \"px\")\n .style(\"top\", event.pageY + 18 + \"px\")\n .style(\"display\", \"block\")\n .html(`${d.name}`);\n\n // Optional cursor change on target\n d3.select(event.target).style(\"cursor\", \"pointer\");\n\n // Optional highlight effects on target\n // d3.select(event.target) .transition() .attr(\"stroke\", \"#A8234E\") .attr(\"stroke-width\", 3);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":850,"value":"TM = html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":853,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":857,"value":"Json = {\n return CreateJsonFrom(numberPerQuadrant);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":837,"value":"numberPerQuadrant = ASD_SSG_Blips.reduce((accumulator, currentValue) => {\n /*\n Get the count of Likes that we have seen for this Year so far.\n \n If this is the first time we are seeing this Year, then\n accumulator[currentValue.Year] will return undefined, which evaluates\n to false, so count is given the value of the right side of the\n or operator (||), which is 0.\n */\n const count = accumulator[currentValue.quadrant] || 0;\n\n // update the count for this year\n accumulator[currentValue.quadrant] = count + 1;\n\n return accumulator;\n}, {}) // an empty object, {}, is our initial value","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":860,"value":"CreateJsonFrom = function createJson(data) {\n const dataSetName = \"ASD SSG PLM Standards Treemap 28/04/2022\";\n var jsonDataSet = {\n children: [],\n data: { $color: \"white\" },\n id: \"root\",\n name: dataSetName\n };\n var standardsNumber = 1;\n for (let i = 0; i < numberPerQuadrant.length; i++) {\n jsonDataSet.children[i] = {\n children: [],\n data: {\n $color: ColorOfQuadrants[i],\n $area: AreaNumericCriteriaPerQuadrant[Quadrants[i]],\n articleTitle: Quadrants[i]\n },\n name: Quadrants[i],\n id: Quadrants[i],\n title: Quadrants[i]\n };\n jsonDataSet.children[i].children = QuadrantsWithStandards.get(\n Quadrants[i]\n ).map((currentElement) => ({\n id: standardsNumber++,\n name: currentElement.label,\n children: [],\n data: {\n standardLabel: currentElement.label,\n $color: ColorOfQuadrants[i], //\"#C0C0C0\",\n $area: 1\n }\n }));\n }\n return jsonDataSet;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":863,"value":"ColorOfQuadrants = d3\n .quantize(\n (t) => colorToHex(d3.interpolateSpectral(t * 0.8 + 0.1)),\n Quadrants.length\n )\n .reverse()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":866,"value":"Quadrants = Object.keys(numberPerQuadrant)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":879,"value":"AreaNumericCriteriaPerQuadrant = numberPerQuadrant","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":887,"value":"QuadrantsWithStandards = d3.group(ASD_SSG_Blips, (d) => d.quadrant)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":873,"value":"function colorToHex(color) {\n if (color.substr(0, 1) === \"#\") {\n return color;\n }\n var digits = /(.*?)rgb\$(\\d+), (\\d+), (\\d+)\$/.exec(color);\n\n var red = parseInt(digits[2]);\n var green = parseInt(digits[3]);\n var blue = parseInt(digits[4]);\n\n var rgb = blue | (green << 8) | (red << 16);\n return digits[1] + \"#\" + rgb.toString(16).padStart(6, \"0\");\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":842,"value":"$$jit = require(\"https://philogb.github.io/jit/static/v20/Jit/jit-yc.js\").catch(\n () => window.$jit\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":411,"value":"

An alternative solution with tech-radar (Zalando)

","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":407,"value":"radar_visualization({\n svg_id: \"radar\",\n width: 1450,\n height: 1000,\n colors: {\n background: \"#fff\",\n grid: \"#bbb\",\n inactive: \"#ddd\"\n },\n title: \"ASD SSG PLM Standard Radar 2022-01-10\",\n quadrants: [\n { name: \"Languages\" },\n { name: \"Infrastructure\" },\n { name: \"Datastores\" },\n { name: \"Data Management\" }\n ],\n rings: [\n { name: \"ADOPTED\", color: \"#93c47d\" },\n { name: \"CANDIDATE\", color: \"#93d2c2\" },\n { name: \"TRACK\", color: \"#fbdb84\" }\n // { name: \"DEPRECATED\", color: \"#efafa9\" }\n ],\n print_layout: true,\n // zoomed_quadrant: 0,\n //ENTRIES\n entries: Entries\n //ENTRIES\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"$38","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":404,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":652,"value":"$39","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":717,"value":"uuid = import(\"uuid/dist/esm-browser/v5.js\").then((module) => module.default)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":720,"value":"namespace = uuid(\"https://www.asd-ssg.org/\", uuid.URL)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":728,"value":"data = ASD_SSG_Blips.map((data, index) => {\n var datas = {};\n var standard = {};\n standard[\"id\"] = uuid(data.label, namespace);\n standard[\"type\"] = \"business-object\";\n standard[\"label\"] = data.label;\n standard[\"name\"] = data.name;\n standard[\"ring\"] = data.ring;\n standard[\"quadrant\"] = data.quadrant;\n //standard[\"description\"] = data.description;\n standard[\"reference\"] = data.Reference;\n datas[\"group\"] = \"nodes\";\n datas[\"data\"] = standard;\n return datas;\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":760,"value":"JSON.stringify(data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":948,"value":"Some complementary ressources:\nhttps://stackoverflow.com/questions/18353107/radar-scanner-rotation-effect\nhttps://csswolf.com/radar-scanner-animation-effect-in-css-no-js/\nhttps://tsh.io/blog/javascript-trends/\nhttps://github.com/thoughtworks/build-your-own-radar?tab=readme-ov-file\nhttps://www.infoq.com/fr/articles/tech-radar/","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W3a","stdlib":"1","titling":"auto"}} 33:"$32:body"