pie with CSS

DEMO is here: /abernier/4961058/example/

Explanation here: http://stackoverflow.com/questions/2280127/css-pie-charts#answer-15015424

INSTALL

client-side

<link rel="stylesheet" href="https://gist.githubusercontent.com/abernier/4961058/raw/index.css">

<script src="http://code.jquery.com/jquery-latest.js"></script>
<script src="https://gist.githubusercontent.com/abernier/4961058/raw/index.js"></script>
<script>
var mypie = new Pacss('#mypie');
</script>

server-side

npm install https://gist.github.com/abernier/4961058/download

then simply:

var pacss = require('pacss');
new Pacss('#mypie')

<!DOCTYPE html>
<html>
<head>
    <meta charset=utf-8>
    <meta name="viewport" content="width=device-width,minimum-scale=1,maximum-scale=1,initial-scale=1">
    <title></title>
    <link rel="stylesheet" href="index.css">
    <style>
    @font-face {
    font-family: 'pacfontregular';
        src: url('pac-font-webfont.eot');
        src: url('pac-font-webfont.eot?#iefix') format('embedded-opentype'),
             url('pac-font-webfont.woff') format('woff'),
             url('pac-font-webfont.ttf') format('truetype'),
             url('pac-font-webfont.svg#pacfontregular') format('svg');
        font-weight: normal;
        font-style: normal;

}
    body {width:320px; margin:0 auto;background:#1919A9; text-align:center; color:white; text-shadow:1px 1px 1px black; font-size:200%;}

.pacss.big:after,
    .pacss:before {background:#FFFF00;}

.dots:before,
    .dots:after {content:"∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ∙ ";}

h1 {font-family:"pacfontregular", sans-serif; margin-bottom:0;}
    .tagline {font-size:50%; font-family:"Helvetica Neue", Helvetica, Arial, "Lucida Grande", sans-serif;}

.tagline {overflow:hidden; margin-top:.5em;}
    .tagline em {position:relative;}
    .tagline em:before,
    .tagline em:after {content:"";display:block;width:100%;border-top:1px solid; position:absolute; top:50%;left:100%;}
    .tagline em:after {left:auto;right:100%;}
    </style>
</head>
<body>

<h1>PAC0SS</h1>
    <p class="tagline"><em>Pie charts with CSS</em></p>

<p>see the <a href="minimal.html">minimal example</a> and the <a href="https://gist.github.com/abernier/4961058#file-README-md">README</a></p>

function midrotate(el, val) {
        $(el).css({transform: 'rotate(' + (-val/2 - 90) + 'deg)'});
    }

var mypie1 = new Pacss('#pie1', {val: $input.val()});
    midrotate(mypie1.el, $input.val());

$input.change(function (e) {
        var val = $input.val();

mypie1.val = val;
        mypie1.paint();

midrotate(mypie1.el, val);
    });
    </script>

ga('create', 'UA-13126287-1', 'abernier.name');
ga('send', 'pageview');
</script>

</body>
</html>

Modified http://code.jquery.com/jquery-latest.js to a secure url

https://code.jquery.com/jquery-latest.js