25:["$","title",null,{"children":"Project phase 3: Final | Yujie Chen | Observable"}] 49:T5d9,viewof w = { const form = html``; // nonlinear slider to weight mappings: function weightOfSlider(s){ return s < 1 ? s : (s-1)*(data.attrs.length-1)+1; } function sliderOfWeight(w){ return w < 1 ? w : (w-1)/(data.attrs.length-1)+1; } // initialize weights to 1.0: var weights = Object.fromEntries(data.attrs.map(a => [a, 1.0])); form.value = weights; // slider interaction: data.attrs.forEach(attr => form[attr].oninput = () => { weights[attr] = weightOfSlider(form[attr].valueAsNumber); const remaining = data.attrs.length - weights[attr]; const prev = d3.sum(data.attrs.map(a => weights[a])) - weights[attr]; if (prev == 0) data.attrs.forEach(a => { if (a != attr) form[a].value = sliderOfWeight(weights[a] = remaining / (data.attrs.length-1)) }); else data.attrs.forEach(a => { if (a != attr) form[a].value = sliderOfWeight(weights[a] = weights[a] * remaining / prev) }); form.value = weights; } ); /* data.weights = weights; graph.edges.forEach( (e, i) => { e.mydistance = Distance(e.source.row, e.target.row)} ); simulation.force("link") .distance(e => e.mydistance * 20); simulation.alpha(1).restart(); form.value = data.attrs.map(attr => form[attr].valueAsNumber); form.oninput();*/ return form; }4a:T8f3,chart = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, height]); const labels = svg.append("g") .attr('class', 'labels') .selectAll("text").data(graph.vertices).join("text") .text(d => d.id) .attr("dx", 8).attr("dy", ".35em") .attr('id', (d, i) => {return "text_" + i}) .style('display', (d,i) => { if(relevance_inPercent[i] < relevance[0] * 100 || relevance_inPercent[i] > relevance[1] * 100){ simulation.restart(); return "none"; }else{ simulation.restart(); return ""; } }) .call(drag(simulation)); const nodes = svg.append("g") .attr('class', 'nodes') .selectAll("circle").data(graph.vertices).join("circle") .attr("r", 7) .attr('id', (d, i) => {return "circle_" + i}) .attr('class', "circle") .style('display', (d,i) => { if(relevance_inPercent[i] < relevance[0] * 100 || relevance_inPercent[i] > relevance[1] * 100){ simulation.restart(); return "none"; }else{ simulation.restart(); return ""; } }) .on("click", (event, d) => { var selectedID = d3.select(event.target).attr("id").split("_")[1]; var lineID = "#line_" + selectedID; if(d3.select(event.target).style("fill") == "blue"){ d3.select(event.target).style('fill', (d, i) => cScale(relevance_inPercent[d.index])); d3.select(lineID).style('stroke', (d, i) => cScale(relevance_inPercent[d.index])); d3.select(lineID).attr('stroke-width', 1.5); }else{ d3.select(lineID).style('stroke', "blue"); d3.select(lineID).attr('stroke-width', 5); d3.select(event.target).style('fill', "blue"); } }) .style('fill', (d,i) => cScale(relevance_inPercent[i])) .call(drag(simulation)); nodes.append("title") .text((d, i) => {return "Relevance score: " + relevance_inPercent[i].toFixed(2);}); simulation.on("tick", () => { nodes.attr("cx", d => d.x).attr("cy", d => d.y); labels.attr("x", d => d.x).attr("y", d => d.y); }); invalidation.then(() => simulation.stop()); return svg.node(); }4b:Ta23,paralle = { const svg = d3.create("svg") .attr("viewBox", [0, 0, width, paralle_height]); var lines = svg.append("g") .attr("fill", "none") .attr("stroke-width", 1.5) .attr("stroke-opacity", 0.4) .selectAll("path") .data(Object.entries(parallel_data)) .join("path") .attr("stroke", (d, i) => cScale(relevance_inPercent[i])) .attr("d", d => line(d3.cross(attributes, [d[1]], (key, d) => [key, d[key]]))) .attr('id', (d, i) => {return "line_" + i}) .attr('class', "line") // .on("mouseover", (event,d) => { // d3.select(event.target).style('stroke', 'blue'); // d3.select(event.target).attr('stroke-width', 6); // }) // .on("mouseout", (event,d) => { // d3.select(event.target).style('stroke', d => z(d[1][keys[0]])); // d3.select(event.target)parallel_data .attr('stroke-width', 1.5); // }) .on("click", (event, d) => { var selectedID = d3.select(event.target).attr("id").split("_")[1]; var circleID = "#circle_" + selectedID; if(d3.select(event.target).style("stroke-width") == "5px"){ d3.select(event.target).style('stroke', (d, i) => cScale(d["Relevance"])); d3.select(event.target).attr('stroke-width', 1.5); d3.select(circleID).style('fill', (d, i) => cScale(relevance_inPercent[d.index])); }else{ d3.select(event.target).style('stroke', "blue"); d3.select(event.target).attr('stroke-width', 5); d3.select(circleID).style('fill', "blue"); } }) .style('display', (d,i) => { if(relevance_inPercent[i] < relevance[0] * 100 || relevance_inPercent[i] > relevance[1] * 100){ return "none"; }else{ return ""; } }); lines.append("title") .text((d, i) => {return "Name: " + names[i] + "; Relevance score: " + relevance_inPercent[i].toFixed(2);}); svg.append("g") .selectAll("g") .data(attributes) .join("g") .attr("transform", d => `translate(0,${y(d)})`) .each(function(d) { d3.select(this).call(d3.axisBottom(x.get(d))); }) .call(g => g.append("text") .attr("x", margin.left) .attr("y", -6) .attr("text-anchor", "start") .attr("fill", "currentColor") .text(d => d)) .call(g => g.selectAll("text") .clone(true).lower() .attr("fill", "none") .attr("stroke-width", 5) .attr("stroke-linejoin", "round") .attr("stroke", "white")); return svg.node(); }4c:[{"id":"7c4725c7118fee643eacef8efdb9d086481a6d60dd75aa9ce1c7d0b6558bd072aa78cc5cb908e5ad0aa1c192a283f151b8d0b5638d741cff8198c15827df7eb3","href":"https://static.observableusercontent.com/files/7c4725c7118fee643eacef8efdb9d086481a6d60dd75aa9ce1c7d0b6558bd072aa78cc5cb908e5ad0aa1c192a283f151b8d0b5638d741cff8198c15827df7eb3","name":"new_InfoVis_Survey@1.csv","type":"text/csv","lastModified":1607113878704.726,"size":2327}] 29:{"id":"ea115c125a0bdbc8","slug":null,"title":"Project phase 3: Final","thumbnail":"6081d0ff1cd5865ec71657cda48637c954174bed33ea322f92507d76409385fd","access_level":"unlisted","create_time":"$D2020-12-04T20:31:18.704Z","update_time":"$D2020-12-04T23:01:30.906Z","view_time":null,"first_public_time":null,"has_unpublished_edits":null,"fork":true,"stars":0,"starred":false,"owner":{"type":"team","id":"55d88a594a6fb47b","login":"ychen710","name":"Yujie Chen","avatar_url":"https://avatars-next.observableusercontent.com/259c0af699a4c89018e117ac10ea9731ddf9be4da264ea12292e7d13da7ad083","tier":"starter_2024","bio":"","followed_by_you":false,"follows_you":false},"version":764,"publish_version":764,"role":null,"authored":false,"authors":[{"type":"individual","id":"8d66bdbfa49a82b4","login":"ychen710","name":"Yujie Chen","avatar_url":"https://avatars-next.observableusercontent.com/259c0af699a4c89018e117ac10ea9731ddf9be4da264ea12292e7d13da7ad083","tier":null,"bio":"","followed_by_you":false,"follows_you":false}],"members":[{"type":"individual","id":"8d66bdbfa49a82b4","login":"ychen710","name":"Yujie Chen","avatar_url":"https://avatars-next.observableusercontent.com/259c0af699a4c89018e117ac10ea9731ddf9be4da264ea12292e7d13da7ad083","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":1,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Project phase 3: Final","cells":[{"id":0,"value":"md`# Project phase 3: Final`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":599,"value":"md`## Description\nOur project mainly focuses on developing a visualization tool to aid users in making analysis of high-dimensional data. Our tool consists of two plots: **Color Coded Scatter Plot**, and **Parallel Coordinate Plot**. In the Color Coded Visualization, users would be able to have a comprehensive view of how each data point is related to another. In addition, The Parallel Coordinate Plot can be used for comparing many attributes together of an item, and the trends of many items on all the attributes.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"md`## Relevance\nThe relevance represents how relevant each item matches the users’ preference. After updating the position of data points, the graph uses different shades of color to show relevance. A data point is more relevant if it has a deeper shade. Otherwise, it will have a light shade.\n\nThe relevance of each data point is calculated by the sum of all its weighted attributes. For a better understanding to users, we rescaled all the relevance values so that they are in range of 0 to 100 `","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":660,"value":"md`## Design of the Two Plots\nThe number of attribute slider bars is based on the number of attributes. Each slider represents an attribute in the data set. Attribute sliders and relevant range sliders control both Color-Coded Scatter Plot and Non-Orthogonal Axis Plot. When the attribute slider bar updates, the weights of the attributes will change accordingly. The nodes in the Color-Coded Scatter Plot visualization will be repositioned, and the attribute bars with more weight will be ranked and placed toward the top of the Parallele Coordinates Plot visualization. When a node is highlighted in Color-Coded Scatter Plot visualization, the corresponding line will also be highlighted in Parallele Coordinates Plot visualization, and vice versa.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":693,"value":"md`## Sliders\nUsers can change the weights of certain attributes by moving the slider bars, thus recalculating the relevance of each data point. All the sliders have the same length range [0,1], the lean the slider bar is, the more important the attribute is. The relevance represents how relevant each item matches the users’ preference. After updating the position of the nodes, the graph uses different shades of color to show relevance. A darker shade means this node is more relevant and a lighter shade means the node is less relevant based on the slider values.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"legend({\n color: cScale,\n title: \"Relevance\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":619,"value":"md `The relvance slider bar allows users to filter data by selecting a relevance range, both of the Color Coded Scatter Plot and Parallele Coordinates Plot will be affected by doing it.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":616,"value":"viewof relevance = rangeSlider({\n min: 0,\n max: 1,\n // Note that values must be specified as array of length 2.\n value: this ? this.value : [0, 1],\n // Custom slider CSS, replaces all styles.\n theme: themes['Flat'],\n // Overrides the range color. Support for range colors is up to the theme.\n color: '#3b99fc',\n format: '.0%',\n description: '0%: less relevant; 100%: most relevant;',\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"md `Rescale the visualization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"viewof scale = {\n var form = html``;\n form.oninput = () => form.value = form.scale.valueAsNumber;\n form.value = 15;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":261,"value":"md `Select the relevance percentage range`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$49","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":483,"value":"md`# Color Coded Scatter Plot (Andromeda Visualization)`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"md `This visualization can display high dimensional data in a 2D plane. When the project runs, each data point will be placed on the plane as a node. This visualization helps users to visualize the similarity and dissimilarity between two different data points. The distance between each node presents their similarity. The closer the two nodes are, the more similar. The positions of these data points are placed at different locations each time the algorithm runs. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":719,"value":"md`### Design\n**Marks**\n* **Node:** Each node represents a data point in the data set\n* **Labels:** Labels represent the names of the data points\n\n**Channels**\n* **Color:** A darker shade means this node is more relevant and a lighter shade means the node is less relevant based on the slider values\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":722,"value":"md`### Interaction and Navigation\n* **MouseOver:** When the user mouses over a node, its relevance score will be shown.\n* **Selecting & Highlighting:** When users select a point, this point will be highlighted.\n* **Zooming:** The rescaling slider bar can zoom in and zoom out the entire visualization.\n* **Reducing Attributes:** Users are able to reduce attributes by adjusting the relevance range slider bar. The graph will only display the nodes within the relevance range.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$4a","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":488,"value":"md`# Parallel Coordinates Plot`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":704,"value":"md `The second visualization is a vertical Parallel Coordinates graph. The first bar is the “Relevance” and the following bars are the attributes ranked by their respective weights. The ones with more weight are placed at the top. Users can easily compare the relevance of each data set and quickly locate the attributes with more weight. The color of the lines matches the color in the first Color-Coded Scatter Plot visualization. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":727,"value":"md`## Design\n**Marks**\n* **Bars:** The top bar displays all the data points based on their “relevance” in ascending order. The following bars are the attributes ranked by their respective weights\n* **Segmented Line:** A simple connection of the position of an item between two attributes\n\n**Channels**\n* **Position on the bars:** If an item has a larger value on a specific attribute, then it will sit toward the right on the bar which represents that attribute\n* **Color:** The highlighted lines will turn to blue, while the unselected lines remain its original color (based on relevance value)\n\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":730,"value":"md`### Interaction and Navigation\n* **MouseOver:** When mousing over a line, it will display the name/label of the line and its relevance score \n* **Selecting & Highlighting:** Users are able to highlight an entire line by clicking a line segment. Users can also highlight multiple lines in the parallel coordinates graph to compare the values\n* **Reducing Attributes:** Users are able to reduce attributes by adjusting the relevance range slider bar. The graph will only display lines within the relevance range.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"$4b","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"md `## Parallel Coordinates Function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":648,"value":"md `1. Sort the attributes list by the value of its weight in a descending order\n2. Form the order of attributes on the Parallel Coordinate Plot from top to bottom\n3. Set up parallel's margins and height`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":514,"value":"sort_attributes = {\n var sortable = [];\n for (var a in w) {\n sortable.push([a, w[a]]);\n }\n sortable.sort(function(a, b) {\n return b[1] - a[1];\n });\n\n var temp = []\n\n for(var i = 0; i < sortable.length; i++){\n temp.push(sortable[i][0]);\n }\n\n return temp;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"attributes = [\"Relevance\"].concat(sort_attributes);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":595,"value":"Object.keys(parallel_data).length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":422,"value":"parallel_data = {\n var final_data = {}\n names.forEach((e, i) => {\n var relevance_data = {};\n relevance_data[\"Relevance\"] = parseFloat(relevance_inPercent[i].toFixed(2));\n for(var j = 1; j < attributes.length; j++){\n relevance_data[attributes[j]] = new_data[i][attributes[j]];\n }\n final_data[e] = relevance_data;\n });\n return final_data;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":415,"value":"x = new Map(Array.from(\n attributes, key => [key, d3.scaleLinear(d3.extent(Object.entries(parallel_data), d => d[1][key]), [margin.left, width - margin.right])]\n))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"y = d3.scalePoint(attributes, [margin.top, paralle_height - margin.bottom])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":409,"value":"line = d3.line()\n .defined(([, value]) => value != null)\n .x(([key, value]) => x.get(key)(value))\n .y(([key]) => y(key))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":407,"value":"margin = ({top: 20, right: 20, bottom: 20, left: 20})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"paralle_height = 100 * (attrs.length + 1)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md `## Data preprocessing for relevance data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":635,"value":"md`1. Get the weights of all the attributes from the above slider bars\n2. Rescale the weights so they could sum to be 1\n3. Normalize our data by applying Z-Score\n4. Apply the weights to the normalized data (multiply each weight value with its corresponding attribute column in the data)\n5. Calculate the relevance of each data point by the sum of all its weighted attributes. \n6. For a better understanding to users, we rescaled all the relevance values so that they are in range of 0% to 100% `\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":107,"value":"weight_list = {\n var lst = [];\n for(var i = 0; i < attrs.length;i++) {\n lst.push(w[attrs[i]]/attrs.length);\n }\n return lst;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":105,"value":"attrs = Object.keys(new_data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"names = data.map(r => r.Name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":101,"value":"new_data = data.map(r => {\n var obj = Object.assign({}, r);\n delete obj.Name;\n return obj;\n});","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":99,"value":"normalized_data = {\n var stdMean = []\n for(var i = 0; i < attrs.length; i++){\n var obj = {};\n var arr = new_data.map(r=>r[attrs[i]]);\n obj['std_dev'] = d3.deviation(arr);\n obj['mean'] = d3.deviation(arr);\n stdMean.push(obj);\n }\n \n return new_data.map(r => {\n var norm = Object.assign({}, r);\n for(var i = 0; i < attrs.length; i++) {\n norm[attrs[i]] = (norm[attrs[i]] - stdMean[i][\"mean\"]) / stdMean[i][\"std_dev\"];\n }\n return norm;\n })\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":94,"value":"applied_weight_data = {\n return normalized_data.map(r => {\n for (var i = 0; i < attrs.length; i++){\n r[attrs[i]] *= weight_list[i];\n }\n return r;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"relv_value = {\n var relv_list = []\n applied_weight_data.map(r => {\n var maxx = 0;\n for (var i =0; i < attrs.length; i++) {\n maxx += r[attrs[i]]\n }\n relv_list.push(maxx);\n })\n return relv_list;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":291,"value":"relevance_inPercent = {\n var rele_percentage = [];\n var minValue = Math.min(...relv_value);\n var maxValue = Math.max(...relv_value);\n for (var i =0; i < relv_value.length; i++) {\n rele_percentage.push(((relv_value[i] - minValue) / (maxValue - minValue)) * 100);\n }\n return rele_percentage;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":69,"value":"md `## Andromeda function`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":"cScale = d3.scaleSqrt([0, 50, 100], [\"yellow\", \"red\", \"darkred\"])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"{\n data.weights = w;\n graph.edges.forEach( (e, i) => {\n e.mydistance = Distance(e.source.row, e.target.row)} );\n simulation.force(\"link\")\n .distance(e => e.mydistance * scale * 0.8);\n simulation.alpha(1).restart();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"simulation = d3.forceSimulation(graph.vertices)\n .force(\"link\", d3.forceLink(graph.edges)\n .distance(e => e.mydistance * 20)\n \t\t.strength(e => 10.0 / e.distance) \n \t\t.strength(0.5) \n )\n //.force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(width / 2, height / 2));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"value":"data = {\n var data = d3.csvParse(await FileAttachment(\"new_InfoVis_Survey@1.csv\").text(), d3.autoType);\n data.attrs = data.columns.slice(1); // the quantitative attributes in the data table\n data.label = data.columns[0]; // the column to use for the dot labels\n data.stdevs = {}; // zscore normalization factors for each attribute, for Distance()\n data.attrs.forEach(a => data.stdevs[a] = d3.deviation(data, r => r[a])); \n data.weights = {}; \n data.attrs.forEach(a => data.weights[a] = 1.0); \n return data;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"// Distance metric, computes normalized high-dimensional distance between 2 rows in the data table.\n// r1, r2 = references to data table rows.\nfunction Distance(r1, r2) {\n\treturn d3.sum(data.attrs.map(attr =>\n\t\t\tMath.abs(r1[attr] - r2[attr]) / data.stdevs[attr] * data.weights[attr] )); // weighted L1\n //return d3.sum(data.attrs.map(attr =>\n\t//\t\tMath.abs(r1[attr] - r2[attr]) / data.stdevs[attr] )); // L1\n //return Math.sqrt(d3.sum(data.attrs.map(attr =>\n\t//\t\tMath.pow((r1[attr] - r2[attr])/data.stdevs[attr], 2)))); // L2\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"graph = {\n var vertices = data.map( (r,i) => ({'id':r[data.label], 'index':i, 'row':r}) );\n var edges = []; // completely connected graph\n vertices.forEach( (src, isrc) => \n vertices.forEach( (dst, idst) => {\n if(isrc < idst) \n edges.push( {'source':src, 'target':dst, 'mydistance':Distance(src.row, dst.row)} ); } ) );\n return {'vertices':vertices, 'edges':edges};\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"drag = simulation => {\n function dragstarted(event) {\n if (!event.active) simulation.alphaTarget(0.3).restart();\n event.subject.fx = event.subject.x;\n event.subject.fy = event.subject.y;\n }\n function dragged(event) {\n event.subject.fx = event.x;\n event.subject.fy = event.y;\n }\n function dragended(event) {\n if (!event.active) simulation.alphaTarget(0);\n event.subject.fx = null;\n event.subject.fy = null;\n }\n return d3.drag()\n .on(\"start\", dragstarted)\n .on(\"drag\", dragged)\n .on(\"end\", dragended);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"height = 700","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`## Import`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":265,"value":"import {rangeSlider, themes} from '@mootari/range-slider'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"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":48,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md` \n## Reference\n1. https://observablehq.com/d/72afa1ae13806e66\n2. https://observablehq.com/@d3/parallel-coordinates\n3. https://observablehq.com/@mootari/range-slider\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W4c","stdlib":"1"}} 24:null