2b:null 2c:["$","title",null,{"children":"RadViz | Rene Cutura | Observable"}] 31:T5a5,{ const svg = DOM.svg(W * 2, W); const g = d3 .select(svg) .append("g") .attr("transform", `translate(${W}, ${W / 2})`); g.append("circle") .attr("r", radius) .attr("fill", "none") .attr("stroke", "grey"); g.append("circle") .attr("r", radius - 15) .attr("fill", "none") .attr("stroke", "#ddd"); g.selectAll(".axis") .data(dimensional_anchors) .join("circle") .attr("class", "axis") .attr("cx", (d) => radius * d[0]) .attr("cy", (d) => radius * d[1]) .attr("r", 10); const labels = g .selectAll(".axis-label") .data(dimensional_anchors) .join("g") .attr( "transform", (d, i) => `translate(${(radius + 22) * d[0]}, ${(radius + 22) * d[1]}) rotate(${ 90 + (Math.atan2(d[1], d[0]) / Math.PI) * 180 })` ) .append("text") .attr("pointer-events", "none") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .text((d, i) => data.columns[i]); const data_g = d3 .select(svg) .append("g") .attr("transform", `translate(${W}, ${W / 2})`); data_g .selectAll("circle") .data(points) .join("circle") .attr("cx", (d) => (radius - 15) * d[0]) .attr("cy", (d) => (radius - 15) * d[1]) .attr("r", 3) .attr("stroke", "none") .attr("fill", (d, i) => color(data.labels[i])) .append("title") .text((d, i) => data.names[i]); return svg; }32:Td50,{ const svg = DOM.svg(W * 2, W); let N = data.columns.length; const radius_labels = radius + 32; const radius_points = radius - 15; let proj = druid.MDS.transform(druid.Matrix.from(normalized_data).T); let angles = proj.to2dArray.map(([x, y]) => Math.atan2(y, x)); let dimensional_anchors = angles.map((d) => [Math.cos(d), Math.sin(d)]); // step 3. compute radviz positions const D = druid.Matrix.from(normalized_data); const y = new druid.Matrix(D.shape[0], 1, (i) => d3.fsum(D.row(i))); let S = druid.Matrix.from(dimensional_anchors); let points = D.dot(S).divide(y); const g = d3 .select(svg) .append("g") .attr("transform", `translate(${W}, ${W / 2})`); const dimensional_handles = g .selectAll(".axis") .data(dimensional_anchors) .join("g") .attr( "transform", (d) => `translate(${radius * d[0]}, ${radius * d[1]}) rotate(${ 90 + (Math.atan2(d[1], d[0]) / Math.PI) * 180 })` ) .attr("class", "axis"); dimensional_handles .append("path") .attr("d", "M 0 0 l -10 -15 h 20 Z") .style("stroke", "white") .style("stroke-width", 25) .style("paint-order", "stroke") .style("cursor", "move"); const drag = d3.drag().on("drag", ({ x, y }, d) => { const angle = Math.atan2(y, x); d[0] = Math.cos(angle); d[1] = Math.sin(angle); redraw(); }); dimensional_handles.call(drag); g.append("circle") .attr("r", radius) .attr("fill", "none") .attr("stroke", "grey"); g.append("circle") .attr("r", radius_points) .attr("fill", "none") .attr("stroke", "#ddd"); const labels = g .selectAll(".axis-label") .data(dimensional_anchors) .join("g") .attr("pointer-events", "none") .attr( "transform", (d, i) => `translate(${radius_labels * d[0]}, ${radius_labels * d[1]}) rotate(${ 90 + (Math.atan2(d[1], d[0]) / Math.PI) * 180 })` ); labels .append("text") .attr("text-anchor", "middle") .attr("dominant-baseline", "central") .attr("pointer-events", "none") .text((d, i) => data.columns[i]); const data_g = d3 .select(svg) .append("g") .attr("transform", `translate(${W}, ${W / 2})`); const datapoints = data_g .selectAll("circle") .data(points) .join("circle") .attr("cx", (d) => radius_points * d[0]) .attr("cy", (d) => radius_points * d[1]) .attr("r", 3) .attr("stroke", "none") .attr("fill", (d, i) => color(data.labels[i])); datapoints.append("title").text((d, i) => data.names[i]); function redraw() { S = druid.Matrix.from(dimensional_anchors); points = D.dot(S).divide(y); g.selectAll(".axis").attr( "transform", (d) => `translate(${radius * d[0]}, ${radius * d[1]}) rotate(${ 90 + (Math.atan2(d[1], d[0]) / Math.PI) * 180 })` ); labels.attr( "transform", (d, i) => `translate(${radius_labels * d[0]}, ${radius_labels * d[1]}) rotate(${ 90 + (Math.atan2(d[1], d[0]) / Math.PI) * 180 })` ); data_g .selectAll("circle") .data(points) .join("circle") .attr("cx", (d) => radius_points * d[0]) .attr("cy", (d) => radius_points * d[1]) .attr("r", 3) .attr("stroke", "none") .attr("fill", (d, i) => color(data.labels[i])); } return svg; }33:[] 2f:{"id":"93b039e410d32719","slug":"radviz","title":"RadViz","thumbnail":"350b87a274248fc060f7b215304ab824d83e5b4f54342b2ca3ba9e4a1fd3b5b2","access_level":"public","create_time":"$D2021-12-28T08:38:18.844Z","update_time":"$D2022-04-11T10:04:42.516Z","view_time":null,"first_public_time":"$D2022-04-11T10:07:31.566Z","fork":false,"stars":30,"starred":false,"owner":{"type":"team","id":"c90a84293079d5ed","login":"saehrimnir","name":"Rene Cutura","avatar_url":"https://avatars-next.observableusercontent.com/61daf454199176e4cd2e86d1a265b1033e6ef3ba01e952e26556736e848ff7ee","tier":"starter_2024"},"version":426,"publish_version":426,"role":null,"authored":false,"authors":[{"type":"individual","id":"4d69c1aedfe17899","login":"saehrimnir","name":"Rene Cutura","avatar_url":"https://avatars-next.observableusercontent.com/61daf454199176e4cd2e86d1a265b1033e6ef3ba01e952e26556736e848ff7ee","tier":null}],"members":[{"type":"individual","id":"4d69c1aedfe17899","login":"saehrimnir","name":"Rene Cutura","avatar_url":"https://avatars-next.observableusercontent.com/61daf454199176e4cd2e86d1a265b1033e6ef3ba01e952e26556736e848ff7ee","tier":null,"role":"editor"}],"comments":[{"id":"3db31170c685cfd7","reply_to_id":null,"content":"Awesome demonstration of Druidjs!","create_time":"$D2022-04-11T17:43:37.061Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"6cdb6324966da5d4","login":"dleeftink","name":"","avatar_url":"https://avatars-next.observableusercontent.com/3700a558b99f2f54fb2542d09667aadabaae51f24e04e47e420c844503696b0e","tier":null}},{"id":"7950cbe4edead523","reply_to_id":null,"content":"https://observablehq.com/@igor-a1/star-coordinates-vs-radviz","create_time":"$D2022-04-19T09:08:53.091Z","update_time":null,"resolved":false,"user":{"type":"individual","id":"4c750d0fb9bf5b48","login":"igor-a1","name":"Igor A1","avatar_url":"https://avatars-next.observableusercontent.com/7f0055f4279565990ec1cc324da008037750cdcc99d774567c194b9e9898c62f","tier":null}}],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":6,"collection":null,"type":"notebook","body":{"title":"RadViz","cells":[{"id":0,"value":"# RadViz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":87,"value":"1. Normalize the data ${tex`X \\in \\mathbb{R}^{N \\times D}`} to interval ${tex`\\langle 0, 1 \\rangle`},\n2. Place the dimensional anchors ${tex`S_j`}, where ${tex`j \\in \\{1, \\dots, D\\}`}
${tex`S_j = \\left(r \\cos{\\frac{(j-1)2\\pi}{D}}, r \\sin{\\frac{(j-1)2\\pi}{D}} \\right)`},\n3. Calculate the points ${tex`P_i`} where to place each record,
${tex`P_i = \\sum_j^D{\\frac{x_{ij}}{\\sum_j^D{x_{ij}}}S_j}`}.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":353,"value":"## Standard RadViz","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":403,"value":"

Nováková, L., & Štěpánková, O. (2009). Visualization of Trends Using RadViz. In Lecture Notes in Computer Science (pp. 56–65). Springer Berlin Heidelberg. https://doi.org/10.1007/978-3-642-04125-9_9

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":140,"value":"viewof select = Inputs.select(\n [\"IRIS\", \"SPOTIFY\", \"MAMMOTH\", \"OECD\", \"SSHAPE\", \"WAVES\", \"SWISSROLL\"],\n {\n label: \"Select dataset\"\n }\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":97,"value":"normalized_data = {\n const extents = data.columns.map((d, i) =>\n d3.extent(data.values, (d) => d[i])\n );\n extents.forEach((row) => (row[2] = row[1] - row[0]));\n const values = data.values.map((row) => {\n return row.map((value, i) => {\n return (value - extents[i][0]) / extents[i][2];\n });\n });\n return values;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":19,"value":"dimensional_anchors = {\n //let D = druid.MDS.transform(druid.Matrix.from(normalized_data).T);\n //let angles = D.to2dArray.map(([x, y]) => Math.atan2(y, x));\n //return angles.map((d) => [Math.cos(d), Math.sin(d)]);\n //console.log(D);\n // standard radviz\n let N = data.columns.length;\n return druid\n .linspace(0, Math.PI * 2, N + 1)\n .slice(0, N)\n .map((d) => [Math.cos(d), Math.sin(d)]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":207,"value":"points = {\n const N = normalized_data.length;\n const D = druid.Matrix.from(normalized_data);\n const S = druid.Matrix.from(dimensional_anchors);\n const y = new druid.Matrix(N, 1, (i) => druid.neumair_sum(D.row(i)));\n return D.dot(S).divide(y);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":294,"value":"swatches({ color: color })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":38,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":203,"value":"## Draggable dimensional anchors","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":374,"value":"\"RadViz Deluxe\" uses MDS to project ${tex`X^T`}, after projection a Hamilton Circle is searched, which defines then the position of the dimensional anchors. \"RadViz Deluxe\" goes then one step further, in improving the positions of the points, to reduce the \"Attribute Layout Error\".\n\nHere, I used MDS to project ${tex`X^T`} and normalized the polar coordinates to the radius of the outer circle. For positioning the points I used the same formular as for standard RadViz. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":397,"value":"

Cheng, S., Xu, W., & Mueller, K. (2017). RadViz Deluxe: An Attribute-Aware Display for Multivariate Data. Processes, 5(4), 75. https://doi.org/10.3390/pr5040075

","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined"},{"id":309,"value":"swatches({ color: color })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":176,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":40,"value":"W = width / 2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":31,"value":"radius = W / 2 - margin","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":34,"value":"margin = 50","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":273,"value":"color = d3\n .scaleOrdinal(d3.schemeTableau10)\n .domain(Array.from(new Set(data.labels)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":283,"value":"import { swatches } from \"@d3/color-legend\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":13,"value":"data = datasets[select]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":6,"value":"druid = require(\"@saehrimnir/druidjs\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"},{"id":10,"value":"datasets = require(\"@saehrimnir/dataset@0.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"