2b:null 2c:["$","title",null,{"children":"Interactive MDS Simulator | Chris North | Observable"}] 31:T55f,1. Select the no. of animals, either randomly or select manually. 2. Drag and place animals in a way that similar animals are placed closer and dissimilar animals are placed farther. Make sure that this applies for each animal. 3. Click **Create Lines Between Animals** button to create lines. 4. Right click on lines shows you bar graph for actual and desired distance. 5. Clicking on lines lets you see a **STAR PLOT** comparison between animals. 6. To select multiple lines, hold the Ctrl key while clicking each line you wish to select. 7. You can click on animal squares to see the Star plot of animal attributes. 8. Dragging the points after line creation lets you see a **Stress meter** at the top. 9. Aim to reduce the stress value toward 0 for a better fit. Even reducing the stress from 1.5 to 1.0 indicates an improvement in how well your arrangement reflects the original relative distances. 10. Once you feel that you've placed animals correctly, click evaluate button. 11. Green lines represent correctly placed whereas Red lines represent incorrectly placed. 12. If not fully correct, you can drag animals and see how your placement affects the correctness with changing colors. 13. **Blue means too close, red means far**. 14. The line with most thickness contributes the most to stress. 15. You will see your scores at the top as well. 17. **ALL THE BEST** 32:T6f9c,chart = { // Create a container for the SVG and the buttons const container = d3.create("div"); // Dimensions of the SVG canvas const width = 800; const height = 600; // Variables for scoring let maxScore = 10; let currentScore = maxScore; // Prepare data for lines let lineData = []; // Compute scaling factor for desired distances const desiredDistances = []; distanceMatrix.forEach(row => { Object.entries(row).forEach(([key, value]) => { if (key !== "Name" && value !== "") { desiredDistances.push(parseFloat(value)); } }); }); const deltaMin = d3.min(desiredDistances); const deltaMax = d3.max(desiredDistances); // Print deltaMin and deltaMax to the console console.log("deltaMin:", deltaMin); console.log("deltaMax:", deltaMax); // Define the maximum visual distance (e.g., half of the canvas diagonal) const maxVisualDistance = Math.hypot(width, height) / 2; // Scaling function to map desired distances to visual distances const distanceScale = d3.scaleLinear() .domain([deltaMin, deltaMax]) .range([30, maxVisualDistance - 50]); // Adjust the range as needed // Div for the score display and append it to the container const scoreDisplay = container.append("div") .attr("class", "score-display") .style("margin-bottom", "10px") .style("font-size", "16px") .style("font-weight", "bold"); // Div for the stress display and append it to the container const stressDisplay = container.append("div") .attr("class", "stress-display") .style("margin-bottom", "10px") .style("font-size", "16px") .style("font-weight", "bold") .style("color", "blue"); // Create a progress bar for stress reduction const progressContainer = container.append("div") .attr("class", "progress-container") .style("width", "100%") .style("background-color", "#e0e0e0") .style("border-radius", "5px") .style("margin-bottom", "10px"); const progressBar = progressContainer.append("div") .attr("class", "progress-bar") .style("width", "0%") .style("height", "20px") .style("background-color", "green") .style("border-radius", "5px"); // **Add Distance Scaling Legend** const distanceScalingLegend = container.append("div") .attr("class", "distance-scaling-legend") .style("margin-bottom", "10px") .style("font-size", "14px"); // Append the bold title distanceScalingLegend.append("div") .style("font-weight", "bold") .text("Distance Scaling Legend:"); // Append the mapping text distanceScalingLegend.append("div") .style("font-weight", "normal") .text("Data Distance (0.00 - 48.49) → Visual Distance (30 - 450 pixels)"); // Create the SVG canvas for the chart const svg = container.append("svg") .attr("width", width) .attr("height", height) .attr("viewBox", [0, 0, width, height]) .style("border", "1px solid black"); // Define the drag behavior const dragBehavior = d3.drag() .on("start", dragstarted) .on("drag", dragged) .on("end", dragended); // Variable to keep track of evaluation state let evaluationDone = false; // Flag to track dragging state let isDragging = false; function dragstarted(event, d) { isDragging = true; // Set dragging flag to true d3.select(this) .raise() .attr("stroke", "black") .style("cursor", "grabbing"); } function dragged(event, d) { // Update the square's position d.x = event.x - d.size / 2; d.y = event.y - d.size / 2; // Keep squares within the bounds (at least 10 pixels from border) d.x = Math.max(10, Math.min(width - d.size - 10, d.x)); d.y = Math.max(10, Math.min(height - d.size - 10, d.y)); d3.select(this) .attr("x", d.x) .attr("y", d.y); // Update the position of the corresponding label svg.select(`#label-${d.animal.replace(/\s+/g, '-')}`) .attr("x", d.x + d.size / 2) .attr("y", d.y - 5); // Position label above the square // Update lines connected to this square updateLines(); // If evaluation has been done, update line colors and stress if (evaluationDone) { evaluateLines(); highlightHighestStressLine(); } // Update stress meter const stressValue = calculateStress(); stressDisplay.html(`Stress: ${stressValue.toFixed(4)}`); // Update score updateScore(stressValue); // Update progress bar updateProgressBar(stressValue); } function dragended(event, d) { isDragging = false; // Reset dragging flag to false d3.select(this) .attr("stroke", null) .style("cursor", "pointer"); } // Tooltip for distances (only for lines) const tooltip = d3.select("body") .append("div") .attr("class", "custom-tooltip") // Add a class for styling .style("position", "absolute") .style("background-color", "rgba(255, 255, 255, 0.95)") .style("border", "1px solid #ccc") .style("padding", "10px") .style("display", "none") .style("pointer-events", "auto") // Allow interactions within the tooltip .style("font-size", "12px") .style("box-shadow", "0px 0px 10px rgba(0,0,0,0.2)") .style("border-radius", "5px"); // Ensure that all squares are within the plot area and at least 10px inside from the border // Initial random placement within the canvas squares.forEach(d => { d.x = Math.random() * (width - d.size - 20) + 10; d.y = Math.random() * (height - d.size - 20) + 10; }); // Draw squares without hover functionality const squaresSelection = svg.selectAll("rect") .data(squares) .join("rect") .attr("id", d => `square-${d.animal.replace(/\s+/g, '-')}`) .attr("x", d => d.x) .attr("y", d => d.y) .attr("width", d => d.size) .attr("height", d => d.size) .attr("fill", d => d.color) .style("cursor", "pointer") .call(dragBehavior) // Removed hover event handlers as per your request .on("click", function(event, d) { // Prevent the SVG click handler from being triggered event.stopPropagation(); // Remove any existing star plot to avoid duplicates container.selectAll(".star-plot").remove(); // Fetch attributes for the clicked animal const animalData = attributesDataset.find(row => row.Name === d.animal); // Check if the animal has data in attributesDataset if (animalData) { // Prepare data for the star plot (single animal) const dataForStarPlot = [animalData]; // Create the star plot using your existing function const starPlotSVG = drawStarPlot(dataForStarPlot); // Append the star plot SVG to the container container.append(() => starPlotSVG) .attr("class", "star-plot"); } else { console.log("Data not found for the selected animal."); } // Remove any existing highlights on squares removeSquareHighlights(); // Highlight the clicked square highlightSquare(d); }); // Add labels to the squares svg.selectAll(".square-label") .data(squares) .join("text") .attr("class", "square-label") .attr("id", d => `label-${d.animal.replace(/\s+/g, '-')}`) .attr("x", d => d.x + d.size / 2) .attr("y", d => d.y - 5) // Position label above the square .attr("text-anchor", "middle") .text(d => d.animal) .attr("fill", "black") .style("font-size", "12px") .style("pointer-events", "none"); // Function to update lines when squares move function updateLines() { // Update positions of lines between animals svg.selectAll(".line-between-animals") .attr("x1", d => d.animal1.x + d.animal1.size / 2) .attr("y1", d => d.animal1.y + d.animal1.size / 2) .attr("x2", d => d.animal2.x + d.animal2.size / 2) .attr("y2", d => d.animal2.y + d.animal2.size / 2) .raise(); // Ensure lines are on top when updated } // Create a container for the buttons with flex display const buttonContainer = container.append("div") .style("display", "flex") .style("align-items", "center") .style("margin-top", "10px"); // Add a button to create lines between all squares buttonContainer.append("button") .text("Create Lines Between Animals") .style("margin-right", "10px") .style("margin-bottom", "20px") .on("click", function() { // Remove existing lines if any svg.selectAll(".line-between-animals").remove(); // Prepare data for lines lineData = []; for (let i = 0; i < squares.length; i++) { for (let j = i + 1; j < squares.length; j++) { lineData.push({ animal1: squares[i], animal2: squares[j], selected: false, // Initialize selection state stressContribution: 0 // Initialize stress contribution }); } } // Draw lines between all squares with black color svg.selectAll(".line-between-animals") .data(lineData) .enter() .append("line") .attr("class", "line-between-animals") .attr("x1", d => d.animal1.x + d.animal1.size / 2) .attr("y1", d => d.animal1.y + d.animal1.size / 2) .attr("x2", d => d.animal2.x + d.animal2.size / 2) .attr("y2", d => d.animal2.y + d.animal2.size / 2) .attr("stroke", "black") .attr("stroke-width", 2) .style("cursor", "pointer") .on("click", function(event, d) { // Stop the event from bubbling up to the SVG click handler event.stopPropagation(); // Check if CTRL key is pressed if (!event.ctrlKey) { // Unselect all other lines lineData.forEach(ld => { ld.selected = false; }); svg.selectAll(".line-between-animals").classed("line-selected", false); selectedAnimalsSet.clear(); } // Toggle selection state of the clicked line d.selected = !d.selected; if (d.selected) { // Line is now selected // Add animals to selectedAnimalsSet selectedAnimalsSet.add(d.animal1.animal); selectedAnimalsSet.add(d.animal2.animal); // Change visual appearance of the line to indicate selection d3.select(this).classed("line-selected", true); } else { // Line is now unselected // Remove animals if they are not part of any other selected lines const otherSelectedLines = lineData.filter(ld => ld.selected); // Update selectedAnimalsSet selectedAnimalsSet.clear(); otherSelectedLines.forEach(ld => { selectedAnimalsSet.add(ld.animal1.animal); selectedAnimalsSet.add(ld.animal2.animal); }); // Revert visual appearance of the line d3.select(this).classed("line-selected", false); } // Update the star plot to include all selected animals updateStarPlot(); // Update the highlights on squares updateSquareHighlights(); }) // **Replace hover events with contextmenu (right-click) events** .on("contextmenu", function(event, d) { // Prevent the default context menu from appearing event.preventDefault(); // Stop propagation to prevent the global click listener from immediately hiding the tooltip event.stopPropagation(); // Define legendData inside the tooltip const legendData = [ { label: "Desired Distance", color: "green" }, { label: "Actual Distance", color: "purple" }, { label: "Difference", color: "red" } ]; // Calculate distances const distanceRow = distanceMatrix.find(row => row.Name === d.animal1.animal); const delta_ij_raw = parseFloat(distanceRow[d.animal2.animal]); const delta_ij = distanceScale(delta_ij_raw); // Scaled desired distance const x1 = d.animal1.x + d.animal1.size / 2; const y1 = d.animal1.y + d.animal1.size / 2; const x2 = d.animal2.x + d.animal2.size / 2; const y2 = d.animal2.y + d.animal2.size / 2; const d_ij = calculateDistance(x1, y1, x2, y2); const diff = d_ij - delta_ij; // Prepare data for the bar chart const barData = [ { category: "Desired Distance", value: delta_ij, color: "green" }, { category: "Actual Distance", value: d_ij, color: "purple" }, { category: "Difference", value: Math.abs(diff), color: "red", diff: diff } ]; // Animal pair name const animalPair = `${d.animal1.animal} - ${d.animal2.animal}`; // Dimensions for the bar chart within the tooltip const margin = { top: 40, right: 20, bottom: 50, left: 50 }; const chartWidth = 150; const chartHeight = 250 - margin.top - margin.bottom; const legendWidth = 100; // Adjust tooltip width to accommodate the legend const tooltipWidth = chartWidth + margin.left + margin.right + legendWidth + 10; const tooltipHeight = 250; // Remove any existing SVG inside the tooltip tooltip.selectAll("*").remove(); // Create an SVG for the bar chart inside the tooltip const tooltipSVG = tooltip.append("svg") .attr("width", tooltipWidth) .attr("height", tooltipHeight); const chartGroup = tooltipSVG.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Set up scales const x0_tooltip = d3.scaleBand() .domain([animalPair]) .range([0, chartWidth]) .paddingInner(0.1); const x1_tooltip = d3.scaleBand() .domain(barData.map(d => d.category)) .range([0, x0_tooltip.bandwidth()]) .padding(0.05); const y_tooltip = d3.scaleLinear() .domain([0, d3.max(barData, d => d.value) * 1.2]) .nice() .range([chartHeight, 0]); // Add Y axis chartGroup.append("g") .call(d3.axisLeft(y_tooltip).ticks(5)); // Add X axis chartGroup.append("g") .attr("transform", `translate(0,${chartHeight})`) .call(d3.axisBottom(x0_tooltip)) .selectAll("text") .attr("text-anchor", "middle") .style("font-size", "12px"); // Add bars chartGroup.selectAll(".bar") .data(barData) .enter() .append("rect") .attr("class", "bar") .attr("x", d => x1_tooltip(d.category)) .attr("y", d => y_tooltip(d.value)) .attr("width", x1_tooltip.bandwidth()) .attr("height", d => chartHeight - y_tooltip(d.value)) .attr("fill", d => d.color); // Add labels on top of the bars chartGroup.selectAll(".label") .data(barData) .enter() .append("text") .attr("class", "label") .attr("x", d => x1_tooltip(d.category) + x1_tooltip.bandwidth() / 2) .attr("y", d => y_tooltip(d.value) - 5) .attr("text-anchor", "middle") .text(d => d.value.toFixed(2)) .style("font-size", "12px"); // Define a spacing variable for the arrow const arrowSpacing = 10; // Adjust this value as needed // Add arrows for the Difference bar const differenceData = barData.find(d => d.category === "Difference"); if (differenceData && differenceData.diff !== undefined) { const arrowSize = 10; const arrowX = x1_tooltip(differenceData.category) + x1_tooltip.bandwidth() / 2; // Increase the Y-offset by adding arrowSpacing const arrowY = y_tooltip(differenceData.value) - 15 - arrowSpacing; if (differenceData.diff > 0) { // Upward arrow chartGroup.append("path") .attr("d", d3.symbol().type(d3.symbolTriangle).size(100)()) .attr("transform", `translate(${arrowX}, ${arrowY}) rotate(180)`) .attr("fill", "red"); } else if (differenceData.diff < 0) { // Downward arrow chartGroup.append("path") .attr("d", d3.symbol().type(d3.symbolTriangle).size(100)()) .attr("transform", `translate(${arrowX}, ${arrowY})`) .attr("fill", "red"); } } // Add legend inside the tooltip const legendGroup = chartGroup.append("g") .attr("transform", `translate(${chartWidth + 20}, 0)`); const legendItems = legendGroup.selectAll(".legend-item") .data(legendData) .enter() .append("g") .attr("class", "legend-item") .attr("transform", (d, i) => `translate(0, ${i * 20})`); legendItems.append("rect") .attr("width", 15) .attr("height", 15) .attr("fill", d => d.color); legendItems.append("text") .attr("x", 20) .attr("y", 12) .text(d => d.label) .style("font-size", "12px"); // Position the tooltip near the mouse click const tooltipX = event.pageX + 10; const tooltipY = event.pageY - tooltipHeight / 2; // Show tooltip tooltip .style("left", `${tooltipX}px`) .style("top", `${tooltipY}px`) .style("display", "block"); }) .on("mousemove", function(event, d) { // No action needed since tooltip is triggered on right-click }) .on("mouseout", function(event, d) { // No action needed since tooltip is triggered on right-click }); // Reset evaluation state and clear score display evaluationDone = false; scoreDisplay.html(""); // Remove any existing highlights on squares removeSquareHighlights(); // Remove any existing star plot container.selectAll(".star-plot").remove(); // Initial stress calculation after lines are created const initialStress = calculateStress(); stressDisplay.html(`Stress: ${initialStress.toFixed(4)}`); // Initial score updateScore(initialStress); // Update progress bar updateProgressBar(initialStress); }); // Add an "Evaluate" button buttonContainer.append("button") .text("Evaluate") .style("margin-right", "10px") .style("margin-bottom", "20px") .on("click", function() { // Set evaluation state to true evaluationDone = true; // Evaluate the lines and update colors and stress evaluateLines(); // Highlight the line that contributes most to stress highlightHighestStressLine(); }); // Add a "Reset" button buttonContainer.append("button") .text("Reset") .style("margin-bottom", "20px") .on("click", function() { // Remove all lines between animals svg.selectAll(".line-between-animals").remove(); // Remove all squares (animals) svg.selectAll("rect").remove(); // Remove all labels svg.selectAll(".square-label").remove(); // Remove any star plot container.selectAll(".star-plot").remove(); // Reset score display scoreDisplay.html(""); // Reset stress display stressDisplay.html(""); // Reset evaluation state evaluationDone = false; // Clear selected animals set selectedAnimalsSet.clear(); // Re-initialize squares squares.forEach(d => { d.x = Math.random() * (width - d.size - 20) + 10; d.y = Math.random() * (height - d.size - 20) + 10; }); // Redraw squares and labels squaresSelection.data(squares) .attr("x", d => d.x) .attr("y", d => d.y); svg.selectAll(".square-label") .data(squares) .attr("x", d => d.x + d.size / 2) .attr("y", d => d.y - 5); // Reset progress bar updateProgressBar(calculateStress()); console.log("Plot has been reset."); }); // Define a color scale for line coloring const colorScale = d3.scaleLinear() .domain([-1, 0, 1]) // Adjust domain as needed .range(["blue", "green", "red"]); // Function to evaluate lines and update colors and stress function evaluateLines() { let numerator = 0; let denominator = 0; svg.selectAll(".line-between-animals") .attr("stroke", function(d) { const distanceRow = distanceMatrix.find(row => row.Name === d.animal1.animal); const delta_ij_raw = parseFloat(distanceRow[d.animal2.animal]); const delta_ij = distanceScale(delta_ij_raw); // Scaled desired distance const x1 = d.animal1.x + d.animal1.size / 2; const y1 = d.animal1.y + d.animal1.size / 2; const x2 = d.animal2.x + d.animal2.size / 2; const y2 = d.animal2.y + d.animal2.size / 2; const d_ij = calculateDistance(x1, y1, x2, y2); const diff = d_ij - delta_ij; const relativeDiff = diff / delta_ij; const relativeDiffCapped = Math.max(-1, Math.min(1, relativeDiff)); // Store stress contribution for highlighting const stressContribution = Math.pow(d_ij - delta_ij, 2) / Math.pow(delta_ij, 2); d.stressContribution = stressContribution; numerator += Math.pow(d_ij - delta_ij, 2); denominator += Math.pow(delta_ij, 2); // Use color scale to map relativeDiff to a color return colorScale(relativeDiffCapped); }) .attr("stroke-width", 2) .classed("highest-stress-line", false); // Reset any previous highlighting const stress = Math.sqrt(numerator / denominator); stressDisplay.html(`Stress: ${stress.toFixed(4)}`); // Update score updateScore(stress); // Update progress bar updateProgressBar(stress); } // Function to calculate stress based on absolute distances function calculateStress() { let numerator = 0; let denominator = 0; for (let i = 0; i < lineData.length; i++) { const d = lineData[i]; const distanceRow = distanceMatrix.find(row => row.Name === d.animal1.animal); const delta_ij_raw = parseFloat(distanceRow[d.animal2.animal]); const delta_ij = distanceScale(delta_ij_raw); // Scaled desired distance const x1 = d.animal1.x + d.animal1.size / 2; const y1 = d.animal1.y + d.animal1.size / 2; const x2 = d.animal2.x + d.animal2.size / 2; const y2 = d.animal2.y + d.animal2.size / 2; const d_ij = calculateDistance(x1, y1, x2, y2); numerator += Math.pow(d_ij - delta_ij, 2); denominator += Math.pow(delta_ij, 2); } const stress = Math.sqrt(numerator / denominator); return stress; } // Function to update the score function updateScore(stressValue) { // Decrease score based on stress currentScore = Math.max(0, (1 - stressValue) * maxScore).toFixed(2); scoreDisplay.html(`Score: ${currentScore}`); } // Function to update the progress bar function updateProgressBar(stressValue) { // Assuming stress ranges from 0 (best) to a maximum value (e.g., 1 or higher) const progressPercentage = Math.max(0, 1 - stressValue) * 100; progressBar.style("width", `${progressPercentage}%`); // Optionally, change the color based on progress if (progressPercentage > 66) { progressBar.style("background-color", "green"); } else if (progressPercentage > 33) { progressBar.style("background-color", "orange"); } else { progressBar.style("background-color", "red"); } } // Function to highlight the line that contributes most to stress function highlightHighestStressLine() { // Find the line with the maximum stress contribution const maxContribution = d3.max(lineData, d => d.stressContribution); const highestStressLine = lineData.find(d => d.stressContribution === maxContribution); // Reset all lines svg.selectAll(".line-between-animals") .attr("stroke-width", 2) .classed("highest-stress-line", false); // Highlight the line that contributes most to stress svg.selectAll(".line-between-animals") .filter(d => d === highestStressLine) .attr("stroke-width", 4) .classed("highest-stress-line", true); } // Function to update the star plot function updateStarPlot() { // Remove any existing star plot to avoid duplicates container.selectAll(".star-plot").remove(); // Fetch attributes for the selected animals const dataForStarPlot = attributesDataset.filter(row => selectedAnimalsSet.has(row.Name)); // Check if data is available for the selected animals if (dataForStarPlot.length > 0) { // Create the star plot const starPlotSVG = drawStarPlot(dataForStarPlot); // Append the star plot SVG to the container container.append(() => starPlotSVG) .attr("class", "star-plot"); } else { console.log("Data not found for the selected animals."); } } // Function to highlight connected squares based on selected animals function updateSquareHighlights() { // Remove existing highlights removeSquareHighlights(); selectedAnimalsSet.forEach(animalName => { svg.select(`#square-${animalName.replace(/\s+/g, '-')}`) .classed("highlighted", true); }); } // Function to highlight a single square when an animal is clicked function highlightSquare(d) { // Remove existing highlights removeSquareHighlights(); svg.select(`#square-${d.animal.replace(/\s+/g, '-')}`) .classed("highlighted", true); } // Function to remove highlights from all squares function removeSquareHighlights() { squaresSelection.classed("highlighted", false); } // Function to calculate Euclidean distance function calculateDistance(x1, y1, x2, y2) { return Math.hypot(x2 - x1, y2 - y1); } // Variable to keep track of selected animals let selectedAnimalsSet = new Set(); // CSS Styles const style = document.createElement('style'); style.type = 'text/css'; style.innerHTML = ` .highlighted { stroke: yellow !important; stroke-width: 3; } .line-selected { stroke: orange !important; stroke-width: 4; } .highest-stress-line { stroke-width: 4 !important; } .progress-container { width: 100%; background-color: #e0e0e0; border-radius: 5px; margin-bottom: 10px; } .progress-bar { width: 0%; height: 20px; background-color: green; border-radius: 5px; } .custom-tooltip { pointer-events: auto; /* Allow interactions within the tooltip */ z-index: 1000; /* Ensure tooltip is above other elements */ } .distance-scaling-legend { /* Optional: Add additional styling if needed */ } `; document.head.appendChild(style); // Initial stress calculation const initialStress = calculateStress(); stressDisplay.html(`Stress: ${initialStress.toFixed(4)}`); // Initial score updateScore(initialStress); // Initial progress bar update updateProgressBar(initialStress); // Add a global click listener to hide the tooltip when clicking outside d3.select("body").on("click.tooltip", function(event) { // Check if the click target is not within the tooltip const isClickInsideTooltip = event.target.closest('.custom-tooltip'); if (!isClickInsideTooltip) { tooltip.style("display", "none"); } }); // Ensure that clicking on the tooltip itself does not propagate to the body tooltip.on("click", function(event) { event.stopPropagation(); }); // Additionally, ensure that clicking on the SVG hides the tooltip svg.on("click.hideTooltip", function(event) { // Remove any existing star plot container.selectAll(".star-plot").remove(); // Remove any highlights removeSquareHighlights(); // Clear selected animals and lines selectedAnimalsSet.clear(); lineData.forEach(d => d.selected = false); svg.selectAll(".line-between-animals").classed("line-selected", false); // Hide the tooltip tooltip.style("display", "none"); }); return container.node(); }; 33:T465,function updateDistanceViewPlot() { // Remove any existing distance info to avoid duplicates d3.select(".distance-view").remove(); // Create a container to show distances between animals const distanceView = d3.select("body") .append("div") .attr("class", "distance-view") .style("margin-top", "10px") .style("padding", "10px") .style("border", "1px solid black") .style("background-color", "#f9f9f9"); let distanceText = "Distances between animals:
"; // Calculate and display distances between each pair of animals for (let i = 0; i < squares.length; i++) { for (let j = i + 1; j < squares.length; j++) { const animal1 = squares[i]; const animal2 = squares[j]; const distance = calculateDistance( animal1.x + animal1.size / 2, animal1.y + animal1.size / 2, animal2.x + animal2.size / 2, animal2.y + animal2.size / 2 ); distanceText += `${animal1.animal} - ${animal2.animal}: ${distance.toFixed(2)}
`; } } // Set the distance text in the container distanceView.html(distanceText); } 34:Te33,function drawStarPlot(data, radius = 250) { const features = Object.keys(data[0]).slice(1); // Assuming first column is "Name" and others are features const angleSlice = (2 * Math.PI) / features.length; // Create SVG element const svg = d3.create("svg") .attr("width", 2 * radius + 400) .attr("height", 2 * radius + 400) .attr("viewBox", [-radius - 200, -radius - 200, 2 * radius + 400, 2 * radius + 400]); // Define the radial scale const scale = d3.scaleLinear() .domain([0, 100]) // Assuming data is within 0-100 .range([0, radius]); // Draw grid circles const gridLevels = 5; // Number of circles const gridGroup = svg.append("g").attr("class", "grid"); for (let i = 1; i <= gridLevels; i++) { gridGroup.append("circle") .attr("r", (radius / gridLevels) * i) .attr("fill", "none") .attr("stroke", "#ccc") .attr("stroke-width", 0.5); } // Draw radial lines and labels const axis = svg.append("g") .selectAll("g") .data(features) .join("g") .attr("transform", d => { const angle = features.indexOf(d) * angleSlice - Math.PI / 2; const x = Math.cos(angle) * radius; const y = Math.sin(angle) * radius; return `translate(${x},${y})`; }); axis.append("line") .attr("x1", 0) .attr("y1", 0) .attr("x2", d => -Math.cos(features.indexOf(d) * angleSlice - Math.PI / 2) * radius) .attr("y2", d => -Math.sin(features.indexOf(d) * angleSlice - Math.PI / 2) * radius) .attr("stroke", "#aaa") .attr("stroke-width", 1); axis.append("text") .text(d => d) .attr("dy", "0.35em") .attr("font-size", 10) .attr("text-anchor", d => { const angle = features.indexOf(d) * angleSlice - Math.PI / 2; return (angle > Math.PI / 2 && angle < (3 * Math.PI) / 2) ? "end" : "start"; }) .attr("transform", d => { const angle = features.indexOf(d) * angleSlice - Math.PI / 2; const xOffset = Math.cos(angle)*(radius-235); const yOffset = Math.sin(angle)*(radius-235); return `translate(${xOffset},${yOffset})`; }); // Define colors for each animal let colors = ["blue", "red"]; // If more animals, add colors from a color scheme const colorScale = d3.scaleOrdinal(d3.schemeCategory10); for (let i = 2; i < data.length; i++) { colors.push(colorScale(i)); } // Draw the animal's data path data.forEach((d, i) => { const line = d3.lineRadial() .angle((_, j) => j * angleSlice) .radius((_, j) => scale(d[features[j]])); svg.append("path") .datum(features) .attr("d", line) .attr("fill", colors[i % colors.length]) .attr("fill-opacity", 0.3) .attr("stroke", colors[i % colors.length]) .attr("stroke-width", 2); }); // Legend const legend = svg.append("g") .attr("class", "legend") .attr("transform", `translate(${radius + 70}, -${radius})`); const legendData = data.map((d, i) => ({ name: d.Name, color: colors[i % colors.length] })); legend.selectAll("rect") .data(legendData) .join("rect") .attr("x", 0) .attr("y", (_, i) => i * 20) .attr("width", 12) .attr("height", 12) .attr("fill", d => d.color); legend.selectAll("text") .data(legendData) .join("text") .attr("x", 20) .attr("y", (_, i) => i * 20 + 10) .attr("font-size", 12) .text(d => d.name); // Title svg.append("text") .attr("x", 0) .attr("y", -radius - 150) .attr("text-anchor", "middle") .attr("font-size", 16) .attr("font-weight", "bold") .text("Star Plot Comparison"); return svg.node(); } 35:[{"id":"16a455054fca8851ed38a79ce1bf8495140e50f33b383d81d080c08552fa46e5579b7a2467a74177281678153a037def7089eff7e0db707e1470c928dba7c157","href":"https://static.observableusercontent.com/files/16a455054fca8851ed38a79ce1bf8495140e50f33b383d81d080c08552fa46e5579b7a2467a74177281678153a037def7089eff7e0db707e1470c928dba7c157","name":"data_attribute@1.csv","type":"text/csv","lastModified":1733880040236.127,"size":9386},{"id":"e1870856be0b88bd91f94428709e61268229965594d136e1079d02a105fc062725bef29de94f03e355f55410880c8c8845ac3b621f12202af5289e9641e2c37c","href":"https://static.observableusercontent.com/files/e1870856be0b88bd91f94428709e61268229965594d136e1079d02a105fc062725bef29de94f03e355f55410880c8c8845ac3b621f12202af5289e9641e2c37c","name":"distance_matrix_2D@1.csv","type":"text/csv","lastModified":1733880040236.127,"size":44539}] 2f:{"id":"a87b554b0bb9611b","slug":"interactive-mds-simulator","title":"Interactive MDS Simulator","thumbnail":"5cf11155fde611e963953a4258685232480a2a985953e9f5aa5143f8bc7c9549","access_level":"public","create_time":"$D2024-12-11T01:20:40.236Z","update_time":"$D2025-02-25T03:27:43.401Z","view_time":null,"first_public_time":"$D2025-02-25T03:06:15.760Z","fork":true,"stars":1,"starred":false,"owner":{"type":"team","id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":"starter_2024"},"version":604,"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":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":{"id":"b3520c7ea056fdd9","slug":"cs-3654","title":"VT CS 3654","owner":{"id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North"}},"type":"notebook","body":{"title":"Interactive MDS Simulator","cells":[{"id":0,"value":"# Interactive MDS Simulator\n\nVT CS 5764 Information Visualization class project\n\nby Samar Kansal, \nJharana Sapkota, \nShan Somashekar, \nKovidh Jain\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":528,"value":"**How to play?**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":530,"value":"$31","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":471,"value":"**Play with Random Animals:**","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":429,"value":"viewof randomAnimals = Inputs.checkbox([\"Random animals\"])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":495,"value":"md`${!randomAnimals.includes(\"Random animals\") ? '**Select your own Animals:**' : ''}`\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":432,"value":"viewof animalSelection = {\n if (randomAnimals.includes(\"Random animals\")) {\n return html`\n ${Inputs.range([1, animalNames.length], {\n value: 3,\n label: \"Number of animals\",\n step: 1\n })}\n `;\n } else {\n return Inputs.select(attributesDataset.map(d => d.Name), {\n label: \"Select animals\",\n multiple: true\n });\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":506,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":594,"value":"## Animal Dataset","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":589,"value":"viewof table1 = Inputs.table(attributesDataset)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":596,"value":"## Distance Matrix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":586,"value":"viewof table = Inputs.table(distanceMatrix)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":598,"value":"## Code","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":6,"value":"distanceMatrix = await FileAttachment(\"distance_matrix_2D@1.csv\").csv({ typed: true })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":176,"value":"attributesDataset = d3.sort(\n await FileAttachment(\"data_attribute@1.csv\").csv({ typed: true }),\n (d) => d.Name\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"animalNames = Array.from(new Set(distanceMatrix.map(d => d.Name)))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":437,"value":"selectedAnimals = {\n if (randomAnimals.includes(\"Random animals\")) {\n const animals = animalNames.slice();\n return d3.shuffle(animals).slice(0, animalSelection);\n } else {\n return animalSelection;\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":136,"value":"width = 1000","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":142,"value":"height = 700","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"margin = ({left: 60, top: 10, right: 60, bottom: 30})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":149,"value":"colorScale = d3.scaleOrdinal(d3.schemeCategory10)\n .domain(animalNames)\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":151,"value":"squares = selectedAnimals.map(animal => ({\n animal: animal,\n x: Math.random() * (width - 30),\n y: Math.random() * (height - 30),\n size: 20,\n color: colorScale(animal)\n}))\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":328,"value":"function calculateDistance(x1, y1, x2, y2) {\n return Math.sqrt(Math.pow(x2 - x1, 2) + Math.pow(y2 - y1, 2));\n}\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":326,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":372,"value":"chart","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":288,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":232,"value":"Chart = require('chart.js@3')\n","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":374,"value":"d3 = require(\"d3@7\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":399,"value":"//viewof selectedAnimal = Inputs.select(attributesDataset.map(d => d.Name), {label: \"Select an Animal\"})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W35","stdlib":"1","titling":"auto"}} 30:"$2f:body"