d3-annotation: Thresholds & Annotation Colors

Thresholds and Annotation Color Schemes

Taking a look at the AAPL stock price from 1997 to 2003

Different Annotation types and styles:

Historical dates: vertical annotations to mark important dates, low saturation makes them fade into the background
High-price emphasis: to help the user see when the price is above $100, the annotation has a higher saturation to call attention to it. I've also emphasized this annotation by styling the line itself. This is done using a divided-line from Elijah Meek's Divided Line II block
Anomalies: to explain the sudden drop in price (an anomaly in the dataset) as a result of the Apple stock splitting, I've used higher saturation and contrasting color from the rest of the chart to signal this is a special case

Made with d3.annotation().

forked from mukhtyar's block: d3-annotation: Thresholds & Annotation Colors

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

: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