Skip to content

Commit

Permalink
add vit d3 graph
Browse files Browse the repository at this point in the history
  • Loading branch information
@mobicham
mobicham committed Nov 21, 2023
1 parent ace3d55 commit 268fd19
Showing 1 changed file with 255 additions and 1 deletion.
256 changes: 255 additions & 1 deletion index.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -2352,7 +2352,261 @@ <h3 id="benchmark_vit" class="">ViT Benchmark</h3>
<p> As we can see, our method produces high-quality quantization models despite not using any calibration data. It outperforms 4-bit bitsandbytes (BNB) by a large margin on zero-shot performance (<b>+3.1%</b> top-1 accuracy with ViT-B-32). For extreme-low bit quantization, our ViT-H-14 quantized to 3-bit outperforms the full-precision ViT-L-14 (<b>+2.4%</b> top-1 zero-shot accuracy), and the 2-bit version outperforms the ViT-32-B full-precision by a large margin (<b>+5.2%</b> top-1 zero-shot accuracy).
</p>

<p> The plot below summarizes the various accuracy numbers into an interactive scatter plot. </p>
<p> The plot below summarizes the various accuracy numbers into an interactive scatter plot. Hover or click on a bubble to display the details. </p>

<meta charset="utf-8">

<!-- Load d3.js -->
<script src="https://d3js.org/d3.v4.js"></script>

<!-- Load color scale -->
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<!-- Create a div where the graph will take place -->
<div id="vit_dataviz"></div>

<!-- A bit of CSS: change stroke color of circle on hover (white -> black) -->
<style>
.bubbles {
stroke-width: 2px;
stroke: white;
}
.bubbles:hover {
stroke: black;
}
</style>

<script>

// set the dimensions and margins of the graph
var margin = { top: 10, right: 20, bottom: 30, left: 50 },
width = 500 - margin.left - margin.right,
height = 420 - margin.top - margin.bottom;

// append the svg object to the body of the page
var svg_vit = d3.select("#vit_dataviz")
.append("svg")
.attr("width", width + margin.left + margin.right)
.attr("height", height + margin.top + margin.bottom)
.append("g")
.attr("transform", "translate(" + margin.left + "," + margin.top + ")");


//Read the data
d3.csv("https://gist.githubusercontent.com/mobicham/be722d63138726f9a56ccbed38ac7894/raw/71fc4e32c8b45c44d324ebfe9dbe3c4d64a7e2da/hqq_vit_data.csv", function (data) {


var uniqueAcc = ["Linear (top-1)", "Linear (top-5)", "0-shot (top-1)", "0-shot (top-5)"];

//Create a container div
var selectorBoxdiv = d3.select("#vit_dataviz").append("div")
.style("margin", "10px")
.style("border", "solid")
.style("background-color", "#fff")
.style("border-width", "1px")
.style("border-radius", "5px")
.style("width", "auto")
.style("display", "inline-block") // Center the div
.style("text-align", "center") // Center the content inside the div


var accDiv = selectorBoxdiv.append("div").attr("id", "acc-selector")
// .style("border", "solid 1px black")
.style("padding", "2px")
.style("background-color", "#fee")
.style("border-radius", "2px")
.style("margin", "4px")
.style("display", "inline-block");
accDiv.append("label").text("Accuracy: ")
.style("font-weight", "bold")
.style("font-size", "10px");

uniqueAcc.forEach(function (acc) {
accDiv.append("input")
.attr("type", "radio")
.attr("name", "accuracyGroup")
.attr("value", acc)
.property("checked", acc === "0-shot (top-1)")
.on("change", updatePlot);
accDiv.append("label").text(acc)
.style("margin-right", "10px")
.style("font-size", "10px");
});


// Add X axis
var x = d3.scaleLinear()
.domain([0, 16])
.range([0, width]);
svg_vit.append("g")
.attr("transform", "translate(0," + height + ")")
.call(d3.axisBottom(x));

// Add Y axis
var y = d3.scaleLinear()
.domain([0, 1.])
.range([height, 0]);
svg_vit.append("g")
.call(d3.axisLeft(y));

// Add a scale for bubble size
var z = d3.scaleLinear()
.domain([6, 6])
.range([6, 6]);

var _method_to_bsize = {"ViT-B-32":5, "ViT-L-14":7, "ViT-H-14":9};
var _methods = ["FP", "BNB", "HQQ"]
var _colors = ["#777777", "#3d85c6", "#8fce00"]
// Add a scale for bubble color
var myColor = d3.scaleOrdinal()
.domain(_methods)
//.range(d3.schemeSet2);
.range(_colors)

// -1- Create a tooltip div that is hidden by default:
var tooltip = d3.select("#vit_dataviz")
.append("div")
.style("opacity", 0)
.attr("class", "tooltip")
.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", "black")
.style("pointer-events", "none"); // To prevent mouse events on the tooltip itself


// -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) {
var content = "<ul>"
+ "<li><strong>Model:</strong> " + d.model + "</li>"
+ "<li><strong>Number of Bits:</strong> " + d.nbits + "</li>"
+ "<li><strong>Type of Quantizer:</strong> " + d.method + "</li>"
+ "<li><strong>Linear (top-1):</strong> " + d.prob_acc_top1 + "</li>"
+ "<li><strong>Linear (top-5):</strong> " + d.prob_acc_top5 + "</li>"
+ "<li><strong>0-shot (top-1):</strong> " + d.zeroshot_acc_top1 + "</li>"
+ "<li><strong>0-shot (top-5):</strong> " + d.zeroshot_acc_top5 + "</li>"
+ "</ul>"
tooltip
.transition()
.duration(200)
tooltip
.style("opacity", 0.6)
.html(content)
.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.event.pageX + 10) + "px")
.style("top", (d3.event.pageY + 10) + "px");
}

var hideTooltip = function (d) {
tooltip
.transition()
.duration(200)
.style("opacity", 0);
}


//Axis
svg_vit.append("text")
.attr("class", "x label")
.attr("text-anchor", "end")
.attr("x", width - width / 2 + 15)
.attr("y", height + 30)
// .style("margin", "10px")
// .style("padding","10px")
.style("font", "12px sans-serif")
.style("font-weight", "bold")
.text("nBits");

svg_vit.append("text")
.attr("class", "y label")
.attr("text-anchor", "end")
.attr("y", -50)
.attr("dy", ".75em")
.attr("x", -height / 2 + 30)
.attr("transform", "rotate(-90)")
.style("font", "12px sans-serif")
.style("font-weight", "bold")
.text("Accuracy");


// Add dots
svg_vit.append('g')
.selectAll("dot")
.data(data)
.enter()
.append("circle")
.attr("class", "bubbles")
.attr("cx", function (d) { return x(d.nbits); })
.attr("cy", function (d) { return y(d.zeroshot_acc_top1); })
.attr("r", function (d) { return _method_to_bsize[d.model]; }) //return z(d.model)
.style("fill", function (d) { return myColor(d.method); })
// -3- Trigger the functions
.on("mouseover", showTooltip)
.on("mousemove", moveTooltip)
.on("mouseleave", hideTooltip)


//Legend
// Add one dot in the legend for each name.
svg_vit.selectAll("legend_dots")
.data(_methods)
.enter()
.append("circle")
.attr("cx", 420 + 10)
.attr("cy", function (d, i) { return i * 15 + 325}) // 100 is where the first dot appears. 25 is the distance between dots
.attr("r", 5)
.style("fill", function (d) { return myColor(d) })


svg_vit.selectAll("legend_dots_labels")
.data(_methods)
.enter()
.append("text")
.attr("x", 420 - 25)
.attr("y", function (d, i) { return i * 15 + 3 + 325}) // 100 is where the first dot appears. 25 is the distance between dots
.style("fill", function (d) { return myColor(d) })
.style("font", "10px sans-serif")
.text(function (d) { return d })
.attr("text-anchor", "left")
.style("alignment-baseline", "right")


function updatePlot() {

var selectedAcc = Array.from(document.querySelectorAll('#acc-selector input:checked')).map(d => d.value);
console.log("Selected Acc:", selectedAcc);

if(selectedAcc=="Linear (top-1)"){
svg_vit.selectAll(".bubbles").data(data).attr("cy", function(d) { return y(d.prob_acc_top1);});
}

if(selectedAcc=="Linear (top-5)"){
svg_vit.selectAll(".bubbles").data(data).attr("cy", function(d) { return y(d.prob_acc_top5);});
}

if(selectedAcc=="0-shot (top-1)"){
svg_vit.selectAll(".bubbles").data(data).attr("cy", function(d) { return y(d.zeroshot_acc_top1);});
}

if(selectedAcc=="0-shot (top-5)"){
svg_vit.selectAll(".bubbles").data(data).attr("cy", function(d) { return y(d.zeroshot_acc_top5);});
}
}


});

</script>



<h2 id="conclusion">Conclusion</h2>
Expand Down

0 comments on commit 268fd19

Please sign in to comment.