Skip to content

Instantly share code, notes, and snippets.

@dogobox
Last active April 26, 2016 01:14
Show Gist options
  • Save dogobox/aa7657ae12217dd9a6c7d6eaaeedd818 to your computer and use it in GitHub Desktop.
Save dogobox/aa7657ae12217dd9a6c7d6eaaeedd818 to your computer and use it in GitHub Desktop.
Readme

This is an implementation of Ann K. Emery’s technique of placings labels directly on top of a line in D3 4.0 Alpha.

This is a multi series line chart in that the data is first transformed into separate arrays for each series. (The series names are dynamic and automatically derived from the columns in the TSV file, using [dsv.parse]. A label is rendered for each point in the time series. Beneath this label, a white rectangle is added, whose size and position is computed automatically using element.getBBox plus a little bit more padding.

<iframe src="http://bl.ocks.org/dogobox/raw/e5b923bd050747446ebd/" width="960" height="500"></iframe>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment