Made with d3.annotation. An example showing basic annotations with just pixel positioning and no scales.
Last active
August 18, 2017 19:38
-
-
Save susielu/a464c24d8b42f0c4d9fafe7b48e9e60a to your computer and use it in GitHub Desktop.
d3.annotation: Example Without Scales
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| .DS_Store |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!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