Question

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 yScale = d3.scale.linear().domain([0, maxMag]).range([0, h]);
var xScale = d3.fisheye.scale(d3.scale.linear).domain([0, dataset.length]).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, i) {
        return xScale(i);
    });
}

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: changed the method of calculating x position to using index instead of time to prevent large gaps between bars in the chart

solution: Thanks to Superboggly, i have edited the position function as to as follows:

// Positions the bars based on data.
function position(bar) {
    bar.attr("x", function(d, i) {
        return xScale(i);
    });
    bar.attr("width", function(d, i) {
        return xScale(i+1) - xScale(i);
    })
}

Answer 1

Currently your bar width is based on your full width divided by your dataset size correct? What if instead you compute your width based on time, e.g. your full time span divided by dataset size? Then each bar corresponds to a span of time and you can use your “position” function with the start and end of a bar to compute the width.