line halo

[Fil]

An unexpected difficulty was to make it compatible with group aesthetics. I had to pass a flag (in the shape of a counter) to secondary groups. For now I just "walk back to the first element", and don't use the counter per se, because we might want to switch to a real flag that would be absent from the first group—which might be more satisfying?

closes #860

a follow-up could be to add the halo option to other "non-fillable" marks: Plot.link, Plot.arrow, Plot.tick, Plot.rule…

[Fil]

A problem currently is that the halo option can be an object containing anything. I don't know how to check that the values are numbers or strings as we usually do for normal options.

[Fil]

scratch that, a much better solution will be to use a svg filter (#409). I have a prototype here https://observablehq.com/@fil/line-halo-in-pure-svg

[Fil]

new version with the SVG filter strategy

[Fil]

manually rebased

[mbostock]

You only need the result+in for dilated; otherwise in defaults to the previous filter primitive.

Suggested change

	<feMorphology in="SourceAlpha" result="DILATED" operator="dilate" radius="${radius}"></feMorphology>
	<feFlood flood-color="${color}" result="BG"></feFlood>
	<feComposite in="BG" in2="DILATED" operator="in" result="OUTLINE"></feComposite>
	<feMerge>
	<feMergeNode in="OUTLINE" />
	<feMergeNode in="SourceGraphic" />
	</feMerge>`);
	<feMorphology in="SourceAlpha" result="dilated" operator="dilate" radius="${radius}"></feMorphology>
	<feFlood flood-color="${color}"></feFlood>
	<feComposite in2="dilated" operator="in"></feComposite>
	<feMerge>
	<feMergeNode></feMergeNode>
	<feMergeNode in="SourceGraphic"></feMergeNode>
	</feMerge>`);

[mbostock]

This is hard to follow. I think it would be clearer to initialize the DOM the desired way from the beginning, rather than creating it once (above using groupIndex) and then moving things around afterwards to apply the halo. (Especially since this already requires changing groupIndex to populate a segment property on the data, whose purpose isn’t clear until you go look at the code here.)

[mbostock]

This seems like a nice feature. The implementation needs some tidying.

[Fil]

A similar situation arises with the line opacity when the line is broken into segments for varying aesthetics: https://talk.observablehq.com/t/opacity-artifacts-in-line-segments/8142/2