Take the 2-minute tour ×

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")
        .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" );

// 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);


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) {
        return xScale(i);
    bar.attr("width", function(d, i) {
        return xScale(i+1) - xScale(i);
share|improve this question

1 Answer 1

up vote 0 down vote accepted

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.

share|improve this answer
thank you for your help! although my code has changed after i posted the question above, your suggestion to compute the width this way got me thinking to calculate width as the difference between the x position of the current bar and the next bar. I will be editing the question above as with my new code and including the code that solved the problem. Thanks! –  Dexter Tan Oct 22 '12 at 20:54
no problem - btw, that is a pretty neat visualization you are working on! –  Superboggly Oct 23 '12 at 0:21
Thanks! I try ;) –  Dexter Tan Oct 23 '12 at 18:26

Your Answer


