susielu/.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;
     }

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

    .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://rawgit.com/susielu/d3-annotation/master/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
        }].map(function(d){ d.color = "#E8336D"; return d})

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

	.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://rawgit.com/susielu/d3-annotation/master/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
	}].map(function(d){ d.color = "#E8336D"; return d})

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

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

	</script>
	</body>
	</html>