.gitignore

## .gitignore
.DS_Store

## README.md

      
        

          Raw
        
        
          
            
          
          
            
              README.md
            
          
        
      
    
  
    Example Without Scales - d3.annotation
Made with d3.annotation. An example showing basic annotations with just pixel positioning and no scales.

  

  

## index.html
<!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;
     }

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

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

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

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

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

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

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

    </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://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.12.1/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" // 'dot' also available
          },
          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",
            //can also add a curve type, e.g. curve: d3.curveStep
            points: [[100, 14],[190, 52]]
          },
          x: 350,
          y: 150,
          dy: 137,
          dx: 262
        },{
          //below in makeAnnotations has type set to d3.annotationLabel
          //you can add this type value below to override that default
          type: d3.annotationCalloutCircle,
          note: {
            label: "A different annotation type",
            title: "d3.annotationCalloutCircle",
            wrap: 190
          },
          //settings for the subject, in this case the circle radius
          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>

## thumbnail.png

      
        

          Raw
        
        
          
            
          
          
            
              thumbnail.png