Converting  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 = $('&lt;div&gt;', {     
                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;
}
&lt;script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"&gt;&lt;/script&gt;
&lt;ul class="bar-group"&gt;
    &lt;li class="bar-group-item" data-bar-value="15"&gt;England&lt;/li&gt;
    &lt;li class="bar-group-item" data-bar-value="25"&gt;Spain&lt;/li&gt;
    &lt;li class="bar-group-item" data-bar-value="85"&gt;Zimbabwe&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="bar-group"&gt;
    &lt;li class="bar-group-item" data-bar-value="32"&gt;Lakers&lt;/li&gt;
    &lt;li class="bar-group-item" data-bar-value="62"&gt;Heat&lt;/li&gt;
    &lt;li class="bar-group-item" data-bar-value="95"&gt;Raptors&lt;/li&gt;
&lt;/ul&gt;
&lt;ul class="bar-group"&gt;
    &lt;li class="bar-group-item" data-bar-value="33"&gt;Los Angeles&lt;/li&gt;
    &lt;li class="bar-group-item" data-bar-value="33"&gt;Miami&lt;/li&gt;
    &lt;li class="bar-group-item" data-bar-value="100"&gt;Toronto&lt;/li&gt;
&lt;/ul&gt;  

&lt;script src="js/vendor/jquery-1.11.0.min.js"&gt;&lt;/script&gt;
&lt;script src="js/plugin.js"&gt;&lt;/script&gt;
&lt;script type="text/javascript"&gt;
    $(document).ready(function() {
        $('.bar-group').barcharts();
    });
&lt;/script&gt;
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!