Skip to content

tick option for rule, as in error bars #1891

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Closed
wants to merge 1 commit into from
Closed

Conversation

mbostock
Copy link
Member

@mbostock mbostock commented Oct 12, 2023

image

Plot.plot({
  marks: [
    Plot.barY(alphabet, {x: "letter", y: "frequency", sort: {x: "-y"}, fill: "steelblue"}),
    Plot.ruleX(alphabet, {x: "letter", y1: (d) => d.frequency * 0.9, y2: (d) => d.frequency * 1.1, tick: true}),
    Plot.ruleY([0])
  ]
})

Fixes #1874.

Since the rule is now rendered as a path element instead of a line, there is a lot of churn in the test snapshots despite the result being visually identical.

@mbostock mbostock requested a review from Fil October 12, 2023 04:55
@mbostock
Copy link
Member Author

I also considered doing this as a new marker (tick), but it’s a little harder to control the size of the ticks when using a marker since it scales with the stroke width. The arrow-reverse marker is already pretty close to this, though!

@mbostock mbostock mentioned this pull request Oct 12, 2023
@Fil
Copy link
Contributor

Fil commented Oct 12, 2023

As I mentioned in #1892 I think I prefer the marker version, for this particular use case.

However, the up-side of changing the node type to a PATH is that it allows it to be more malleable. If we did this across the board, not just for rules, we could have rules on maps (#1164), "curvy rects" (for example to create donut charts as rects displayed with a polar projection). Paths are very versatile and could be used to do something unexpected (like, be used to control a textPath, or add a perturbation/disturbance for style effects, or add a flubber transition to another type of shape). Another use case would be "top rounded corners" (#1201). {maybe this comment should be an independent issue}

@mbostock
Copy link
Member Author

the up-side of changing the node type to a PATH is that it allows it to be more malleable

There’s no requirement that a mark always render as the same type of SVG element; it could render as a line sometimes, and a path other times when more expressiveness is required. For example, the dot mark renders as a circle element for the circle symbol and as a path element for other symbols.

I don’t think the implementing SVG element should be the primary consideration here — that’s mostly invisible to the user. Instead, we should decide based on the difference in the two interfaces:

  1. In the path approach: the ticks inherit the rule’s stroke options (stroke, strokeWidth, strokeOpacity, strokeDasharray, strokeDashoffset) and the tick size is specified in (absolute) pixels. This approach applies exclusively to the rule mark.

  2. In the marker approach: the ticks inherit only the stroke of the associated mark, the tick size scales with the strokeWidth of the associated mark, and the other stroke options (strokeWidth, strokeOpacity, strokeDasharray, strokeDashoffset) are not configurable. This approach applies to any mark that supports markers.

I think if we’re happy with the limited configurability of ticks, then (2) seems preferable to me due to the added generality. But we could always add (1) in the future, too.

@mbostock mbostock closed this Oct 30, 2023
@mbostock mbostock deleted the mbostock/error-bar branch October 30, 2023 20:33
@Fil Fil mentioned this pull request Oct 31, 2023
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

Successfully merging this pull request may close these issues.

Error bars
2 participants