Skip to content

Commit

Permalink
adding selectors
Browse files Browse the repository at this point in the history
  • Loading branch information
@appoose
appoose committed Nov 16, 2023
1 parent 4389288 commit 2facfc0
Showing 1 changed file with 82 additions and 35 deletions.
117 changes: 82 additions & 35 deletions index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -1189,26 +1189,40 @@ <h2 id="benchmark" class="">Benchmark</h2>
var uniqueMethods = [...new Set(data.map(item => item.method))];

// Create nbits selector
var nbitsSelector = d3.select("#my_dataviz")
.append("select")
.attr("id", "nbits-selector");
nbitsSelector.append("option").text("All").attr("value", "all").property("selected", true);
var nbitsDiv = d3.select("#my_dataviz").append("div").attr("id", "nbits-checkboxes")
.style("border", "solid 1px black")
.style("padding", "5px")
.style("margin-bottom", "5px")
.style("margin-top", "5px")
.style("display", "inline-block"); // Make it a block-level element
nbitsDiv.append("label").text("Nbits: ").style("font-weight", "bold");
uniqueNbits.forEach(function (nbits) {
nbitsSelector.append("option").text(nbits).attr("value", nbits);
nbitsDiv.append("input")
.attr("type", "checkbox")
.attr("value", nbits)
.attr("checked", true)
.on("change", updatePlot);
nbitsDiv.append("label").text(nbits).style("margin-right", "10px");
});

// Create method selector
var methodSelector = d3.select("#my_dataviz")
.append("select")
.attr("id", "method-selector");
methodSelector.append("option").text("All").attr("value", "all").property("selected", true);
// Create div for method checkboxes
var methodDiv = d3.select("#my_dataviz").append("div").attr("id", "method-checkboxes")
.style("border", "solid 1px black")
.style("padding", "5px")
.style("display", "inline-block"); // Make it a block-level element
methodDiv.append("label").text("Method: ").style("font-weight", "bold");
uniqueMethods.forEach(function (method) {
methodSelector.append("option").text(method).attr("value", method);
methodDiv.append("input")
.attr("type", "checkbox")
.attr("value", method)
.attr("checked", true)
.on("change", updatePlot);
methodDiv.append("label").text(method).style("margin-right", "10px");
});

// Event Listeners for the Selectors
nbitsSelector.on('change', updatePlot);
methodSelector.on('change', updatePlot);
// nbitsSelector.on('change', updatePlot);
// methodSelector.on('change', updatePlot);

// Add X axis
var x = d3.scaleLinear()
Expand All @@ -1228,11 +1242,11 @@ <h2 id="benchmark" class="">Benchmark</h2>
// Add a scale for bubble size
var z = d3.scaleLinear()
.domain([2, 16])
.range([3, 16]);
.range([2, 16]);


var _methods = ["FP16", "BNB", "GPTQ", "AWQ", "HQQ"]
var _colors = ["#444444", "#3d85c6", "#f44336", "#ce7e00", "#8fce00"]
var _colors = ["#777777", "#3d85c6", "#f44336", "#ce7e00", "#8fce00"]
// Add a scale for bubble color
var myColor = d3.scaleOrdinal()
.domain(_methods)
Expand All @@ -1244,34 +1258,68 @@ <h2 id="benchmark" class="">Benchmark</h2>
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.style("background-color", "black")
.style("border-radius", "5px")
.style("position", "absolute") // Position absolute for the tooltip
.style("background-color", "white")
.style("border", "solid")
.style("border-width", "1px")
.style("border-radius", "2px")
.style("padding", "10px")
.style("color", "white")
.style("color", "black")
.style("pointer-events", "none"); // To prevent mouse events on the tooltip itself

// var tooltip = d3.select("#my_dataviz")
// .append("div")
// .style("opacity", 0)
// .attr("class", "tooltip")
// .style("background-color", "#777777")
// .style("border-radius", "5px")
// .style("padding", "10px")
// .style("color", "white")

// -2- Create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
// -2- Create 3 functions to show / update (when mouse move but stay on same circle) / hide the tooltip
var showTooltip = function (d) {
tooltip
.transition()
.duration(200)
tooltip
.style("opacity", 1)
.style("opacity", 0.6)
.html(d.method_detail)
.style("left", (d3.mouse(this)[0] + 30) + "px")
.style("top", (d3.mouse(this)[1] + 30) + "px")
.style("left", (d3.event.pageX + 10) + "px") // Position tooltip to the right of the mouse
.style("top", (d3.event.pageY + 10) + "px"); // Position tooltip below the mouse
}
var moveTooltip = function (d) {
tooltip
.style("left", (d3.mouse(this)[0] + 30) + "px")
.style("top", (d3.mouse(this)[1] + 30) + "px")
.style("left", (d3.event.pageX + 10) + "px")
.style("top", (d3.event.pageY + 10) + "px");
}
var hideTooltip = function (d) {
tooltip
.transition()
.duration(200)
.style("opacity", 0)
.style("opacity", 0);
}

// var showTooltip = function (d) {
// tooltip
// .transition()
// .duration(200)
// tooltip
// .style("opacity", 0.6)
// .html(d.method_detail)
// .style("left", (d3.mouse(this)[0] + 30) + "px")
// .style("top", (d3.mouse(this)[1] + 30) + "px")
// }
// var moveTooltip = function (d) {
// tooltip
// .style("left", (d3.mouse(this)[0] + 30) + "px")
// .style("top", (d3.mouse(this)[1] + 30) + "px")
// }
// var hideTooltip = function (d) {
// tooltip
// .transition()
// .duration(200)
// .style("opacity", 0)
// }

//Axis
svg.append("text")
Expand Down Expand Up @@ -1333,18 +1381,17 @@ <h2 id="benchmark" class="">Benchmark</h2>
.attr("text-anchor", "left")
.style("alignment-baseline", "right")

function updatePlot() {
var selectedNbits = d3.select("#nbits-selector").property('value');
var selectedMethod = d3.select("#method-selector").property('value');
function updatePlot() {
var selectedNbits = Array.from(document.querySelectorAll('#nbits-checkboxes input:checked')).map(d => d.value);
var selectedMethods = Array.from(document.querySelectorAll('#method-checkboxes input:checked')).map(d => d.value);

svg.selectAll(".bubbles")
.style('display', function(d) {
return (selectedNbits === 'all' || d.nbits === selectedNbits) &&
(selectedMethod === 'all' || d.method === selectedMethod) ? null : 'none';
});
}
svg.selectAll(".bubbles")
.style('display', function (d) {
return selectedNbits.includes(d.nbits) && selectedMethods.includes(d.method) ? null : 'none';
});
}

})
});

</script>

Expand Down

0 comments on commit 2facfc0

Please sign in to comment.