Donout/pie chart

by Igor Cuckovic

CSS

svg text {
    fill: #000;
    font-family:"Arial";
    pointer-events: none;
}
svg .arc {
    stroke: #000;
    stroke-width: 1px;
    cursor: pointer;
}

JavaScript

var w = 500,
    h = 500;

var colorArray = ['red', 'yellow', 'green', 'black', 'blue', "#FFFDDD"];

var data = [
    [60, "first"],
    [60, "second"],
    [60, "third"],
    [60, "fourth"],
    [60, "fift"],
    [60, "sixth"]
];



var canvas = d3.select("body").append("svg")
    .attr("width", w)
    .attr("height", h);


var group = canvas.append("g")
    .attr("transform", "translate(200, 200)");

var r = 150;
var p = Math.PI * 2;

var arc = d3.svg.arc()
    .innerRadius(0)
    .outerRadius(r);

var pie = d3.layout.pie()
    .startAngle(Math.PI / 2)
    .endAngle(Math.PI * 2 + Math.PI / 2)
.value(function (d) {
    return d[0];
});

canvas.append("text")
        .text("Hello!")
        .attr({
        "x": 450,
            "y": 400,
            "id": "textDesc"

    }).style("text-anchor", "end");


var showText = function (d) {
    d3.select("#textDesc").text("You are now in " + d.data[1] + " segment!");
};

function removeLabel() {
    canvas.selectAll("#textDesc").remove();
}


var arcs = group.selectAll(".arc")
    .data(pie(data))
    .enter()
    .append("g")
    .attr("class", "arc");



arcs.append("path")
    .attr("d", arc)
    .attr("fill", function (d, i) {
    return colorArray[i];
})
    .attr("id", function (d) {
    return d.data[1];
})
    .on("mouseover", function (d) {
    showText(d);
})
    .on("mouseout", function (d, i) {
    d3.select("#textDesc").text("You are now out of segment!");
});