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(); }