We had a remarkably similar situation recently, and here's how we approached it.
- Don't over-complicate the presentation of the big, important score.
- Let users know that some kind of scoring mechanism exists. (You don't need to explain it all right away!)
- Let interested users find out how the scoring works if they want.
- When concepts get tricky, be clear and explicit when explaining them
Here's a bit of the actual UI we ended up with. The gray bar below is a composite score based on the 6 factors, which are all weighted differently.
Clicking the pills above the graph displays the value of each component:
The Score Weighting area lets the user know there is an underlying system at work, and clicking it opens an explicit explanation of how it works:
We explored lots of all-in-one stacked-bar options, but found they really confused the first impression of the calculated score, and didn't readily convey how the calculations actually worked.
I also think you were right to be skeptical of using boxes where height and width correspond to the sub-scores and their weights. It's unconventional, so it would require explanation of it's own, and it would be very hard to show how that adds up to the overall score. Reducing it to a one-dimensional stacked-bar is easier to read and more conventional.
But, of course, the one-dimensional bar for each component doesn't tell you the story of how the weighting worked.
Ultimately, we concluded that explaining how the sub-scores and the weighting worked to form the final score was too complicated to explain in some subtle visual way, and made it an explicit explanatory diagram of it's own.
p.s. If you have the screen real estate, you might also consider showing the component bars immediately underneath the composite. We made that require an additional "drill-in" interaction to allow us to show many composite bars at once (which isn't visible in the screenshots here).