40:null 41:["$","title",null,{"children":"A Digital Twin Radar Screen | Thomas R | Observable"}] 47:T1723,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("Cartographie des caractéristiques d'un Jumeau Numérique") .attr("x", -320) .attr("y", -370) .attr("fill", "black"); var myblock1 = svg .append("foreignObject") .attr("x", -350) .attr("y", -290) .attr("width", 200) .attr("height", 150) .attr("class", "svg-quarter-title"); var myblock2 = svg .append("foreignObject") .attr("x", 280) .attr("y", -290) .attr("width", 200) .attr("height", 150) .attr("class", "svg-quarter-title"); var myblock3 = svg .append("foreignObject") .attr("x", -350) .attr("y", 250) .attr("width", 200) .attr("height", 150) .attr("class", "svg-quarter-title"); var myblock4 = svg .append("foreignObject") .attr("x", 280) .attr("y", 250) .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", "#808080") .style("font-size", "16px") .append("p") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle") .html("FINALITES"); var div2 = myblock2 .append("xhtml:div") .append("div") .style("display", "table") .attr("font-family", "futura") .attr("font-weight", "bold") .style("color", "#808080") .style("font-size", "16px") .append("p") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle") .html("CAPACITES"); var div3 = myblock3 .append("xhtml:div") .append("div") .style("display", "table") .attr("font-family", "futura") .attr("font-weight", "bold") .style("color", "#808080") .style("font-size", "16px") .append("p") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle") .html("IDENTITE"); var div4 = myblock4 .append("xhtml:div") .append("div") .style("display", "table") .append("p") .attr("font-family", "futura") .attr("font-weight", "bold") .style("color", "#808080") .style("font-size", "16px") .style("display", "table-cell") .style("text-align", "center") .style("vertical-align", "middle") .html("PRINCIPES"); // ---------------------------// // 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(["UTILES", "NECESSAIRES", "INDISPENSABLES"]) .join("text") .attr("x", (d, i) => i * -120) .attr("y", 0) .attr("dy", "3.5") .attr("dx", "280") .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(["UTILES", "NECESSAIRES", "INDISPENSABLES"]) .join("text") .attr("x", (d, i) => i * 100) .attr("y", 0) .attr("dy", "3.5") .attr("dx", "-320") .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/ const groups = svg.selectAll("g").data(DTdatabase).join("g"); var simulation = d3 .forceSimulation() .nodes(DTdatabase) .velocityDecay(0.19) .force( "r", d3.forceRadial(function radiusRadialPoints(d) { if (d.ring === "Indispensables") { d.radius = d3.randomUniform(30, 130)(); return d.radius; } else if (d.ring === "Necessaires") { d.radius = d3.randomUniform(180, 230)(); return d.radius; } else if (d.ring === "Utiles") { 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(); }48:Teb8,// 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 === "Finalites") { 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 === "Capacites") { 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 === "Principes") { var newPoints = d3.pointRadial(Math.random() * (9.3 - 8) + 8, d.radius); d.x = newPoints[0]; d.y = newPoints[1]; } else if (d.quadrant === "Identite") { 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 === "Finalites") { return "translate(" + [-10, -10] + ")"; } else if (d.quadrant === "Capacites") { return "translate(" + [10, -10] + ")"; } else if (d.quadrant === "Principes") { return "translate(" + [10, 10] + ")"; } else if (d.quadrant === "Identite") { 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 === "Finalites") { return "translate(" + [-10, -10] + ")"; } else if (d.quadrant === "Capacites") { return "translate(" + [10, -10] + ")"; } else if (d.quadrant === "Principes") { return "translate(" + [10, 10] + ")"; } else if (d.quadrant === "Identite") { return "translate(" + [-10, 10] + ")"; } }); // text in circle groups .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut) .append("text") .attr("transform", (d) => { if (d.quadrant === "Finalites") { if (d.index < 100) { return "translate(" + [-2, -7.75] + ")"; } else if (d.index > 99) { return "translate(" + [-4, -7.75] + ")"; } } else if (d.quadrant === "Capacites") { if (d.index < 100) { return "translate(" + [18, -7.75] + ")"; } else if (d.index > 99) { return "translate(" + [20, -7.75] + ")"; } } else if (d.quadrant === "Principes") { if (d.index < 100) { return "translate(" + [18, 12.25] + ")"; } else if (d.index > 99) { return "translate(" + [20, 12.25] + ")"; } } else if (d.quadrant === "Identite") { 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; }); }49:Tfcc,// 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 === "Finalites") { 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 === "Capacites") { 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 === "Principes") { var newPoints = d3.pointRadial(Math.random() * (9.3 - 8) + 8, d.radius); d.x = newPoints[0]; d.y = newPoints[1]; } else if (d.quadrant === "Identite") { 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 === "Finalites") { return "translate(" + [-10, -10] + ")"; } else if (d.quadrant === "Capacites") { return "translate(" + [10, -10] + ")"; } else if (d.quadrant === "Principes") { return "translate(" + [10, 10] + ")"; } else if (d.quadrant === "Identite") { 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 === "Finalites") { return "translate(" + [-10, -10] + ")"; } else if (d.quadrant === "Capacites") { return "translate(" + [10, -10] + ")"; } else if (d.quadrant === "Principes") { return "translate(" + [10, 10] + ")"; } else if (d.quadrant === "Identite") { return "translate(" + [-10, 10] + ")"; } }); // name in rectangle groups .on("mousemove", nodeMouseOver) .on("mouseout", nodeMouseOut) .append("text") .attr("transform", (d) => { if (d.quadrant === "Finalites") { if (d.index < 100) { return "translate(" + [-0, -3] + ")"; } else if (d.index > 99) { return "translate(" + [-0, -3] + ")"; } } else if (d.quadrant === "Capacites") { if (d.index < 100) { return "translate(" + [width / 35, -3] + ")"; } else if (d.index > 99) { return "translate(" + [width / 35, -3] + ")"; } } else if (d.quadrant === "Principes") { 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 === "Identite") { 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; }); }4a:[{"id":"48e466e5be4df46f5e91952970aae56eb2f843437dbd8425b21cbc8ed143cd15b60d0acfa01c648d1be47f3aaca2be18a65fe85b00e92108ee3db26d399fd77f","href":"https://static.observableusercontent.com/files/48e466e5be4df46f5e91952970aae56eb2f843437dbd8425b21cbc8ed143cd15b60d0acfa01c648d1be47f3aaca2be18a65fe85b00e92108ee3db26d399fd77f","name":"DT_Caract@2.csv","type":"text/csv","lastModified":1675695584437.725,"size":1974},{"id":"21b89b3e3ae5f96900da2939f105e3e3deac73ed2c706f084142741fae22aa5733d4b4e6c091248e199f6082d1d276ab983cb4719cd990aba50f29c7b8101502","href":"https://static.observableusercontent.com/files/21b89b3e3ae5f96900da2939f105e3e3deac73ed2c706f084142741fae22aa5733d4b4e6c091248e199f6082d1d276ab983cb4719cd990aba50f29c7b8101502","name":"DT_Caract@3.csv","type":"text/csv","lastModified":1675696910184.017,"size":1593},{"id":"fc7b8c19d15adcd157b4a85f6c5fb518cec4d0b2971fc1173d0984358945df2a7b0f488fe3fd137a44f8130c942a1c401270997aa6fe49ee2d8af3efd98be031","href":"https://static.observableusercontent.com/files/fc7b8c19d15adcd157b4a85f6c5fb518cec4d0b2971fc1173d0984358945df2a7b0f488fe3fd137a44f8130c942a1c401270997aa6fe49ee2d8af3efd98be031","name":"DT_Caract_Updated@1.csv","type":"text/csv","lastModified":1680035088062.873,"size":1703}] 45:{"id":"9b42a6b33be5e81a","slug":null,"title":"A Digital Twin Radar Screen","thumbnail":"9cf22b914a10f9e4241de881fb44fd3cc92fbd667b28a1b69fc9232b7e1c3ea5","access_level":"public","create_time":"$D2023-02-06T10:32:20.283Z","update_time":"$D2023-05-03T09:19:56.717Z","view_time":null,"first_public_time":"$D2023-02-06T10:32:20.283Z","has_unpublished_edits":null,"fork":{"id":"a725bcc4513512a7","slug":"the-asd-ssg-radar-screen","title":"The ASD SSG Radar Screen","owner":{"id":"37f7a7f77e187b5e","login":"nfigay","name":"Figay"}},"stars":1,"starred":false,"owner":{"type":"team","id":"189e4ffd0ce52501","login":"dtwin","name":"Thomas R","avatar_url":"https://avatars-next.observableusercontent.com/d61c0eaa5364cb3c29fb8773194c5464c508835e3e90f358e551eafb78e142be","tier":"starter_2024","bio":"","following":false},"version":820,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"f5800e55d72c7844","login":"dtwin","name":"Thomas R","avatar_url":"https://avatars-next.observableusercontent.com/d61c0eaa5364cb3c29fb8773194c5464c508835e3e90f358e551eafb78e142be","tier":null,"bio":"","following":false}],"members":[{"type":"individual","id":"f5800e55d72c7844","login":"dtwin","name":"Thomas R","avatar_url":"https://avatars-next.observableusercontent.com/d61c0eaa5364cb3c29fb8773194c5464c508835e3e90f358e551eafb78e142be","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":3,"collection":null,"type":"notebook","body":{"titling":"auto","title":"A Digital Twin Radar Screen","cells":[{"id":0,"value":"

A Digital Twin 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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"

Description

\nClassification par importance des caractéristiques d'un Jumeau Numérique : indispensables, nécessaires et utiles.","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":519,"value":"radarTitle = \"Caractéristiques d'un Jumeau Numérique\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":90,"value":"$47","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":93,"value":"$48","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":305,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":747,"value":"DTdatabase = await FileAttachment(\"DT_Caract_Updated@1.csv\").csv({typed: \"auto\"})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"DTdatabase","database":"$undefined"},{"id":765,"value":"DT_Caract = FileAttachment(\"DT_Caract@3.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"width = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"height = 800","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"graphWidth = width - margin.left - margin.right","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"graphHeight = height - margin.top - margin.bottom","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"styleTooltip = html`\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$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","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4a","stdlib":"1"}} 46:"$45:body"