2b:null 2c:["$","title",null,{"children":"Andromeda_JS 2.0 | VT CS 5764 Information Visualization | Observable"}] 31:T813,viewof w = { var 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: //console.log("weights>>>", weights) //mutable weights = Object.fromEntries(data.attrs.map(a => [a, 1.0])); //form.value = weights; form.value = newsliderweights; // if (weights.length === 0) { // mutable weights = Object.fromEntries(data.attrs.map(a => [a, 1.0])); // } // else{ // mutable weights = labeled_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; }) ); function update(ws) { //used newsliderweights instead data.attrs.forEach((attr) => (form[attr].value = sliderOfWeight(ws[attr]))); form.value = ws; form.dispatchEvent(new Event("input")); } //mutable f = update; form.myupdate = update; return form; }32:T132f,scatter_chart = { const svg = d3 .create("svg") .attr("width", height) .attr("height", height) .style("border", "1px solid lightgrey"); 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 ""; } }) */ .style("fill", (d, i) => cScale(relevance_inPercent[i])); /* .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]) ); const index = select.indexOf(labels._groups[0][Number(selectedID)]); if (index > -1) { // only splice array when item is found select.splice(index, 1); // 2nd parameter means remove one item only } //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"); select.push(labels._groups[0][Number(selectedID)]); } mutable selected_nodes = select; }); */ //.call(drag(simulation)); var select = []; //mutable selected_nodes = []; nodes.append("title").text((d, i) => d.id); //.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); });*/ function updateChart() { // make updates here... nodes.attr("cx", (v) => v.x).attr("cy", (v) => v.y); labels.attr("x", (v) => v.x).attr("y", (v) => v.y); } svg.node().updateChart = updateChart; simulation.on("tick", updateChart); updateChart(); // Set the fx,fy values of the dragged node to fix it to the mouse position. // Simulation will not move nodes with fx,fy set, and will fix x=fx, y=fy. function setupDrag(svg, nodes, labels, simulation) { // D3 Drag API const drag = d3 .drag() .on("start", dragstart) .on("drag", dragging) .on("end", dragend); nodes.call(drag); labels.call(drag); // Drag event callback functions function dragstart(event) { //if (!event.active) // only needed in multi-touch scenarios //simulation.alphaTarget(0.3).restart(); // restart the sim and run indefinitely //event.subject.fx = event.subject.x; //event.subject.fy = event.subject.y; var selectedID = d3.select(this).attr("id").split("_")[1]; const c = d3.select("#circle_" + selectedID); //if (d3.select(this).style("fill") != "blue") { if (c.style("fill") != "green") { c.style("fill", "green"); select.push(labels._groups[0][Number(selectedID)]); mutable selected_nodes = select; } //d3.select(this).attr("cx", event.x).attr("cy", event.y); } function dragging(event) { //event.subject.fx = scale_to_pix.invert(event.x); //event.subject.fy = scale_to_pix.invert(event.y); event.subject.x = event.x; event.subject.y = event.y; updateChart(); //d3.select(this).attr("cx", event.x).attr("cy", event.y); } function dragend(event) { //if (!event.active) // only needed in multi-touch scenarios //simulation.alphaTarget(0); // return to normal sim stopping condition //event.subject.fx = null; // release the fix //event.subject.fy = null; mutable selected_nodes = select; } } setupDrag(svg, nodes, labels, simulation); invalidation.then(() => simulation.stop()); return svg.node(); }33:Tf63,// Copyright 2021 Observable, Inc. // Released under the ISC license. // https://observablehq.com/@d3/horizontal-bar-chart function BarChart(data, { x = d => d, // given d in data, returns the (quantitative) x-value y = (d, i) => i, // given d in data, returns the (ordinal) y-value title, // given d in data, returns the title text marginTop = 30, // the top margin, in pixels marginRight = 0, // the right margin, in pixels marginBottom = 10, // the bottom margin, in pixels marginLeft = 80, // the left margin, in pixels width = 640, // the outer width of the chart, in pixels height, // outer height, in pixels xType = d3.scaleLinear, // type of x-scale xDomain, // [xmin, xmax] xRange = [marginLeft, width - marginRight], // [left, right] xFormat, // a format specifier string for the x-axis xLabel, // a label for the x-axis yPadding = 0.1, // amount of y-range to reserve to separate bars yDomain, // an array of (ordinal) y-values yRange, // [top, bottom] color = "currentColor", // bar fill color titleColor = "white", // title fill color when atop bar titleAltColor = "currentColor", // title fill color when atop background } = {}) { // Compute values. const X = d3.map(data, x); const Y = d3.map(data, y); // Compute default domains, and unique the y-domain. if (xDomain === undefined) xDomain = [0, d3.max(X)]; if (yDomain === undefined) yDomain = Y; yDomain = new d3.InternSet(yDomain); // Omit any data not present in the y-domain. const I = d3.range(X.length).filter(i => yDomain.has(Y[i])); // Compute the default height. if (height === undefined) height = Math.ceil((yDomain.size + yPadding) * 25) + marginTop + marginBottom; if (yRange === undefined) yRange = [marginTop, height - marginBottom]; // Construct scales and axes. const xScale = xType(xDomain, xRange); const yScale = d3.scaleBand(yDomain, yRange).padding(yPadding); const xAxis = d3.axisTop(xScale).ticks(width / 80, xFormat); const yAxis = d3.axisLeft(yScale).tickSizeOuter(0); // Compute titles. if (title === undefined) { const formatValue = xScale.tickFormat(100, xFormat); title = i => `${formatValue(X[i])}`; } else { const O = d3.map(data, d => d); const T = title; title = i => T(O[i], i, data); } const svg = d3.create("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .attr("style", "max-width: 100%; height: auto; height: intrinsic;"); svg.append("g") .attr("transform", `translate(0,${marginTop})`) .call(xAxis) .call(g => g.select(".domain").remove()) .call(g => g.selectAll(".tick line").clone() .attr("y2", height - marginTop - marginBottom) .attr("stroke-opacity", 0.1)) .call(g => g.append("text") .attr("x", width - marginRight) .attr("y", -22) .attr("fill", "currentColor") .attr("text-anchor", "end") .text(xLabel)); svg.append("g") .attr("fill", color) .selectAll("rect") .data(I) .join("rect") .attr("x", xScale(0)) .attr("y", i => yScale(Y[i])) .attr("width", i => xScale(X[i]) - xScale(0)) .attr("height", yScale.bandwidth()); svg.append("g") .attr("fill", titleColor) .attr("text-anchor", "end") .attr("font-family", "sans-serif") .attr("font-size", 10) .selectAll("text") .data(I) .join("text") .attr("x", i => xScale(X[i])) .attr("y", i => yScale(Y[i]) + yScale.bandwidth() / 2) .attr("dy", "0.35em") .attr("dx", -4) .text(title) .call(text => text.filter(i => xScale(X[i]) - xScale(0) < 20) // short bars .attr("dx", +4) .attr("fill", titleAltColor) .attr("text-anchor", "start")); svg.append("g") .attr("transform", `translate(${marginLeft},0)`) .call(yAxis); return svg.node(); }34:T776,function inversMDS(dataHDpart, data2Dnew){ //console.log(">>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>>") let MAX = 500; let col = dataHDpart[0].length; let row = dataHDpart.length; let curWeights = Array(col).fill(1.0/col); /// set to existing weights??? let newWeights = Array(col).fill(1.0/col); let flag = Array(col).fill(0); let direction = Array(col).fill(1); let step = Array(col).fill(1.0/col); let dataHDw = apply_weights(dataHDpart, curWeights); let distHD = pairwise_distance(dataHDw, "manhattan"); let curStress = stress(distHD, dist2D); //console.log("cur_stress: " + curStress) for(let i = 0; i < MAX; ++i){ for (let dim = 0; dim < col; dim++) { let nw = new_proposal(curWeights[dim], step[dim], direction[dim]); //console.log(nw) let s = 1.0 + nw - curWeights[dim] for (let index = 0; index < curWeights.length; index++) { //let temp = curWeights[index]/s; newWeights[index] = curWeights[index]/s; } newWeights[dim] = nw/s; dataHDw = apply_weights(dataHDpart, newWeights); distHD = pairwise_distance(dataHDw, "manhattan"); let newStress = stress(distHD, dist2D); //console.log('newstress: '+ newStress + " curstress: "+curStress) if (newStress < curStress){ let temp = curWeights; curWeights = newWeights; newWeights = temp; curStress = newStress; flag[dim] = flag[dim] + 1; } else { flag[dim] = flag[dim] - 1; direction[dim] = -direction[dim]; } if (flag[dim] >= 5){ step[dim] = step[dim] * 2; flag[dim] = 0; } else if (flag[dim] <= -5) { step[dim] = step[dim] / 2.0; flag[dim] = 0; } } } //console.log("final stress: " + curStress) return curWeights; }35:[{"id":"25cac6c2c9125ead85e9872454a9b6d289546ac35d1f266853228efe9e2449b62df8fae31cc079fb5f49fc33091f21ea5edaf02619ea59b2ac0d59f6234ae497","href":"https://static.observableusercontent.com/files/25cac6c2c9125ead85e9872454a9b6d289546ac35d1f266853228efe9e2449b62df8fae31cc079fb5f49fc33091f21ea5edaf02619ea59b2ac0d59f6234ae497","name":"Animal_Data_Andromeda2.csv","type":"text/csv","lastModified":1711390207222.505,"size":9434}] 2f:{"id":"bf96e1ad12e45bf3","slug":"andromeda2","title":"Andromeda_JS 2.0","thumbnail":"30c8af8ca54ff1fcc611c33c12af99f014e1ebb7898b6e5674612c53615e9275","access_level":"public","create_time":"$D2023-09-29T18:23:00.582Z","update_time":"$D2024-05-07T03:52:54.654Z","view_time":null,"first_public_time":"$D2024-03-26T20:26:44.064Z","fork":{"id":"608c4d9f5ec94516","slug":"andromeda_js","title":"O-Andromeda","owner":{"id":"8a3d31b303288012","login":"hanliuxxx","name":"Han Liu"}},"stars":1,"starred":false,"owner":{"type":"team","id":"5065752cf7aaacd9","login":"vt-cs-5764-information-visualization","name":"VT CS 5764 Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/adae40229a9021a654789a6635c0c04da4d66f171adce855dc1b33654b7d678b","tier":"pro_2024"},"version":2392,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"2bd52d2c49b80248","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":null}],"members":[{"type":"individual","id":"2bd52d2c49b80248","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":null,"role":"editor"},{"type":"team","id":"5065752cf7aaacd9","login":"vt-cs-5764-information-visualization","name":"VT CS 5764 Information Visualization","avatar_url":"https://avatars-next.observableusercontent.com/adae40229a9021a654789a6635c0c04da4d66f171adce855dc1b33654b7d678b","tier":"pro_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"title":"Andromeda_JS 2.0","cells":[{"id":0,"value":"# Andromeda_JS 2.0\nBased on Han Liu's Observable notebook from his MS Thesis (https://github.com/infovis-vt/Andromeda_JEJ, https://observablehq.com/@hanliuxxx/andromeda_js), modified by Chris North for use in CS5764.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":2172,"value":"#### Attribute weightings\nDrag sliders to change attribute weights in the distance function.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":941,"value":"$31","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2094,"value":"w","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":765,"value":"#### Re-scale the plot","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1933,"value":"viewof scale = {\n var form = html``;\n form.oninput = () => (form.value = form.scale.valueAsNumber);\n form.value = 1.0;\n return form;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2293,"value":"#### MDS Plot \nDrag points to change relative distances and learn new attribute weights. Dragged points turn green.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1712,"value":"viewof reset_button = Inputs.button(\"Reset Plot\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":58,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":809,"value":"legend({\n color: cScale,\n title: \"Relevance = animals that have larger values of higher weighted attributes\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2381,"value":"#### Selected data points","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1571,"value":"selected_data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2202,"value":"#### Weights learned from dragging points (green points only)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1628,"value":"viewof copy2sliders = Inputs.button([\n [\"Copy learned weights to Sliders\", value =>value += 1]\n], {value: 0})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1445,"value":"inversed_chart = BarChart(labeled_weights, {\n x: d => d.Weight,\n y: d => d.Name,\n yDomain: d3.groupSort(labeled_weights, ([d]) => -d.Weight, d => d.Name), // sort by descending frequency\n xFormat: \"%\",\n xLabel: \"Frequency →\",\n width,\n color: \"steelblue\"\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2205,"value":"### Deprecated:","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","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","output":"$undefined","database":"$undefined"},{"id":1893,"value":"copy2sliders","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1630,"value":"labeled_weights","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1556,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1905,"value":"weights","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1909,"value":"selected_nodes","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1911,"value":"updated_weights","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1924,"value":"mutable counter = 0","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2158,"value":"mutable newsliderweights = Object.fromEntries(data.attrs.map(a => [a, 1.0]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1829,"value":"copy_to_sliders = {\n copy2sliders;\n var result = {};\n result = {};\n //console.log(\"result1>>\", result);\n\n //console.log(selected_nodes.length, copy2sliders)\n if (selected_nodes.length >= 2 && copy2sliders !== counter) {\n for (let i = 0; i < attrs.length; i++) {\n result[attrs[i]] = updated_weights[i];\n }\n //console.log(\"result2>>\", result);\n\n mutable counter = copy2sliders;\n mutable weights = result;\n mutable newsliderweights = result;\n\n //viewof w.myupdate(Object.fromEntries(data.attrs.map((a) => [a, 1.0])))\n //viewof w.myupdate(result);\n //f(result);\n\n //console.log(\"result3>>\", result);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":77,"value":"md `## Data Preprocessing for Relevance Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1720,"value":"mutable weights = Object.fromEntries(data.attrs.map(a => [a, 1.0]));","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":105,"value":"attrs = Object.keys(new_data[0])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":103,"value":"names = data.map(r => r.Name)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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.mean(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","output":"$undefined","database":"$undefined"},{"id":94,"value":"applied_weight_data = {\n return normalized_data.map(r => {\n var out = {};\n for (var i = 0; i < attrs.length; i++){\n out[attrs[i]] = r[attrs[i]] * weight_list[i];\n }\n return out;\n });\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":92,"value":"relv_value = {\n var relv_list = []\n applied_weight_data.forEach(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","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","output":"$undefined","database":"$undefined"},{"id":69,"value":"md `## Color-Coded Scatter Plot Initialization`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":366,"value":"cScale = d3.scaleSqrt([0, 50, 100], [\"darkred\", \"red\", \"yellow\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2075,"value":"distanceScale = height / graph.edges.meanDist / 2.2","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2270,"value":"## Data","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":16,"value":"data = {\n reset_button;\n var data = d3.csvParse(\n await FileAttachment(\"Animal_Data_Andromeda2.csv\").text(),\n d3.autoType\n );\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","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 return d3.sum(\n data.attrs.map((attr) => Math.abs(r1[attr] - r2[attr]) * data.weights[attr])\n ); // weighted L1\n //Math.abs(r1[attr] - r2[attr]) / data.stdevs[attr] * data.weights[attr] )); // weighted L1 normalized\n //return d3.sum(data.attrs.map(attr =>\n //\t\tMath.abs(r1[attr] - r2[attr]) / data.stdevs[attr] )); // L1\n //return Math.sqrt(d3.sum(data.attrs.map(attr =>\n //\t\tMath.pow((r1[attr] - r2[attr])/data.stdevs[attr], 2)))); // L2\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":26,"value":"graph = {\n reset_button;\n //copy2sliders;\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({\n source: src,\n target: dst,\n mydistance: Distance(src.row, dst.row)\n });\n })\n );\n edges.meanDist = d3.mean(edges, (e) => e.mydistance);\n return { vertices: vertices, edges: edges };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1995,"value":"d3.mean(graph.edges, (e) => e.mydistance)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2282,"value":"## MDS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":46,"value":"{ // update the MDS based on slider changes\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 * distanceScale);\n simulation.alpha(1).restart();\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":28,"value":"// MDS force simulator\nsimulation = d3\n .forceSimulation(graph.vertices)\n .force(\n \"link\",\n d3\n .forceLink(graph.edges)\n .distance((e) => e.mydistance * distanceScale)\n //.strength(e => 10.0 / e.distance)\n .strength(0.2)\n )\n //.force(\"charge\", d3.forceManyBody())\n .force(\"center\", d3.forceCenter(height / 2.0, height / 2.0))","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"// interactive dragging points\ndrag = 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","output":"$undefined","database":"$undefined"},{"id":323,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1526,"value":"width","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1533,"value":"scale_x = d3.scaleLinear()\n .domain([0, width]) // unit: km\n .range([-30, 30]) // unit: pixels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1537,"value":"scale_y = d3.scaleLinear()\n .domain([0, height]) // unit: km\n .range([30, -30]) // unit: pixels","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1992,"value":"scale_to_pix = {\n //const m = d3.mean(graph.edges, (e) => e.mydistance);\n return d3\n .scaleLinear()\n .domain([-graph.edges.meanDist, graph.edges.meanDist])\n .range([0, height]);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2009,"value":"{\n scale_to_pix.domain([\n -graph.edges.meanDist / scale,\n graph.edges.meanDist / scale\n ]);\n //scatter_chart.update();\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2033,"value":"scale_to_pix.domain()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":2037,"value":"scale_to_pix.invert(431)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":991,"value":"## Inverse MDS","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":1155,"value":"md `#### Retrieve Selected Data`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1004,"value":"mutable selected_nodes = {\n reset_button;\n return []\n}\n// add keyword to selected_nodes so that it can be automatically refreshed","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1030,"value":"selected_data = {\n let result = [];\n \n for (let i=0; i < selected_nodes.length; ++i) {\n let svg = selected_nodes[i][\"__data__\"]\n let index = svg[\"index\"];\n //result.push(index)\n result.push(data[index]);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1563,"value":"selected_labels = {\n let result = [];\n \n for (let i=0; i < selected_data.length; ++i) {\n let x = selected_data[i]['Name'];\n result.push(x);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1108,"value":"selected_cords = {\n let result = [];\n \n for (let i=0; i < selected_nodes.length; ++i) {\n let x = Object.values(selected_nodes[i])[0]['x'];\n x = scale_x(x)\n let y = Object.values(selected_nodes[i])[0]['y'];\n y = scale_y(y)\n result.push([x, y]);\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1295,"value":"md `#### Distance Functions`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1177,"value":"function euclidean_distance(a, b) {\n if (a != null && b != null) {\n if (a.length == b.length) {\n let result = 0\n for (let i = 0; i < a.length; i++) {\n let diff = a[i] - b[i]\n let square = diff**2\n result += square\n }\n return Math.sqrt(result)\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1279,"value":"//manhattan_distance([2,2], [1,8])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1275,"value":"function manhattan_distance (a, b) {\n if (a != null && b != null) {\n if (a.length == b.length ) {\n let result = 0\n for (let i = 0; i < a.length; i++) {\n let diff = a[i] - b[i]\n let absolute = Math.abs(diff)\n result += absolute\n }\n return result\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1207,"value":"//euclidean_distance([1,2], [2,5])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1198,"value":"//testing_data = [[24.9, 8],[25.1, 6],[24.8, 3.39]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1200,"value":"//pairwise_distance(testing_data)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1157,"value":"function pairwise_distance(dataset, distance_function) {\n if (selected_cords.length >= 2) {\n let row_index = selected_cords.length\n let col_index = selected_cords[0].length\n let result = []\n for (let i = 0; i < row_index; ++i){\n let row = []\n for (let j = 0; j < row_index; ++j) {\n let distance = 0\n if (distance_function == \"euclidean\"){\n distance = euclidean_distance(dataset[i], dataset[j])\n }\n else if (distance_function == \"manhattan\"){\n distance = manhattan_distance(dataset[i], dataset[j])\n }\n row.push(distance)\n \n }\n result.push(row)\n }\n return result\n }\n else {\n return []\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1014,"value":"md`#### Data Preparation`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1298,"value":"dataHDpart = {\n let result = []\n for (let i = 0; i < selected_data.length; i++) {\n let row = Object.values(selected_data[i]).slice(1)\n result.push(row)\n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1301,"value":"data2Dnew = {\n return selected_cords\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1220,"value":"md `### Proposal`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":993,"value":"//1. proposal function\nfunction new_proposal(current, step, direction) {\n //console.log(current, step, direction)\n let move = current + direction*step*Math.random()\n if(move > 0.9999){\n move = 0.9999\n }\n else if (move < 0.00001){\n move = 0.00001\n }\n return move\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1222,"value":"md `### Stress`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1025,"value":"//2. stress function\nfunction stress(distHD, dist2D) {\n let diff_sum = 0\n let total_sum = 0\n for (let i = 0; i < distHD.length; i++){\n for (let j = 0; j < distHD[0].length; j++){\n let x = distHD[i][j]\n let y = dist2D[i][j]\n diff_sum += (x-y)**2\n total_sum += x**2\n }\n }\n return diff_sum/total_sum\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1229,"value":"//x = [[0, 25, 31.88], [25, 0, 16.28], [31.88, 16.28, 0]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1230,"value":"//y = [[0,2.3,5], [2.31,0,2.76], [5.04, 2.76, 0]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1150,"value":"//stress(x, y)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1246,"value":"md `### Inverse MDS algorithm`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1321,"value":"dist2D = pairwise_distance(data2Dnew, \"euclidean\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1345,"value":"//testing_data = [[1,2], [3,4]]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1349,"value":"//testing_weights = [1, 0.5]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1336,"value":"function apply_weights(data, weights){\n let result = []\n for (let i = 0; i < data.length; i++) {\n let row = []\n for (let j = 0; j < weights.length; j++) {\n row.push(data[i][j]*weights[j])\n }\n result.push(row)\n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1027,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1433,"value":"updated_weights = {\n var result = [];\n\n if (selected_cords.length >= 2) {\n result = inversMDS(dataHDpart, data2Dnew);\n }\n var sum = result.reduce((a, b) => a + b, 0);\n for (var i = 0; i < result.length; i++) {\n result[i] = (result[i] * attrs.length) / sum;\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1972,"value":"attrs.length","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":1477,"value":"labeled_weights = {\n var result = []\n \n for (let i = 0; i < attrs.length; i++) {\n result[i] = {\"Name\": attrs[i], \"Weight\": updated_weights[i]}\n }\n return result\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"md`## Imports`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":6,"value":"import {legend} from '@d3/color-legend'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","output":"$undefined","database":"$undefined"},{"id":5,"value":"d3 = require(\"d3@6\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":48,"value":"html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":36,"value":"md` \n## References\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","output":"$undefined","database":"$undefined"},{"id":1488,"value":"FileAttachment(\"Animal_Data_Andromeda2.csv\").csv()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"