2c:null 2d:["$","title",null,{"children":"Visualizing a Distance Matrix | Chris North | Observable"}] 32:T1f39, chart = { const traits = Object.keys(data[0]).slice(2); // Exclude the first two columns (Name, Type) // Function to calculate Euclidean distance between two animals based on their traits function calculateSimilarity(animal1, animal2) { const traitValues1 = traits.map(trait => +animal1[trait]); const traitValues2 = traits.map(trait => +animal2[trait]); // Compute Euclidean distance const distance = Math.sqrt(d3.sum(traits, (_, i) => Math.pow(traitValues1[i] - traitValues2[i], 2))); // Convert distance to similarity score (higher is more similar) const maxDistance = Math.sqrt(traits.length * Math.pow(100, 2)); // Traits range from 0 to 100 const similarity = 1 - (distance / maxDistance); // Normalized to [0, 1] return similarity; } // Create a similarity matrix (NxN) for all animals const similarityMatrix = animals.map((animal1, i) => animals.map((animal2, j) => ({ animal1: animal1, animal2: animal2, similarity: calculateSimilarity(data[i], data[j]) })) ).flat(); // Flatten to an array for easier use in D3 // Create SVG container let svg = d3.create("svg") .attr("width", width + margin.left + margin.right) .attr("height", height + margin.top + margin.bottom) .style("border", "1px solid black"); let g = svg.append("g") .attr("transform", `translate(${margin.left},${margin.top})`); // Define x and y scales const x = d3.scaleBand() .range([0, width]) .domain(animals) .padding(0.05); const y = d3.scaleBand() .range([0, height]) .domain(animals) .padding(0.05); // Append x and y axes g.append("g") .style("font-size", 10) .attr("transform", `translate(0, ${height})`) // Position X axis at the bottom .call(d3.axisBottom(x).tickSize(0)) .call(g => g.select(".domain").remove()) .selectAll("text") .attr("y", -3) .attr("x", -1) .attr("transform", "rotate(270)") .style("text-anchor", "end"); g.append("g") .style("font-size", 10) .call(d3.axisLeft(y).tickSize(0)) .select(".domain").remove(); // Define color scale const colorScale = d3.scaleSequential() .interpolator(d3.interpolateRdYlBu) .domain([0, 1]); // Similarity scores range from 0 (least similar) to 1 (most similar) // Can tweak the overal strength of the score via exponentiation const exponent = 1.1; // Adjust this value for stronger or weaker effects const applyExponent = d => Math.pow(d.similarity, exponent); // Raise similarity to the power of exponent const tooltip = d3.select("body").append("div") .attr("class", "tooltip") .style("position", "absolute") .style("visibility", "hidden") .style("background-color", "rgba(0, 0, 0, 0.75)") .style("color", "white") .style("padding", "8px") .style("border-radius", "4px") .style("font-size", "12px"); // Extend the height of the SVG to accommodate the line graph svg.attr("height", height + margin.top + margin.bottom + 300); // Create a container group for the line graph let lineGraphContainer = svg.append("g") .attr("transform", `translate(${margin.left}, ${height + margin.top + 100})`); // Scales for the line graph const xLine = d3.scalePoint() .range([0, width]) .domain(traits); const yLine = d3.scaleLinear() .range([200, 0]) // Inverted to match SVG coordinate system .domain([0, 100]); // Axes for the line graph lineGraphContainer.append("g") .attr("transform", "translate(0, 200)") // Position x-axis at the bottom of the graph .call(d3.axisBottom(xLine)) .selectAll("text") // Select all x-axis text labels .style("text-anchor", "end") // Align text at the end to avoid overlap .attr("transform", "rotate(-90)") // Rotate the text 90 degrees counterclockwise .attr("dx", "-0.8em") // Adjust horizontal offset .attr("dy", "-0.15em"); // Adjust vertical offset lineGraphContainer.append("g") .call(d3.axisLeft(yLine)); // Line generator const line = d3.line() .x((d, i) => xLine(traits[i])) .y(d => yLine(d)); // Variable to store the currently selected square let selectedSquare = null; // Create the heatmap g.selectAll() .data(similarityMatrix) .enter() .append("rect") .attr("x", d => x(d.animal1)) .attr("y", d => y(d.animal2)) .attr("width", x.bandwidth()) .attr("height", y.bandwidth()) .style("fill", d => colorScale(applyExponent(d))) .style("stroke-width", 2) .style("stroke", "none") .on("mouseover", function (event, d) { const traitSimilarity = calculateTraitSimilarity(d.animal1, d.animal2); const sortedTraits = traitSimilarity.sort((a, b) => b.similarity - a.similarity); const topTraits = sortedTraits.slice(0, 3); const leastTraits = sortedTraits .filter(trait => trait.similarity > 0) // Filter out traits with a similarity score of 0 .slice(-3); // Take the last 3 traits let tooltipText = `${d.animal1} vs ${d.animal2}
`; tooltipText += `Similarity Score: ${d.similarity.toFixed(3)}

`; tooltipText += "Most Similar Traits:
"; topTraits.forEach(trait => { tooltipText += `${trait.trait}: ${trait.similarity.toFixed(3)}
`; }); tooltipText += "
Least Similar Traits:
"; leastTraits.forEach(trait => { tooltipText += `${trait.trait}: ${trait.similarity.toFixed(3)}
`; }); tooltip.style("visibility", "visible") .html(tooltipText) .style("left", (event.pageX + 5) + "px") .style("top", (event.pageY - 28) + "px"); }) .on("mouseout", function () { tooltip.style("visibility", "hidden"); }) .on("click", function (event, d) { if (selectedSquare === this) { d3.select(this).style("stroke", "none"); selectedSquare = null; // Clear the line graph lineGraphContainer.selectAll(".line").remove(); lineGraphContainer.selectAll(".legend").remove(); } else { if (selectedSquare) { d3.select(selectedSquare).style("stroke", "none"); } d3.select(this).style("stroke", "black").style("stroke-width", 3); selectedSquare = this; // Data for the two animals const animal1 = data.find(animal => animal.Name === d.animal1); const animal2 = data.find(animal => animal.Name === d.animal2); const animal1Values = traits.map(trait => +animal1[trait]); const animal2Values = traits.map(trait => +animal2[trait]); console.log(animal1Values); // Clear previous lines lineGraphContainer.selectAll(".line").remove(); lineGraphContainer.selectAll(".legend").remove(); // Plot lines for both animals lineGraphContainer.append("path") .datum(animal1Values) .attr("class", "line") .attr("fill", "none") .attr("stroke", "blue") .attr("stroke-width", 2) .attr("d", line); lineGraphContainer.append("path") .datum(animal2Values) .attr("class", "line") .attr("fill", "none") .attr("stroke", "green") .attr("stroke-width", 2) .attr("d", line); // Add legends for the two animals lineGraphContainer.append("text") .attr("class", "legend") .attr("x", 10) .attr("y", -10) .attr("fill", "blue") .style("font-size", "12px") .text(`Animal 1: ${d.animal1}`); lineGraphContainer.append("text") .attr("class", "legend") .attr("x", 10) .attr("y", 10) .attr("fill", "green") .style("font-size", "12px") .text(`Animal 2: ${d.animal2}`); } }); // Add title g.append("text") .attr("x", width / 2) .attr("y", -15) .attr("text-anchor", "middle") .style("font-size", "20px") .style("text-decoration", "bold") .text("Animal Similarity Heatmap"); return svg.node(); } 33:[{"id":"10e607b554b68ca274856d77600b6243f2381ecd1a95243810d0e3197ab541d5515cc9f50f412de3e3813870944e0bc946c0dde090626cb31d5839637c7221b2","href":"https://static.observableusercontent.com/files/10e607b554b68ca274856d77600b6243f2381ecd1a95243810d0e3197ab541d5515cc9f50f412de3e3813870944e0bc946c0dde090626cb31d5839637c7221b2","name":"Animal_Type.csv","type":"text/csv","lastModified":1733888739103.756,"size":9692}] 30:{"id":"771d342103435bbc","slug":"visualizing-a-distance-matrix","title":"Visualizing a Distance Matrix","thumbnail":"8b9488ca7871905829754bdac842702c28c5cacf42bfb1c021a14e6e39a159d4","access_level":"public","create_time":"$D2024-12-11T03:45:39.103Z","update_time":"$D2025-02-25T02:51:29.029Z","view_time":null,"first_public_time":"$D2025-02-25T02:53:03.381Z","has_unpublished_edits":null,"fork":true,"stars":2,"starred":false,"owner":{"type":"team","id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North","avatar_url":"https://avatars-next.observableusercontent.com/4ccf47b2182cd891232f3949528d386f98cf55e9749ceb65960723d6b963c5a2","tier":"starter_2024","bio":"Department of Computer Science, Virginia Tech"},"version":446,"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,"bio":"Department of Computer Science, Virginia Tech"}],"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":1,"collection":{"id":"b3520c7ea056fdd9","slug":"cs-3654","title":"VT CS 3654","owner":{"id":"944d12de66c65f0a","login":"chrislnorth","name":"Chris North"}},"type":"notebook","body":{"titling":"auto","title":"Visualizing a Distance Matrix","cells":[{"id":0,"value":"# Visualizing a Distance Matrix \nCS5764 Information Visualization class project \n\nby Patrick Goodman, \nAjay Kanjoor, \nJoseph Mecherikunnel, \nKishore Vijaykumar \n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":57,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"data","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":11,"value":"// Step 1: Parse CSV data\ndata = FileAttachment(\"Animal_Type.csv\").csv();","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"// Step 2: Extract column headers for traits\ntraits = Object.keys(data[0]).slice(2); ","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":133,"value":"animals = data.map(d => d.Name);","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":168,"value":"margin = ({ top: 50, right: 25, bottom: 100, left: 100 });","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":172,"value":"width = 900 - margin.left - margin.right;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":179,"value":"\nheight = 900 - margin.top - margin.bottom;","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":366,"value":" // Function to calculate similarity for each individual trait between two animals\n function calculateTraitSimilarity(animal1Name, animal2Name) {\n // Find the animal objects based on the names provided\n const animal1 = data.find(animal => animal.Name === animal1Name);\n const animal2 = data.find(animal => animal.Name === animal2Name);\n\n if (!animal1 || !animal2) {\n console.log(\"One or both animals not found.\");\n return [];\n }\n const traitSimilarity = traits.map(trait => {\n const traitValue1 = +animal1[trait];\n const traitValue2 = +animal2[trait];\n const similarity = 1 - Math.abs(traitValue1 - traitValue2) / 100; // Normalize similarity [0, 1]\n if (traitValue1 < 20 && traitValue2 < 20 && similarity > .9) { \n return { trait, similarity:0 }; \n }\n return { trait, similarity };\n });\n \n return traitSimilarity;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"