Data Scientist at Warwick Investment Group. Passionate about science, predictive modeling, and data visualizations.
html`
<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>
`
margin = ({ top: 20, right: 30, bottom: 30, left: 40 })
annotate = {
const annotations = [
{
// note: {
// title: "text holder",
// lineType: "none",
// align: "middle",
// wrap: 150 //custom text wrapping
// },
subject: {
height: 900- margin,
width: 165
},
type: d3_annotation.annotationCalloutRect,
y: 0,
disable: ["connector"], // doesn't draw the connector
//can pass "subject" "note" and "connector" as valid options
x: 530,
y: 0,
dy: 1,
dx: 1,
className: "show-bg",
data: {}
},
{
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_annotation.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
.annotation()
.type(d3_annotation.annotationLabel)
.annotations(annotations);
d3.select("svg")
.append("g")
.attr("class", "annotation-group")
.call(makeAnnotations);
}
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
