Vega-lite: Add Stroke Dash Channel

[kanitw]

Add Stroke Dash Channel

• [x] Add channel + update encoding docs
• [x] Add them to relevant marks
• [ ] Add default range + update scale docs
• [ ] Add unit test
• [ ] Test if they really work in the editor

[kanitw]

• [x] strokeDash is a good one to start, but we need good default range.

@willium @mathisonian Any suggestions? I'm sure you two have seen good conventions.

[mathisonian]

I like 4, 3 or 5, 5

[kanitw]

Yeah, but this should be a range, so a collection of strokeDash. :)

Note: @mcorrell suggests us looking at photoshop. It's not pressing though as we don't need this for 2.0.

[mcorrell]

Just as a point of reference (in addition to weird options), word has the following sort of horizontal rules:

Illustrator is a little odder in that it assumes that strokes can be specified by a series of gaps and dash widths:

Illustrator also will also give you the option of being faithful to the dash/gap scheme you specify, or allow it to futz around with the start and end points of dashes such that corners and lines end on dashes rather than spaces (which could make shapes harder to determine).

Different stroke weights and styles are a pretty standard way of encoding a categorical variable on a line chart for cases where you can't use color, so having a channel for it would be useful.

[willium]

yeah. I believe what @mathisonian was specifying (or at least how I interpreted it was)
Dash: 4
gap: 3
I'd opt for perhaps even allowing that level of specificity within the stroke properties with sensible defaults.

[g3o2]

From Edward Tufte's books, one can conclude that too dense gaps vibrate (-> chartjunk, try e.g. [1,1]) and too wide gaps show data where there are none (try e.g. [1, 10]). Too dense or too wide is evaluated both in terms of data resolution and screen resolution. An equal setting for both dash and gap appears to work. Maybe something like [5, 5]?

This page shows a few (not necessarily good) dash patterns in a single graph.

[domoritz]

Here is a great example of what adding a channel involves (in this example tooltip): https://github.com/vega/vega-lite/pull/2132/files.

[kanitw]

Here is a great example of what adding a channel involves (in this example tooltip): https://github.com/vega/vega-lite/pull/2132/files.

Note that tooltip does not use a scale, so for many future channels, this would only provide a slightly incomplete example.

[domoritz]

@kanitw I removed href as I didn't add it as a channel

[kanitw]

@domoritz How did you add it then?

[domoritz]

As a mark property. I admit that it is rather useless as the link has to be the same for every mark but it's a start.

[kanitw]

As a mark property. I admit that it is rather useless as the link has to be the same for every mark but it's a start.

Hmm but I thought adding them as channels probably take only a bit more time, why don't you just do it all together? It's very weird to add them only as mark properties and will only confuse users.

[domoritz]

I added cursor and href mark props for @rdeline but need to focus on some other things now. Let's merge what we have now and I can revisit it next week.

[kanitw]

Another reference example http://sape.inf.usi.ch/quick-reference/ggplot2/linetype

[davidanthoff]

I just ran into needing this when trying to port one of our paper plotting codes from ggplot2 to vega-lite :) My particular use case is that I'd like this to apply to an area mark, i.e. I'd like to use different dash styles for the line that I can turn on for an area mark with "line": true.

Is there still a chance that this might make it into 4.0? That would be awesome!

[domoritz]

We probably won't have the bandwidth for 4.0. However, you can use the revamped patch property of Vega-Embed to customize your lines in Vega. We plan to have more frequent releases after the 4.0 release so 4.1 could be a good target.

[davidanthoff]

Sounds good. I think for this particular paper we'll just stick with ggplot2 then, the patch option sounds interesting but probably too involved for this paper.

[clintonTE]

Just ran into this as well. Would be useful to have this.

[domoritz]

We would be thrilled about a PR for this feature.

[kanitw]

Will be fixed in https://github.com/vega/vega-lite/pull/5860