tooltio and arcs resizing

ordinal scale

by Igor Cuckovic

CSS

svg text {
    fill: #fff;
    font-family:"Arial";
}
svg .arc {
    stroke: #fff;
    stroke-width: 1px;
}
.nodetext, .tooltip {
    pointer-events: none;
}

div.tooltip {
    position: absolute;
    text-align: left;
    width: 50px;
    height: 15px;
    padding: 2px;
    padding-left: 6px;
    font: 12px sans-serif;
    background: #000;
    border: 0px;
    border-radius: 4px;
    pointer-events: none;
    color: #fff;
}

JavaScript

// cool tooltip

var w = 500,
    h = 500;

var data = [
    [10, "first"],
    [80, "second"],
    [50, "third"],
    [60, "fourth"],
    [30, "fift"],
    [42, "sixth"],
    [27, "seventh"],
    [77, "eight"]
];


var tooltip = {
    element: null,
    init: function() {
        this.element = d3.select("body").append("div").attr("class", "tooltip").style("opacity", 0)
    },
    show: function(t) {
        this.element.html(t).transition().duration(200).style("left", d3.event.pageX + 20 + "px").style("top", d3.event.pageY + "px").style("opacity", .9)
    },
    move: function() {
        this.element.transition().duration(30).ease("linear").style("left", d3.event.pageX + 20 + "px").style("top", d3.event.pageY + "px").style("opacity", .9)
    },
    hide: function() {
        this.element.transition().duration(500).style("opacity", 0)
    }};
//_.bindAll(tooltip);
tooltip.init();



/*
var color = d3.scale.ordinal()
            .range(["darkred", "steelblue"]);
*/
// min - max calculations
var max = d3.max(data, function (array) {
    return d3.max(array.filter(function (value) {
        return typeof value === "number";
    }));
});

var min = d3.min(data, function (array) {
    return d3.min(array.filter(function (value) {
        return typeof value === "number";
    }));
});

//console.log(min,max);


var color = d3.scale.linear()
    .domain([min, max])
    .range(["darkred", "steelblue"]);


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


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

var circle = group.append("circle")
    .attr({
        "cx": 0,
        "cy": 0,
        "r": 155,
        "fill": "none",
        "stroke": "#000",
        "stroke-width": 2
    });

var r = 150;
var r2 = 155;
var innerR = 100;
var p = Math.PI * 2;

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

var arc2 = d3.svg.arc()
    .innerRadius(innerR)
    .outerRadius(r2);

var pie...