Pie Chart Attempt

by jrjacobs24

HTML

<script src="http://modernizr.com/downloads/modernizr-latest.js"></script>
<script src="http://keith-wood.name/js/jquery.svg.js"></script>
<script src="http://keith-wood.name/js/jquery.svgdom.js"></script>
<?xml version="1.0" encoding="utf-8" ?>
<!-- Generator: Adobe Illustrator 16.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
<div id="pieChart">
    <svg version="1.1" id="pie-chart" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px" width="450px" height="396px" viewBox="0 0 450 396" enable-background="new 0 0 450 396" xml:space="preserve">
        <g id="HTML_1_" class="slice">
            <path id="HTML-slice" fill="#E24E26" d="M288.14,5.066l-89.005,184.716l199.975-45.33C384.742,81.076,342.446,31.277,288.14,5.066z
		" />
            <g id="html-text">
                <path id="htmlpt6" fill="#FFFFFF" d="M297.325,50.649l-4.574-20.795l1.203-0.831l17.898,11.597l-2.05,1.415l-13.91-8.933
			l3.513,16.111L297.325,50.649z" />
                <path id="htmlpt5" fill="#FFFFFF"...

CSS

.slice:hover {
    opacity: 0.8;
}
.slice {
    transform-origin: 199.13px, 189.78px;
    -webkit-transform-origin: 199.13px, 189.78px;
    transform: translate(0px, 0px);
    -webkit-transform: translate(0px, 0px);
}
.HTML_1_clicked {
    transform: translate(15px, -12px);
    -webkit-transform: translate(15px, -12px);
}
.Wordpress_clicked {
    transform: translate(18px, 4px);
    -webkit-transform: translate(18px, 4px);
}
.jQuery_clicked {
    transform: translate(-18px, 4px);
    -webkit-transform: translate(-18px, 4px);
}
.java_1_clicked {
    transform: translate(9px, 18px);
    -webkit-transform: translate(9px, 18px);
}
.DW_clicked {
    transform: translate(-15px, -12px);
    -webkit-transform: translate(-15px, -12px);
}
.PS_clicked {
    transform: translate(0px, -18px);
    -webkit-transform: translate(0px, -18px);
}
.CSS_clicked {
    transform: translate(-9px, 18px);
    -webkit-transform: translate(-9px, 18px);
}

JavaScript

$(".slice").click(function () {

    if ($(this).is("#HTML_1_")) {
        $('g').removeClass().addClass('slice');
        $(this).toggleClass("HTML_1_clicked");
    } else if ($(this).is("#Wordpress")) {
        $('g').removeClass().addClass('slice');
        $(this).toggleClass("Wordpress_clicked");
    } else if ($(this).is("#jQuery")) {
        $('g').removeClass().addClass('slice');
        $(this).toggleClass("jQuery_clicked");
    } else if ($(this).is("#java_1_")) {
        $('g').removeClass().addClass('slice');
        $(this).toggleClass("java_1_clicked");
    } else if ($(this).is("#Dreamweaver")) {
        $('g').removeClass().addClass('slice');
        $(this).toggleClass("DW_clicked");
    } else if ($(this).is("#Photoshop")) {
        $('g').removeClass().addClass('slice');
        $(this).toggleClass("PS_clicked");
    } else {
        $('g').removeClass().addClass('slice');
        $(this).toggleClass("CSS_clicked");
    }
});