v2.0.0

Copy of post from website: http://www.susielu.com/data-viz/d3-annotation-2

Goals

The goal of this upgrade is to make the library easier to use. The main change is custom styling is built in, no longer needing a css file, and you can set a color property to change the color of the entire annotation for easy styling.

Breaking Changes

• No d3-annotation.css I have added default styling so that you no longer need to import the css file
• annotationBadge, new default setting. Previously if you used the badge annotation it defaulted to x and y settings of "left" and "top" if you didn't provide additional values. This would offset the badge to the top left, now the default centers the badge

Updates

Using nx and ny to set the note position.

• Previously you could only set the note position as an offset from the subject using dx, dy. I ran into use cases where it would have been really helpful to be able to set the note position directly in x,y space, not as an offset, you can now use nx, and ny to position the note for this use case

Default styling for annotations.

(image: colors.png class:custom-size width: 400)

• In v1 I provided a css file to go with the module. I recently learned that there is this hierarchy of styling precedence:
  • Attribute on svg element, e.g.
    <circle fill="blue" ></circle>
  • CSS styling - will override attribute styling
    circle { fill: blue }
  • Inline styling - most specific, will override all
    <circle style="fill: blue"></circle>
• This allows me to provide default styling for the annotations that can still be overridden with css. The default style uses grey as the annotation color
• Another benefit of this is you can now pass annotations a color property and it will use that color in all of the default styling

New Badge Annotation Settings

• The annotationBadge used to only have four positions, and defaulted to the top left
• Now it has nine options and defaults to the center badge:

Example of the Emmys 2017 makeover using these new features