Annotation as first class citizen

[mcnuttandrew]

In data visualization it is often important to use annotations so that your reader can get a grip on the systems they are looking at. As it stands user's could certainly add their own annotations through hacking and slashing, but it would be amazing to support this behaviour by adding a few different components to make annotations a breeze:

• [ ] AnnotationSeries,
• [ ] Reference line (#371)
• [ ] CircleCallOut

(I am grabbing most of these ideas from Susie Lu's super cool http://d3-annotation.susielu.com/)

[jckr]

yeah but let's take stock of what we already have: LabelSeries, which, sure, could have more features Hint and CrossHair

overall I'd be in favor of reinforcing what we currently have than starting something new.

Notably, Susie Lu's library supports dragging annotations. That's an interesting problem for react-vis. Today react-vis doesn't natively support dragging. If we did, we'd either have to maintain state at the series level, or change the way XYPlot handles data. either of which have consequences. While we have an example on how react-vis + dragging (zoomable chart), handing of dragging events happen outside of react-vis in this case.

[mcnuttandrew]

What other features do you see labelSeries gaining? it seems like a pretty uni-purpose component to me, but i might be missing something.

Hint and crosshair are fine at what they do, what more do we need from them? I know in the referenceLine ticket the consensus seemed to be that reference lines could be handled with Crosshairs, but I feel like having a really easy and convinient api will make people use it?

I think whenever someone picks up the story to import the zoomable-chart in to the main library, we could either do it the way that's handled there (with state being held in a higher order component), or make a special type of XYPlot, something like StatefulXYPlot?

[jckr]

re LabelSeries - text anchor is not accessible. and since it's not a style property, it's not overridable. That's a really easy fix though.

Hint is text, or rather content, associated to a datapoint. As such it could be enhanced with connectors to the mark of that datapoint, and other strategies for positioning it.

Crosshair is a second-class rv component. It doesn't have a style property (nor a strokeStyle prop etc.), it's always vertical and how content and items are being represented is maybe too opinionated. Crosshair is among the oldest code, I feel it was too tightly coupled with our first use cases. Whenever I need a reference line - even vertical, I've always used a LineSeries.

I welcome your thoughts on how to implement dragging (and/or brushing, zooming etc.) if we ever go this way. XYPlot already has a state. data for its children element come from that state. Right now the only time data in the state is different than data in the series props is for stacked elements.

I'm actually wondering if we'd need a state at the series level to handle dragging. or if we can simply handle this the same way we do w/ stacked elements.

[quasi-nova]

text anchor is not accessible. and since it's not a style property, it's not overridable. That's a really easy fix though.

I have been looking for a work around for this for quite some time now. Would you mind helping me figure out how to access textAnchor inside a <LabelSeries/>? I'm sure it might help others as well.

[mcnuttandrew]

@quasi-nova this is super late, but I tend to use text anchor in labelseries by adding style to the data of the label series like

<LabelSeries data={data.map(d => {
    return ({...d, style: {textAnchor: 'middle}})
})}/>