Area type without a bottom border

[asibilia]

I'm trying to create an area chart that looks like this

I'm currently doing this

   ...
   lineType: { type: 'area', interpolator: curveCatmullRom },
   ...

which ends up with a stroke around the entire area. Seems like I'd want to use something like a ridgeline plot but I can't seem to figure out what types are supported on the lineType object (and ridgeline does not seem to be one of them).

Any help would be greatly appreciated!

[hydrosquall]

The existing set of lineTypes appear to be here:

https://github.com/nteract/semiotic/blob/d79503d7b90f25b6776c7b3e957ba3a12c87b1c5/src/components/types/generalTypes.ts#L77-L91

You can create a custom lineType by passing in a function instead of one of these strings:

https://github.com/nteract/semiotic/blob/d79503d7b90f25b6776c7b3e957ba3a12c87b1c5/src/components/types/generalTypes.ts#L94

It appears your custom lineType function should look line one of the functions in lineDrawing.ts:

https://github.com/nteract/semiotic/blob/d79503d7b90f25b6776c7b3e957ba3a12c87b1c5/src/components/svg/lineDrawing.ts#L114-L123

I don't think that passing in a custom transformation function will let you change the styling of the visualization to match the picture you provided, since the functions in here just seem to be used to change how that topmost line is drawn. However, maybe a bumpArea chart could get the effect you need (minus the gradient fill effect). The bumpChart function in the file listed above can be used as a reference implementation.

https://semiotic.nteract.io/guides/area-chart#area-chart-with-hover

[emeeks]

Seems like the area type should have a flag to have no bottom border. Something like open.

[emeeks]

Updated the way areas are drawn in 2.0.0-rc.12 so that by default they're drawn with the area filled and an overlaid top line. If you want the old style areas you can set enclosed: true in your lineType.