Creating a series of neighboring rectangles with D3 that unintentionally produce a distracting shimmering effect

Question

Creating a series of neighboring rectangles with D3 that unintentionally produce a distracting shimmering effect

I've created a musical waveform using D3 by positioning rectangles next to each other. Check out the code here: http://jsfiddle.net/s4dML/

var data = [ 0.0534973, /* ...lots and lots of data... */ 0.290771];
data = data.filter(function(datum, index){
    return index % 3 == 0;
});

var width      = 340,
    height     = 70,
    svg        = d3
        .select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height);

svg
    .selectAll('rect')
    .data(data.map(function(datum){
        return (datum * height)/2;
    }))
    // .data(dataset)
    .enter()
    .append('rect')
    .attr('x', function(d, i){
        return i * (width / data.length);
    })
    .attr('y', function(d){
        return (height /2) - d ;
    })
    .attr('width', function(d, i){
        return width / data.length;
    })
    .attr('height', function(d){
        return d*2;
    })
    .attr('fill', 'teal');

Can anyone explain why my waveform isn't a uniform color as I expected? It seems to have a shimmering effect which may be intentional, but I'd like to understand how it happened and how to remove it if needed.

javascript d3.js

Answer 1

Answer №1

When dealing with SVG rendering, or any type of vector graphics rendering, it's important to consider how shapes overlap within a pixel. For example, if two rectangles meet 40% into a pixel, the first rectangle will cover the pixel with 40% opacity and the second with 60% opacity. This results in the pixel only being 76% colored, even though it is technically fully covered by shapes.

To address this issue, one solution is to create a single <path> object that outlines the top and bottom edges without leaving any gaps between shapes.

While I am not very familiar with D3, a potential fix using regular JavaScript could involve defining a path that traces out the shape:

var path = "M 0," + (height / 2);

for(var i = 0; i < data.length; i++) {
  var x = (i + 1) * (width / data.length);
  var y = height / 2 - (data[i] * height)/2;
  path += " V " + y + " H " + x;
}

for(var i = data.length - 1; i >= 0; i--) {
  var x = i * (width / data.length);
  var y = height / 2 + (data[i] * height)/2;
  path += " V " + y + " H " + x;
}

path += " Z";

Answer 2

When dealing with SVG rendering, or any type of vector graphics rendering, it's important to consider how shapes overlap within a pixel. For example, if two rectangles meet 40% into a pixel, the first rectangle will cover the pixel with 40% opacity and the second with 60% opacity. This results in the pixel only being 76% colored, even though it is technically fully covered by shapes.

To address this issue, one solution is to create a single <path> object that outlines the top and bottom edges without leaving any gaps between shapes.

While I am not very familiar with D3, a potential fix using regular JavaScript could involve defining a path that traces out the shape:

var path = "M 0," + (height / 2);

for(var i = 0; i < data.length; i++) {
  var x = (i + 1) * (width / data.length);
  var y = height / 2 - (data[i] * height)/2;
  path += " V " + y + " H " + x;
}

for(var i = data.length - 1; i >= 0; i--) {
  var x = i * (width / data.length);
  var y = height / 2 + (data[i] * height)/2;
  path += " V " + y + " H " + x;
}

path += " Z";

Answer 3

Answer №2

Russell has provided a valuable solution, although it may result in a lengthy path. However, this issue should not pose significant challenges.

I recently faced a similar issue while trying to create a bar chart with approximately 500 data points using very slim bars. The benefit of using thin bars is the ease of implementing a mouseover effect to highlight individual bars. In such scenarios, it is advisable to use integer values for the widths and x positions.

In your case, adjusting the width and interval to 1 can effectively resolve the problem, albeit making it slightly shorter by about 10 percent:

http://jsfiddle.net/s4dML/1/

.attr('x', function(d, i){
    return i;// * (width / data.length);
})
.attr('y', function(d){
    return (height /2) - d ;
})
.attr('width', function(d, i){
    return 1;
})

It's important to note that this might not be a scalable solution—it largely depends on the specific requirements of your widget. I have included a mouseover feature in the example above for demonstration purposes.

Answer 4

Russell has provided a valuable solution, although it may result in a lengthy path. However, this issue should not pose significant challenges.

I recently faced a similar issue while trying to create a bar chart with approximately 500 data points using very slim bars. The benefit of using thin bars is the ease of implementing a mouseover effect to highlight individual bars. In such scenarios, it is advisable to use integer values for the widths and x positions.

In your case, adjusting the width and interval to 1 can effectively resolve the problem, albeit making it slightly shorter by about 10 percent:

http://jsfiddle.net/s4dML/1/

.attr('x', function(d, i){
    return i;// * (width / data.length);
})
.attr('y', function(d){
    return (height /2) - d ;
})
.attr('width', function(d, i){
    return 1;
})

It's important to note that this might not be a scalable solution—it largely depends on the specific requirements of your widget. I have included a mouseover feature in the example above for demonstration purposes.

Creating a series of neighboring rectangles with D3 that unintentionally produce a distracting shimmering effect

Answer №1

Answer №2

Similar questions

Executing the beforeRouteLeave navigation guard on a vue component for testing purposes

When an `angularjs select` is used with a filter, the first line may appear empty at first. However

How to assign a preset value to a text area in AngularJS

Serve up a 400 error response via the express server when hitting a

Node.js does not allow for the usage of `.on` to monitor events until the client has been

Basic PHP code converted into a JavaScript function for an onSubmit event within an HTML form

Use multer-ftp to change the name of a file

The Response.Write function is not functioning properly in the production environment

Obtaining a file using capybara independently of rails

What is the best way to execute NPM commands within the terminal of Visual Studio Code?

What is the reason behind shadow dom concealing HTML elements when viewed in inspect mode?

Is it better to throw an exception before doing any filtering?

Attempting to incorporate icons into a Material UI table design

How to display content in separate divs using jQuery hover functionality

Stopping the execution of jQuery().load()

Issue with FusionCharts rendering correctly arises when the <base> tag is present in the HTML head section

ReactJS experiencing issue with the functionality of the all-the-cities library

Tips for minimizing padding in X-Range graphs

Perform a JSON query using JavaScript

Initiate a click on a radio button while also retaining the selected option when the page is