D3 Examples - d3-annotation v2.0

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

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
​
<head>
  <meta charset="utf-8">
  <link href='https://fonts.googleapis.com/css?family=Lato:300,900' rel='stylesheet' type='text/css'>
​
  <style>
    body {
      background-color: whitesmoke;
    }
​
    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>
    