d3.annotation: Example Without Scales

Example Without Scales - d3.annotation

Made with d3.annotation. An example showing basic annotations with just pixel positioning and no scales.

forked from susielu's block: d3.annotation: Example Without Scales

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

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

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

.annotation-note-bg {
      fill: rgba(0, 0, 0, 0);
    }

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

text.title {
      font-size: 1.2em;
      font-weight: bold;
    }
    </style>
</head>
<body>
    <svg width=960 height=500>
      <text class="title" x=40 y=50>d3.annotation()</text>
      <text x=40 y=80>Basic examples without scales</text>
    </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>
      const annotations = [
        {
          note: {
            label: "Basic settings with subject position(x,y) and a note offset(dx, dy)",
            title: "d3.annotationLabel"
          },
          x: 50,
          y: 150,
          dy: 137,
          dx: 162
        },{
          note: {
              label: "Added connector end 'arrow', note wrap '180', and note align 'left'",
              title: "d3.annotationLabel",
              wrap: 150,
              align: "left"
            },
            connector: {
              end: "arrow"
            },
            x: 170,
            y: 150,
            dy: 137,
            dx: 162
        },{
          note: {
            label: "Changed connector type to 'curve'",
            title: "d3.annotationLabel",
           wrap: 150
          },
          connector: {
            end: "dot",
            type: "curve",
            points: [[100, 14],[190, 52]]
          },
          x: 350,
          y: 150,
          dy: 137,
          dx: 262
        },{
          type: d3.annotationCalloutCircle,
          note: {
            label: "A different annotation type",
            title: "d3.annotationCalloutCircle",
            wrap: 190
          },
          subject: {
            radius: 50
          },
          x: 620,
          y: 150,
          dy: 137,
          dx: 102
        }]

const makeAnnotations = d3.annotation()
          .type(d3.annotationLabel)
          .annotations(annotations)

d3.select("svg")
          .append("g")
          .attr("class", "annotation-group")
          .call(makeAnnotations)

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