D3 fisheye on width on bar chart
- by Dexter Tan
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!
