Piecewise scales can result in tick collisions

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

Nobody has claimed this yet.

Assessment

Difficulty
3/5
Estimated time
1-2 days
Newbie friendliness
35/100
Issue type
Feature
Clarity
Mostly clear
Activity status
Stale
Tech stack
d3, javascript
Domain
data-visualization

Research direction

Start by reading the piecewise scale and axis behavior in d3-scale, then reproduce the example with domain [0, 50, 75, 100] and range [0, 400, 400, 600]. The issue asks whether scales should filter colliding ticks, but does not settle the expected behavior; define that behavior and add a regression test showing the axis ticks no longer pile up.

Written by the indexing model from the issue text.

Description

It's relatively common to see a scale that has a 'break' in it, allowing you to render outliers. You can achieve this effect with a piecewise scale that collapses a section of the domain.

For example, this will remove the section of the scale from 50-75:

svg.append('g')
    .attr('transform', 'translate(0, 60)')
    .call(sel => {
        const scale = d3
            .scaleLinear()
            .domain([0, 50, 75, 100])
            .range([0, 400, 400, 600]);

        d3.axisBottom(scale)(sel);
    });

However, when rendered with an axis, the ticks pile up as follows:

image

Should scales filter ticks if they collide?

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.