Star

Here are several examples of rendering annotations with a d2b.axisChart. Of course any of the examples and chart types below can be mixed and matched on a single d2b.axisChart.

  1. Basic Usage

  2. This example includes a couple basic annotations at the value level. One thing to note is that only the first generator in the generators array will render annotations. So in this example only the d2b.svgArea has annotations and not the d2b.svgLine or d2b.svgScatter generators.

    For the area chart you can have an annotations array for each point, the arrays can contain an annotation for location y0 or y1.

    JS
    HTML
    CSS
  3. Responsive Annotations

  4. There are many ways to make the annotations responsive. This example simply uses a dynamic dx and type attributes derived from the body width. Try resizing the window to see how the annotations are affected. Once a width threshold is passed the annotations switch to the d3.annotationBadge type.

    JS
    HTML
    CSS
  5. Bar Chart

  6. Here, because the bars can be bulky, I've reduced the opacity of the underlying rectangles.

    JS
    HTML
    CSS
  7. Line Chart

  8. JS
    HTML
    CSS
  9. Scatter Chart

  10. JS
    HTML
    CSS
  11. Box Plot

  12. Similar to the area chart, the box plot can have multiple annotations per "box". They can have annotations at the locations of maximum, upperQuartile, median, lowerQuartile, and minimum.

    JS
    HTML
    CSS
  13. Chart Level Annotations

  14. So far the examples have gone over adding point level annotations to each of the different d2b graph types.

    Annotations can also be added to the chart data. In addition to providing x / y values, you may also provide values for x2 and y2 to be used in threshold or rectangle annotations. The reserved value of Infinity can be used to indicate that a threshold or rectangle should extend to the edge of the chart.

    Other than the default functionality provided by the d3.annotation plugin you can also provide dx / dy values to the annotation subject. This should be a value between 0 and 1 and will be the percentage offset for the label in its region's or threshold's height / width.

    JS
    HTML
    CSS
  15. Graph Level Annotations

  16. You may also add an array of annotations to each graph object. These annotations have the same features as the chart level annotations. They also will be removed and added along with their respective graph whenever the legend toggles are used.

    JS
    HTML
    CSS
  17. AAPL Stock Price

  18. Here is a recreation of Susie's block with divided line. Using d2b and the included annotation hooks.

    JS
    HTML
    CSS