Circle Bar Chart

circle-bar-chart.markdown

Circle Bar Chart

Animated circle bar chart created with D3.

A Pen by Kamalabot on CodePen.

License.

index.html

<svg version="1.1"
	 xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:a="http://ns.adobe.com/AdobeSVGViewerExtensions/3.0/"
	 x="0px" y="0px" width="724px" height="400px"
	 overflow="visible" xml:space="preserve">
    
    <g id="circleBarCharts">
        
        <!-- Web Circle Bar Chart -->
        <g id="circleBar-web-group" transform="translate(0,0)">
          <image id="circleBar-web-icon" opacity="0" x="166" y="112" overflow="visible" width="98" height="77" xlink:href="http://www.frank-designs.com/images/icon_web.png" />
            <text id="circleBar-web-text" opacity="0" x="200" y="143">WEB</text>
            <g id="circleBar-web-chart" transform="translate(215,150)"></g>
            <clippath id="circleBar-web-clipPath">
                <rect id="circleBar-web-clipLabels" x="205" y="215" width="180" height="0"></rect>
            </clippath>
            <g id="circleBar-web-legend" clip-path="url(#circleBar-web-clipPath)">
                <text id="circleBar-web-values" transform="translate(222,225)"></text>
                <text id="circleBar-web-labels" transform="translate(277,225)"></text>
            </g>
        </g>
        <!-- END: Web Circle Bar Chart -->
    
        <!-- Mobile Circle Bar Chart -->
        <g id="circleBar-mobile-group" transform="translate(362,0)">
            <image id="circleBar-mobile-icon" opacity="0" x="195" y="112" overflow="visible" width="40" height="77" xlink:href="http://www.frank-designs.com/images/icon_mobile.png" />
            <text id="circleBar-mobile-text" opacity="0" x="187" y="155">MOBILE</text>
            <g id="circleBar-mobile-chart" transform="translate(215,150)"></g>
            <clippath id="circleBar-mobile-clipPath">
                <rect id="circleBar-mobile-clipLabels" x="205" y="215" width="150" height="0"></rect>
            </clippath>
            <g id="circleBar-mobile-legend" clip-path="url(#circleBar-mobile-clipPath)">
                <text id="circleBar-mobile-values" transform="translate(222,225)"></text>
                <text id="circleBar-mobile-labels" transform="translate(277,225)"></text>
            </g>
        </g>
        <!-- END: Mobile Circle Bar Chart -->
    </g>
	 
</svg>

script.js

var chartData = {
    "barCircleMobile":[
        {"index":0.3, "value":17436920, "fill":"#231F20", "label":"WebMd Health"},
        {"index":0.4, "value":10884799, "fill":"#494551", "label":"Livestrong.com"},
        {"index":0.5, "value":10257432, "fill":"#564965", "label":"Everyday Health"},
        {"index":0.6, "value":6110024,  "fill":"#574270", "label":"About.com"},
        {"index":0.7, "value":3895612,  "fill":"#4D2D77", "label":"Drugs.com"},
        {"index":0.8, "value":3414585,  "fill":"#684E88", "label":"Alliance Health"},
        {"index":0.9, "value":3099372,  "fill":"#846F9D", "label":"Lifescript.com"},
        {"index":1,   "value":2897520,  "fill":"#A494B7", "label":"Health.com"},
        {"index":1.1, "value":2772679,  "fill":"#CBC3D6", "label":"Health Grades"},
        {"index":1.2, "value":2636126,  "fill":"#F1EFF4", "label":"Healthline"}
    ],
    "barCircleWeb":[
        {"index":0.3, "value":31588490, "fill":"#231F20", "label":"WebMD Health"},
        {"index":0.4, "value":26260662, "fill":"#403437", "label":"Everyday Health"},
        {"index":0.5, "value":24263463, "fill":"#53363C", "label":"Livestrong.com"},
        {"index":0.6, "value":12795112, "fill":"#5E2C3A", "label":"About.com Health Section"},
        {"index":0.7, "value":11959167, "fill":"#660E34", "label":"Healthline"},
        {"index":0.8, "value":10408917, "fill":"#7D3A4D", "label":"HealthGrades"},
        {"index":0.9, "value":10317462, "fill":"#96606B", "label":"Yahoo! Health"},
        {"index":1,   "value":9765589,  "fill":"#B28A91", "label":"Lifescript.com"},
        {"index":1.1, "value":7734964,  "fill":"#D3BCBF", "label":"Health.com"},
        {"index":1.2, "value":7504000 , "fill":"#EDE4E5", "label":"Drugs.com"}
    ]
};

function drawBarCircleChart(data,target,values,labels){
    var w = 362,
        h = 362,
        size = data[0].value * 1.15,
        radius = 200,
        sectorWidth = .1,
        radScale = 25,
        sectorScale = 1.45,
        target = d3.select(target),
        valueText = d3.select(values),
        labelText = d3.select(labels);


    var arc = d3.svg.arc()
        .innerRadius(function(d,i){return (d.index/sectorScale) * radius + radScale; })
        .outerRadius(function(d,i){return ((d.index/sectorScale) + (sectorWidth/sectorScale)) * radius + radScale; })
        .startAngle(Math.PI)
        .endAngle(function(d) { return Math.PI + (d.value / size) * 2 * Math.PI; });
    
    var path = target.selectAll("path")
        .data(data);

    //TODO: seperate color and index from data object, make it a pain to update object order
    path.enter().append("svg:path")
        .attr("fill",function(d,i){return d.fill})
        .attr("stroke","#D1D3D4")
        .transition()
        .ease("elastic")
        .duration(1000)
        .delay(function(d,i){return i*100})
        .attrTween("d", arcTween);
        
    valueText.selectAll("tspan").data(data).enter()
        .append("tspan")
        .attr({
            x:50,
            y:function(d,i){return i*14},       
            "text-anchor":"end"
        })
        .text(function(d,i){return data[i].value});
    
    labelText.selectAll("tspan").data(data).enter()
        .append("tspan")
        .attr({
            x:0,
            y:function(d,i){return i*14}
        })
        .text(function(d,i){return data[i].label});

    function arcTween(b) {
        var i = d3.interpolate({value: 0}, b);
        return function(t) {
            return arc(i(t));
        };
    }
}

// Animation Queue
setTimeout(function(){drawBarCircleChart(chartData.barCircleWeb,"#circleBar-web-chart","#circleBar-web-values","#circleBar-web-labels")},500);
setTimeout(function(){drawBarCircleChart(chartData.barCircleMobile,"#circleBar-mobile-chart","#circleBar-mobile-values","#circleBar-mobile-labels")},800);

d3.select("#circleBar-web-icon")
    .transition()
    .delay(500)
    .duration(500)
    .attr("opacity","1");
d3.select("#circleBar-web-text")
    .transition()
    .delay(750)
    .duration(500)
    .attr("opacity","1");

d3.select("#circleBar-web-clipLabels")
    .transition()
    .delay(600)
    .duration(1250)
    .attr("height","150");

d3.select("#circleBar-mobile-icon")
    .transition()
    .delay(800)
    .duration(500)
    .attr("opacity","1");
d3.select("#circleBar-mobile-text")
    .transition()
    .delay(1050)
    .duration(500)
    .attr("opacity","1");
d3.select("#circleBar-mobile-clipLabels")
    .transition()
    .delay(900)
    .duration(1250)
    .attr("height","150");

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.2.2/d3.v3.min.js"></script>

style.css

body {
    position: relative;
    margin-left:15px;
    background-color:#eee;
}
#circleBar-web-text,
#circleBar-mobile-text{
    font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    font-size:16px;
    fill:#000;
}
#circleBar-web-labels tspan,
#circleBar-mobile-labels tspan {
    font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    font-size:10px;
    fill:#6D6E71;
}

#circleBar-web-values tspan,
#circleBar-mobile-values tspan {
    font-family: 'FranklinGothic-Book' "Franklin Gothic Medium", "Franklin Gothic", "ITC Franklin Gothic", Arial, sans-serif;
    font-size: 9px;
    font-weight:bold;
    fill:#000;
}
#circleBar-web-values tspan {
    fill: #7D3A4D;
}
#circleBar-mobile-values tspan {
    fill: #684E88;
}