Taking a look at the AAPL stock price from 1997 to 2003
Different Annotation types and styles:
Made with d3.annotation().
xxxxxxxxxx
<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 {
--line-chart-color: #607D8B;
--annotation-context-color: #00796B;
--annotation-above-color: #00BFA5;
--annotation-anomaly-color: #E8336D;
}
svg {
background-color: white;
font-family: 'Lato';
}
.axis, .axis text {
fill: var(--line-chart-color);
}
.axis line, path {
stroke: var(--line-chart-color);
}
path {
fill: none;
}
.annotation path {
stroke: var(--annotation-context-color);
}
.annotation:not(.above):not(.anomaly) path {
stroke-dasharray: 1,3;
}
.annotation text {
fill: var(--annotation-context-color);
}
.annotation.above path {
stroke: var(--annotation-above-color);
}
.annotation.above text {
fill: var(--annotation-above-color);
}
.annotation.anomaly path {
stroke: var(--annotation-anomaly-color);
stroke-width: 2px;
}
.annotation.anomaly text {
fill: var(--annotation-anomaly-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>AAPL stock example</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 src="divided-line.js"></script>
<script>
const width = 960
const height = 500
const margin = { top: 180, bottom: 50, left: 50, right: 50}
const x = d3.scaleTime().range([margin.left, width - margin.right ])
.domain([new Date('1/1/1997'), new Date('1/1/2003') ])
const y = d3.scaleLinear().range([height - margin.bottom, margin.top ])
.domain([0, 170])
d3.json("apple.json", function(error, json) {
if (error) throw error;
var line = d3.line()
.x(function (d) {return x(new Date (d.Date))})
.y(function (d) {return y(d.Close)})
/* --- creating line using divided line code --- */
var dLineData = dividedLine(parameters, json, 20);
const svg = d3.select("svg")
svg.append('g')
.attr('class', 'lineChart')
svg.select("g.lineChart")
.selectAll("path.segment")
.data(dLineData)
.enter()
.append("path")
.attr("d", function (d) {return line(d.points)})
.each(function (d){
const styles = styleMap[d.key]
Object.keys(styles).forEach(function(k){
d3.select(this)
.style(k, styles[k])
}, this)
})
const yAxis = d3.axisLeft(y).ticks(3).tickFormat(function(d){ return "$" + d})
const xAxis = d3.axisBottom(x)
svg.append("g")
.attr("class", "axis y")
.attr("transform", "translate(" + margin.left + ", 0)")
.call(yAxis);
svg.append("g")
.attr("class", "axis x")
.attr("transform", "translate(0,"+ (height - margin.bottom) +")")
.call(xAxis);
/* Code below relevant for annotations */
const annotations = [{
note: { label: "Steve Jobs Returns" },
subject: {
y1: margin.top,
y2: height - margin.bottom
},
y: margin.top,
data: { x: "7/9/1997"} //position the x based on an x scale
},
{
note: { label: "iMac Release" },
subject: {
y1: margin.top,
y2: height - margin.bottom
},
y: margin.top,
data: { x: "8/15/1998"}
},
{
note: { label: "iPod Release"},
subject: {
y1: margin.top,
y2: height - margin.bottom
},
y: margin.top,
data: { x: "10/23/2001"}
},
{
note: { label: "Stock Split 2:1",
lineType:"none",
orientation: "leftRight",
"align": "middle" },
className: "anomaly",
type: d3.annotationCalloutCircle,
subject: { radius: 35 },
data: { x: "6/21/2000", y: 76},
dx: 40
},
{
note: { label: "Above $100", wrap: 100, },
className: "above",
disable: ["connector"],
subject: {
x1: x( new Date('10/1/1999')),
x2: x( new Date('8/1/2000'))
},
x: x( new Date('10/1/1999')),
dx: -30,
data: { y: 100}
}
]
//An example of taking the XYThreshold and merging it
//with custom settings so you don't have to
//repeat yourself in the annotations Objects
const type = d3.annotationCustomType(
d3.annotationXYThreshold,
{"note":{
"lineType":"none",
"orientation": "top",
"align":"middle"}
}
)
const makeAnnotations = d3.annotation()
.type(type)
//Gives you access to any data objects in the annotations array
.accessors({
x: function(d){ return x(new Date(d.x))},
y: function(d){ return y(d.y) }
})
.annotations(annotations)
.textWrap(30)
d3.select("svg")
.append("g")
.attr("class", "annotation-group")
.call(makeAnnotations)
});
</script>
</body>
</html>
https://d3js.org/d3.v4.js
https://cdnjs.cloudflare.com/ajax/libs/d3-annotation/1.12.1/d3-annotation.min.js