Skip to content

Instantly share code, notes, and snippets.

@susielu
Last active August 18, 2017 19:38
Show Gist options
  • Save susielu/a464c24d8b42f0c4d9fafe7b48e9e60a to your computer and use it in GitHub Desktop.
Save susielu/a464c24d8b42f0c4d9fafe7b48e9e60a to your computer and use it in GitHub Desktop.
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.

<!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>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment