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.

forked from susielu's block: d3-annotation: Responsive Types and Hover

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