Skip to content

Commit

Permalink
ugh
Browse files Browse the repository at this point in the history
  • Loading branch information
@sgiannuzzi39
sgiannuzzi39 committed Jul 31, 2024
1 parent 6377477 commit d9e6169
Showing 1 changed file with 73 additions and 65 deletions.
138 changes: 73 additions & 65 deletions js/scatter_plot_vis.js
View file
Original file line number Diff line number Diff line change
Expand Up @@ -5,7 +5,6 @@ function zoomed(event) {
g.attr("transform", event.transform);
}

console.log("entered 2")
async function loadAndProcessData() {
const data = await d3.json("./input/QuArch_v0_2_0.json");

Expand Down Expand Up @@ -78,6 +77,75 @@ async function loadModelData(selectedModel, selectedSet, selectedType) {
return modelData;
}

function updateScatterPlot(g, colorScale, customColors, hullGroup, isSecondVis = false, selectedCategory = null) {
const selectedModel = document.getElementById("model-dropdown").value;
const selectedSet = document.getElementById("set-dropdown").value;
const selectedType = document.getElementById("sft-checkbox").checked ? "sft" : "zs";

console.log("Selected Model:", selectedModel);
console.log("Selected Set:", selectedSet);
console.log("Selected Type:", selectedType);

if (!selectedModel || !selectedSet || !selectedType) {
console.error("Model, set, or type not selected correctly");
return;
}

loadModelData(selectedModel, selectedSet, selectedType).then(modelData => {
const modelDataMap = new Map();
modelData.forEach(item => {
const question = item[0].Question;
const correctness = item[0].Correctness;
modelDataMap.set(question, correctness);
});

g.selectAll("circle")
.attr("r", function(p) {
if (isSecondVis) {
const correctness = modelDataMap.get(p.text);
if (correctness !== undefined) {
return 5; // Increased radius for emphasis
}
return 3;
}
return 3;
})
.style("fill", function(p) {
if (isSecondVis) {
const correctness = modelDataMap.get(p.text);
if (correctness !== undefined) {
return correctness ? "#00FF00" : "#FF0000";
}
return "#CCCCCC";
}
if (selectedCategory && p.category.replace(/\s+/g, '-') === selectedCategory) {
return p.defaultColor;
}
return selectedCategory ? "#CCCCCC" : p.defaultColor;
})
.style("opacity", function(p) {
if (isSecondVis) {
const correctness = modelDataMap.get(p.text);
if (correctness !== undefined) {
return 1; // Higher opacity for emphasis
}
return 0.1; // Reduced opacity for non-relevant points
}
return selectedCategory ? (p.category.replace(/\s+/g, '-') === selectedCategory ? 1 : 0.1) : 1;
});

g.selectAll(".label text")
.style("opacity", function(label) {
return selectedCategory ? (label.category.replace(/\s+/g, '-') === selectedCategory ? 1 : 0.2) : 1;
})
.attr("fill", function(label) {
return selectedCategory ? (label.category.replace(/\s+/g, '-') === selectedCategory ? (customColors[label.category] || colorScale(label.category)) : "#CCCCCC") : (isSecondVis ? "#555555" : (customColors[label.category] || colorScale(label.category)));
});
}).catch(error => {
console.error("Error loading model data:", error);
});
}

export async function loadScatterPlotVis() {
const container = document.querySelector('.visualization-container');
container.innerHTML = `
Expand Down Expand Up @@ -263,66 +331,6 @@ export async function loadScatterPlotVis() {
const legend = createLegend(svg);
legend.style("display", "none"); // Hide the legend initially

function updateScatterPlot(isSecondVis = false, selectedCategory = null) {
const selectedModel = document.getElementById("model-dropdown").value;
const selectedSet = document.getElementById("set-dropdown").value;
const selectedType = document.getElementById("sft-checkbox").checked ? "sft" : "zs";

loadModelData(selectedModel, selectedSet, selectedType).then(modelData => {
const modelDataMap = new Map();
modelData.forEach(item => {
const question = item[0].Question;
const correctness = item[0].Correctness;
modelDataMap.set(question, correctness);
});

g.selectAll("circle")
.attr("r", function(p) {
if (isSecondVis) {
const correctness = modelDataMap.get(p.text);
if (correctness !== undefined) {
return 5; // Increased radius for emphasis
}
return 3;
}
return 3;
})
.style("fill", function(p) {
if (isSecondVis) {
const correctness = modelDataMap.get(p.text);
if (correctness !== undefined) {
return correctness ? "#00FF00" : "#FF0000";
}
return "#CCCCCC";
}
if (selectedCategory && p.category.replace(/\s+/g, '-') === selectedCategory) {
return p.defaultColor;
}
return selectedCategory ? "#CCCCCC" : p.defaultColor;
})
.style("opacity", function(p) {
if (isSecondVis) {
const correctness = modelDataMap.get(p.text);
if (correctness !== undefined) {
return 1; // Higher opacity for emphasis
}
return 0.1; // Reduced opacity for non-relevant points
}
return selectedCategory ? (p.category.replace(/\s+/g, '-') === selectedCategory ? 1 : 0.1) : 1;
});

g.selectAll(".label text")
.style("opacity", function(label) {
return selectedCategory ? (label.category.replace(/\s+/g, '-') === selectedCategory ? 1 : 0.2) : 1;
})
.attr("fill", function(label) {
return selectedCategory ? (label.category.replace(/\s+/g, '-') === selectedCategory ? (customColors[label.category] || colorScale(label.category)) : "#CCCCCC") : (isSecondVis ? "#555555" : (customColors[label.category] || colorScale(label.category)));
});
}).catch(error => {
console.error("Error loading model data:", error);
});
}

function updateCheckboxState(event) {
const checkboxChanged = event.target;
if (checkboxChanged.id === 'sft-checkbox' && checkboxChanged.checked) {
Expand All @@ -335,7 +343,7 @@ export async function loadScatterPlotVis() {

function onLabelClick(event, d) {
const selectedCategory = d.category.replace(/\s+/g, '-');
updateScatterPlot(false, selectedCategory);
updateScatterPlot(g, colorScale, customColors, hullGroup, false, selectedCategory);
}

labelGroups.on("click", onLabelClick);
Expand All @@ -346,7 +354,7 @@ export async function loadScatterPlotVis() {
document.getElementById('zs-checkbox').onchange = function(event) { updateCheckboxState(event); };

document.getElementById('update-vis').addEventListener('click', function() {
updateScatterPlot(true);
updateScatterPlot(g, colorScale, customColors, hullGroup, true);
});

document.getElementById('show-second-vis').addEventListener('click', function() {
Expand Down Expand Up @@ -386,7 +394,7 @@ export async function loadScatterPlotVis() {
modelDropdown.property("value", "llama3-8B");
setDropdown.property("value", "test");

updateScatterPlot(true);
updateScatterPlot(g, colorScale, customColors, hullGroup, true);

// Set labels to grey
g.selectAll(".label text")
Expand All @@ -398,7 +406,7 @@ export async function loadScatterPlotVis() {

svg.on("click", function(event) {
if (event.target.tagName !== 'circle' && event.target.tagName !== 'text') {
updateScatterPlot(true);
updateScatterPlot(g, colorScale, customColors, hullGroup, true);
}
});

Expand Down

0 comments on commit d9e6169

Please sign in to comment.