score:0

The short guide.

1. Use `stack` for the original data set.
2. Use special settings of D3 `scale` to create a second data set with logarithmic values.
3. Use `stack` again for the resulting set.
``````// Original linear data
var linData = [
[
{ x: 0, y:     0.1 },
{ x: 1, y:     1.0 },
{ x: 2, y:   100.0 },
{ x: 3, y: 10000.0 }
],
[
{ x: 0, y:     0.2 },
{ x: 1, y:     2.0 },
{ x: 2, y:   200.0 },
{ x: 3, y: 20000.0 }
],
[
{ x: 0, y:     0.3 },
{ x: 1, y:     3.0 },
{ x: 2, y:   300.0 },
{ x: 3, y: 30000.0 }
]
];

// Calculating y0 for linear data
var stack = d3.layout.stack();
stack(linData);

// Setting conversion values from linear to logarithmic without scaling
var yScaleLog = d3.scale.log()
.domain([0.01,
d3.max(linData, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})
])
.range([0,
d3.max(linData, function(d) {
return d3.max(d, function(d) {
return d.y0 + d.y;
});
})
]);

// Creating new set of data with logarithmized values
var logData = [];
for (var i = 0; i < linData.length; i++) {
logData[i] = [];
for (var j = 0; j < linData[i].length; j++) {
logData[i][j] = {
x: linData[i][j].x,
y: yScaleLog(linData[i][j].y)
};
}
}

// Calculating y0 for logarithmic data
stack(logData);
``````

Full code: http://jsfiddle.net/romanshamin/5vF6a/2/

score:1

I think it would be helpful for you to start out with a basic (non-stacked) bar chart with a logarithmic scale --

You will want to give your scale representation a name, such as:

``````var myscale = d3.scale.log().domain([minNum,maxNum]).range([height,0]);
``````

Then use this scale later to change to screen space, for example:

``````.attr("height", function(d) {return myscale(d);})
``````

Here is a basic example for you to look over: http://jsfiddle.net/jsl6906/qAHC2/10/

score:2

I ran into this super old thread, here's info on why a log scale almost never makes sense for stacked bars, and rarely for regular bar charts or area charts (ie. charts with shapes that have a base)