D3 Examples - pie with CSS

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>

xxxxxxxxxx
 
<!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 class="dots">
        <span id="pie1" class="pie"></span>
    </p>
​
​
    <input type="range" name="val" value="270" min="0" max="360">
​
    <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>
​
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="index.js"></script>
    <script>
    var $input = $('input[name="val"]');
​
    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>
​
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','//www.google-analytics.com/analytics.js','ga');
​
ga('create', 'UA-13126287-1', 'abernier.name');
ga('send', 'pageview');
</script>
​
</body>
</html>
    

pie with CSS

INSTALL

client-side

server-side