d3-annotation: Responsive Types and Hover

Responsive Types and Hover Example

Made with d3.annotation. An example showing how you can dynamically change the annotation type and add hover events.

<!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'>

:root {
      --accent-color: #E8336D;
    }

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

path.line {
        fill: none;
        stroke: black;
        stroke-width: 1px;
      }

.annotation path {
      stroke: var(--accent-color);
      fill: none;
    }

.annotation path.connector-arrow{
      fill: var(--accent-color);
    }

.annotation text {
      fill: var(--accent-color);
    }

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

.annotation.xythreshold {
      cursor: move;
    }

.annotation.xythreshold .annotation-subject{
      stroke-width: 3px;
    }

.annotation.badge path.subject-pointer, .annotation.badge path.subject {
      fill: var(--accent-color);
      stroke-width: 3px;
      stroke-linecap: round;
    }

.annotation.badge path.subject-ring {
      fill: white;
      stroke-width: 3px;
    }

.annotation.badge .badge-text {
      fill: white;
      font-size: .7em;
    }
        
    rect.annotation-note-bg {
      fill: rgba(255, 255, 255, 0);
    }

text.hover {
      font-size: .7em;
    }
    </style>
</head>
<body>
    <svg width=960 height=500></svg>
    <script src="https://d3js.org/d3.v4.js"></script>
    <script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js"></script>
    <script src="index.js"></script>
</body>
</html>

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

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

https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js