How to visualize many weighted scores contributing to a final score?

I have a couple of (only very slightly technical) users that require a way to visualize a "scorecard". They have different factors that are scored. Each factor has a weight associated with it and the scores are multiplied with their weights and summed up into a final score. They like to look at the details for each factor but at the same time keep in mind its relative weighting to other factors.

How best to visualize something like that?

One proposal is making score the width and weight the height of a bar. Such as the image below. But that takes up a lot of screen space and looks really ugly (big green blocks!).

My concern is how the human mind interprets volumes vs relative heights etc.

Bars with variable widths and height

And then maybe add a summary image such as below, where the multiplied score x weight is then put in a stacked bar chart.

StackedBarChart