44:["$","title",null,{"children":"Project phase 3: Final | Yujie Chen | Observable"}] 4c: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; }4d: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(); }4e: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(); }4f:T44c,md ` ### Validation: Task Abstractions 1. **How similar are the two data points in the dataset?** * In our design, we created a 2D projection of high-dimensonal data on the Color-Coded Scatter Plot, which shows the similarity and relativeness of all the data points. 2. **What is the most relevant data point based on the weighted attributes value?** * We sum all the attributes of each data point after multiplying with its corresponding weight. Then all the data points have a new attribute called "Relevance". We sort the data by relevance and get the most relevant data point. 3. **What is the distribution of each data point in each attribute?** * We created a Parallel Coordinates Plot to show the distribution of all the data points on all the attributes. 4. **What is the distribution of the most and the least relevant data in the Color Coded Scatter Plot?** * We used different color shades to represent how each data point relevant to user's preference. The most relevant data point will have a dark red shade, while the least relevant data point will have a light yellow shade.`50:[{"id":"7c4725c7118fee643eacef8efdb9d086481a6d60dd75aa9ce1c7d0b6558bd072aa78cc5cb908e5ad0aa1c192a283f151b8d0b5638d741cff8198c15827df7eb3","href":"https://static.observableusercontent.com/files/7c4725c7118fee643eacef8efdb9d086481a6d60dd75aa9ce1c7d0b6558bd072aa78cc5cb908e5ad0aa1c192a283f151b8d0b5638d741cff8198c15827df7eb3","name":"new_InfoVis_Survey@1.csv","type":"text/csv","lastModified":1620262813878.099,"size":2327}] 48:{"id":"08d262c8b0227835","slug":"project-phase-3-final","title":"Project phase 3: Final","thumbnail":"a9bdb24115f4c9c16342426156ea75416931076d57c331aaedf3840bb3590e28","access_level":"public","create_time":"$D2021-05-06T01:00:13.878Z","update_time":"$D2021-05-06T01:04:29.748Z","view_time":null,"first_public_time":"$D2021-05-06T01:30:20.025Z","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":943,"publish_version":943,"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":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Project phase 3: Final","cells":[{"id":0,"value":"md`# Project phase 3: Final\n\n**Group Members:** Yujie Chen, Liling Yuan, Han Liu`","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 Coordinates Plot**. In the Color-Coded Visualization, users will have a comprehensive view of how each data point is related to another. In addition, the Parallel Coordinates Plot can be used for comparing many attributes together of a single data point, and the overall trends of all the data points 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":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 dataset. Attribute sliders and relevance range sliders control both Color-Coded Scatter Plot and Parallel Coordinates Plot. When the attribute slider bar updates, the weight of the attributes will change accordingly. The data points 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 data point is highlighted in Color-Coded Scatter Plot visualization, the corresponding line will also be highlighted in Parallel 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], if the slider is moved toward the rightmost position, it means the corresponding attribute has the highest weight. \n\nAfter updating the position of the nodes, the graph uses different shades of color to show relevance.`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":834,"value":"md`## Relevance\nThe relevance represents how relevant each item matches the user's preference. After updating the position of data points, the Color-Coded Scatter Plot 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":619,"value":"md `### Relvance slider bar \nIt allows users to filter data by selecting a relevance range, both of the Color-Coded Scatter Plot and Parallel 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":815,"value":"md `### Relvance Legend \n A darker red shade means this node is more relevant and a lighter yellow 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":809,"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":261,"value":"md `### Attribute Slider Bar \nAllows users to apply weights to each attribute by dragging the slider bar to the left or right`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"$4c","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 red shade means this node is more relevant and a lighter yellow 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":777,"value":"md`## Implementation\n* **Data Source:** Import the forced directed graph made in the **Color-Coded Scatter Plot Initialization** Section. \n* **Add Color:** Apply different shades to all the data points based on its relevance value.\n* **Add Lable:** Add lable to each data point.\n* **Interactive Functionality:** Implement Higelighting and Mouseover functionality.\n* **Zooming:** Allow users to zooming in or out by rescaling the plot with the value passed from the Scale Slider bar above.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"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":769,"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":58,"value":"$4d","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":776,"value":"md`## Implementation\n* **Data Source:** import parallel_data as the input.\n* **Parallel coordinates initializatin:** Initialize each parallel coordinate, Setting up Titles and value ranges.\n* **Draw Paths: ** Append paths for each item in the dataset through all the parallel coordinates.\n* **Interaction Functionality:** the onclick and mouseover function is implemnted with d3 default SVG method. \n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":419,"value":"$4e","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 Initialization`","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":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 `## Color-Coded Scatter Plot Initialization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":787,"value":"md`1. Build Color Scale for the dots\n2. Create the simulation for the forced-directed graph\n3. Initialize data to be a suitable format\n4. Build the forced-directed graph based on L1 distance\n4. Enable the drag functionality`","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":false,"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":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":823,"value":"md `# Appendix`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":906,"value":"$4f","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":827,"value":"md `### Developer Contribution\n\n### Phase 1\nWe worked together to explore potential topics and plots that we would like implement. \n\n### Phase 2\n* **Yujie Chen:** Engaged in brainstorming, mainly focus on writing the Alternative design section\n* **Liling Yuan:** Engaged in brainstorming, mainly focus on writing the Validation section\n* **Han Liu:** Engaged in brainstorming, mainly focus on writing the Design section\n\n### Phase 3\n* **Yujie Chen:** Implemented the Sliders and Color-Coded Plots and the Parallel Coordinates Plots, writing descriptions (description of the design and interactions)\n* **Liling Yuan:** Implemented the interaction of Color-Coded and Parallel Coordinates plots\n* **Han Liu:** Data preprocessing for both plots, writing descriptions (overall project, data preprocessing, plots initialization, and the implementation of two plots)`","pinned":false,"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":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W50","stdlib":"1"}} 24:null