Converting <li> tags to horizontal responsive barcharts

I am writing my first jQuery plugin that converts li tags to horizontal responsive barcharts. I am looking for some feedback and suggestions regarding the implementation.



(function($) {
$.fn.barcharts = function(options) {

// Establish default settings
var defaults = {
animationSpeed : 500
};

// Merge
var options = $.extend({}, defaults, options);

// Gather
var $targets = $(this).find('.bar-group-item');

// Render
$.each($targets, function() {

var $li = $(this),
newWidth = $li.data('bar-value')/100*$li.width();

// Construct the item to be displayed
var $div = $('', {
width: 0,
text: $li.text()
});

// Remove previous contents
$li.empty();

// Append to current item
$div.appendTo($li);

// Reveal
$div.animate({width: newWidth}, options.animationSpeed);

});
};

}(jQuery));
.bar-group {
list-style: none;
padding-left:0;
}

.bar-group-item {
width: 100%;
background-color: #34495e;
color: #ffffff;
margin: 5px 0 5px 0;
}

.bar-group-item div {
background-color: #2980b9;
white-space: nowrap;
}


England
Spain
Zimbabwe

Lakers
Heat
Raptors

Los Angeles
Miami
Toronto


$(document).ready(function() {
$('.bar-group').barcharts();
});


I'd recommend you to get rid of class selector here

// Gather
var $targets = $(this).find('.bar-group-item');

because you need you're HTML structure to use specific classes. You'd better find them by finding elements with data attributes inside plugin's target element.

Scalability!

StackExchange Code Review Q#55004, answer score: 3