Log scale on D3.js

Question

I'm trying to use a scale to draw an audio waveform. The linear scale is too "dynamic", and I'd like to apply a compression on the peaks. I thought about a log scale, although I really don't know how to use it in D3.

Linear scale:

  // Scale for time xScale = d3.scaleLinear() .domain([0,samples_length]).range([0,width]); // Scale for samples yScale = d3.scaleLinear() .domain([-1,0,1]).range([0,height]); let area = d3.area() .x(function(d, i){return xScale(i)}) .y0(function(d){return yScale(d); }) .y1(function(d){return height-yScale(d); }); let waveform = d3.select("#waveform") .append("svg") .attr("width", width) .attr("height", height); waveform.append("path") .attr("d", area(samples)) .attr("fill", "steelblue"); 

The linear scale gives me:

And I'd like something more like this:

I also tried the Symlog scale:

  // Scale for time xScale = d3.scaleSymlog() .domain([0,samples_length]).range([0,width]); // Scale for samples yScale = d3.scaleSymlog() .domain([-1,0,1]).range([0,height]); let area = d3.area() .x(function(d, i){return xScale(i)}) .y0(function(d){return yScale(d); }) .y1(function(d){return height-yScale(d); }); let waveform = d3.select("#waveform") .append("svg") .attr("width", width) .attr("height", height); waveform.append("path") .attr("d", area(samples)) .attr("fill", "steelblue"); } 

And the Symlog gives me:

Any suggestion?

Answer 1

I managed to fix the dynamic plot by simply reducing the scale range:

  // Scale for samples yScale = d3.scaleSymlog() .domain([-1,0,1]) .range([0,height/4]) .constant(-1); 

The final result looks more pleasant: