Funny chart implemented with d3.js and jQuery UI slider widget.

Slide handles near each chart to make it smile.

var smileChart1 = new SmileChart({
    radius : 75,
    value: 100,
    colorTop: "#e0ae57",
    colorBottom: "#efc781",
    color: "black"});
smileChart1.render("smile-chart-1");
smileChart1.setValue(25);
var smileChart2 = new SmileChart({
    radius : 163,
    value: 0,
    bgColor: "#138497"
});

smileChart2.render("smile-chart-2");
smileChart2.setValue(95);

jQuery("#smile-chart-2-slider").slider({
    animate: true,
    range: "min",
    min: 0,
    max: 100,
    value: 0,
    slide: function(event, ui) {
        smileChart2.setValue(ui.value);
    }
}).slider("value", 95);