D3 fisheye on width on bar chart

Posted by Dexter Tan on Stack Overflow See other posts from Stack Overflow or by Dexter Tan
Published on 2012-10-21T16:50:31Z Indexed on 2012/10/21 17:00 UTC
Read the original article Hit count: 252

Filed under:
|
|

i have been trying to create a vertical bar chart with a d3 fisheye cartesian distortion with only the x-axis being distorted.

I have succeeded in distorting the x position of the vertical bars on mouseover with the following code:

var maxMag = d3.max(dataset, function(d) { return d.value[10]; });
var minDate = d3.min(dataset, function(d) { return new Date(d.value[1], d.value[2]-1, d.value[3]).getTime(); });
var maxDate = d3.max(dataset, function(d) { return new Date(d.value[1], d.value[2]-1, d.value[3]).getTime(); });
var yScale = d3.scale.linear().domain([0, maxMag]).range([0, h]);
var xScale = d3.fisheye.scale(d3.scale.linear).domain([minDate, maxDate]).range([0, w]).focus(w/2);

var bar = svg.append("g")
        .attr("class", "bars")
    .selectAll(".bar")
        .data(dataset)
    .enter().append("rect")
        .attr("class", "bar")

        .attr("y", function(d) {
            return h - yScale(d.value[10]);
        })
        .attr("width", w/dataset.length)
        .attr("height", function(d) {
            return yScale(d.value[10]);
        })
        .attr("fill", function(d) {
            return (d.value[10] <= 6? "yellow" : "orange" );
        })
        .call(position);

// Positions the bars based on data.
function position(bar) {
    bar.attr("x", function(d) {
        var date = null;
        if (d.date != null) {
            date = d.date;
        } else {
            date = new Date(d.value[1],0,1);
            if (d.value[2] != null) date.setMonth(d.value[2]-1);
            if (d.value[3] != null) date.setMonth(d.value[3]);
            d.date = date;
        }
        return xScale(date.getTime());
    });
}

svg.on("mousemove", function() {
    var mouse = d3.mouse(this);
    xScale.distortion(2.5).focus(mouse[0]);

    bar.call(position);
});

However at this point, applying fisheye on the width remains a mystery to me. I have tried several methods like using a fisheye scale for width however it does not work as expected.

What i wish to do is to have the width of a bar expand on mouseover, the same way a single vertical bar is singled out on mouseover with the cartesian distortion.

Any clues or help will be much appreciated!

edit: http://dexter.xumx.me to view the visualisation i am talking about for easier understanding!

© Stack Overflow or respective owner

Related posts about d3.js

Related posts about bar-chart