d3-annotation v2.0

Updated features for d3-annotation, a full post here.

This block uses all three of the new features:

the nx/ny feature for placing line labels
default styling, no need to import an annotation css file
color attribute to color the annotations
new badge option for the HBO and Netflix nomination callouts

forked from susielu's block: d3-annotation v2.0

<!DOCTYPE html>
<html lang="en">

svg {
      background-color: white;
      font-family: 'Lato';
    }

path.line {
      stroke: lightgrey;
    }

.annotation path.connector {
      stroke-dasharray: 1, 1;
    }

.annotation-note-title {
      font-weight: bold;
    }

.annotation.xythreshold {
      cursor: move;
    }

.annotation text {
      font-size: .7em;
      text-transform: uppercase;
      font-weight: bold;
    }

text.title {
      font-size: 1.1em;
    }

.lineChart path {
      fill: none;
      stroke-width: 2;
    }

path.domain {
      stroke: lightgrey;
    }

.annotation.axis .annotation-note-bg {
      fill: white;
      stroke: white;
      stroke-width: 10;
    }

.annotation.axis path {
      stroke: lightgrey;
    }

.annotation.axis text {
      fill: lightgrey;
    }

.annotation.title text {
      font-size: 2em;
      font-weight: 100;
    }

div.title {
      font-size: 2em;
      width: 200px;
      position: absolute;
      left: 70px;
      top: 100px;
      font-family: "Lato"
    }

.annotation.badge text {
      font-weight: normal;
      font-size: 10px;
    }

.subject-ring {
      display: none;
    }
  </style>
</head>

<body>
  <svg width=960 height=500>
  </svg>
  <div class="title">
    <b style="color:#d32f2f">Netflix</b> Challenges <b>HBO</b> at the 2017 Emmys
  </div>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/75ff6169/d3-annotation.js"></script>
  <script src="index.js"></script>
</body>

</html>

Updated missing url https://cdn.rawgit.com/susielu/d3-annotation/75ff6169/d3-annotation.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/75ff6169/d3-annotation.js

https://d3js.org/d3.v4.js

https://cdn.rawgit.com/susielu/d3-annotation/75ff6169/d3-annotation.js