d3 ToolTip

by rajeshpillai

HTML

<script src="http://mbostock.github.com/d3/d3.js"></script>
<script src="http://onehackoranother.com/projects/jquery/tipsy/javascripts/jquery.tipsy.js"></script>
<link rel="stylesheet" href="http://onehackoranother.com/projects/jquery/tipsy/stylesheets/tipsy.css">
<label id="xs">1,2,3,4,5,6,7,8,9</label>
<label id="ys">1,4,9,16,25,36,49,64,81</label>
<label id="alts">10,20,40,45,50,51,52,53,60</label>
<label id="sets">a,a,a,a,b,b,b,b,b</label>
<div id="here"></div>
<button id="next">Then...</button>
<br><br>
<button id="alt" class="switch gone">Alternatively...</button>
<button id="reg" class="switch">Regularly...</button>

<button id="goaway">NOW!</button>

CSS

.axis path,
.axis line 
{
    fill: none;
    stroke: black;
    shape-rendering: crispEdges;
}

.axis text 
{
    font-family: Sans-Serif;
    font-size: 11px;
}
.gone
{
    width: 100px;
    background-color: #eeeeee;
    font-weight: bold;
    color: #222222;
    border-radius: 5px;
}

JavaScript

var x_data = $('#xs').text().split(',');
var y_data = $('#ys').text().split(',');
var alt_data = $('#alts').text().split(',');
var sets_data = $('#sets').text().split(',');

var alternate = 0;

$('#alt').on("click", function(d) { alternate = 1; });
$('#reg').on("click", function(d) { alternate = 0; }); 

var data = [];

for (i = 0; i < 9; i++)
data.push({
    "x": x_data[i],
    "y": y_data[i],
    "set": sets_data[i],
    "alt": alt_data[i]
});

var datafiltered = data.filter(function(d) {
    return d.set == 'a';
});

var h = 300;
var w = 300;
var margin = 20;

var x = d3.scale.linear().domain([0, d3.max(datafiltered, function (d) {
                if(alternate)
                    return parseInt(d.alt);
                else return parseInt(d.x)}) * 1.1]).range([20, 280]),
    y = d3.scale.linear().domain([100, 0]).range([20, 280]);

var vis = d3.select('#here').append("svg:svg").attr("width", w).attr("height", h);

vis.selectAll("circle").data(datafiltered).enter().append("svg:circle").attr("cx", function(d) {
    if(alternate)
        return x(d.alt);
    else return x(d.x);
}).attr("cy", function(d) {
    return y(d.y)
}).attr("fill", "red").attr("r", 15)
        .on("mouseover", function() {
            d3.select("text").enter().append("text")
                .text(function(d) {return d.x;})
                .attr("x", function(d) {return x(d.x);})
                .attr("y", function (d) {return y(d.y);});
}
    );

    vis.selectAll("text")
        .data(datafiltered)
        .enter().append("text")
        .text(function (d) {return d.x + "," + d.y + "," + d.alt + "," + d.set;})
        .attr("x", function (d) {return x(d.x);})
        .attr("y", function (d) {return y(d.y);})
        .attr("visibility", "hidden");
        //.on("mouseover", function() {d3.select(this).attr("visibility", null);});
  
/*vis.append("svg:line").attr("x1", x(0)).attr("x2", x(w)).attr("y1", y(0)).attr("y2", y(0)).style("stroke", "#000");*/

       var formatNumber =...