round scaleBand might collapse

Open
  • Is something wrong?
#242 0 comments 0 reactions 0 assignees View on GitHub

@Fil is already working on this.

Since Mar 31, 2021.

  • #243 by @Fil — open

Assessment

Difficulty
4/5
Estimated time
3-5 days
Newbie friendliness
25/100
Issue type
Bug
Clarity
Mostly clear
Activity status
Stale
Tech stack
javascript
Domain
data-visualization

Research direction

Start by reading the scaleBand implementation and its tests in d3-scale; the issue does not name specific files. Reproduce a domain larger than the range with rounding enabled, then compare approaches that preserve a positive bandwidth. Done means the chosen rounding behavior is covered by tests and no longer collapses all values to one position.

Written by the indexing model from the issue text.

Description

Description of the issue:

When the domain's length is too large for the range, the step of scaleBand is less than 1. The round option will then collapse it, and all the values end up assigned to the same value, with a bandwith = 0.

A solution would be to say that, rather than collapsing, we simply don't round. The bandwidth might become smaller than 1 but it'll still be (strictly) positive. We get maybe fuzzy shapes, but that's better than zero-width.

Another approach would be to say that, in that case, we don't round the step but still round the resulting values. The shapes are never fuzzy, but two consecutive values might overlap, creating maybe a kind of Moiré pattern (that depends on what we do with the results, of course).

A related issue is that if rounding is here because we want the bars of a bar chart to fall precisely on a pixel, the concept is a bit more fuzzy now. On retina screens, this should become a 0.5px rounding of some sort. This might warrant an added option .roundingPrecision(0.5) [with 0.5 = 1/device pixel ratio]?

Dominant language
JavaScript
Stars
1.6k
Forks
288
Avg merge
6h 41m
Merged PRs (30d)
1

Getting set up

This project ships no dev container, Dockerfile or contributing guide, so setting up is up to you: start from its README, and see our first-contribution guide for the general steps.

First steps

  1. Read the whole issue, then the project's contributing guide.
  2. Comment on the issue to say you are picking it up — it saves two people doing the same work.
  3. Fork the repository and make your change on a branch.
  4. Open a pull request that references the issue number.

More from d3/d3-scale

All issues in d3/d3-scale

Similar issues

More JavaScript issues

Get new issues in your inbox

A short digest of beginner-friendly GitHub issues.