roughjs + d3-annotation

forked from jwilber's block: d3-annotation Play

<!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'>
  <script src="https://d3js.org/d3.v4.js"></script>
  <script src="https://cdnjs.cloudflare.com/ajax/libs/rough.js/2.2.5/rough.min.js"></script>
  <script src="https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js"></script>
<stylesheet href="https://fonts.googleapis.com/css?family=Indie+Flower" rel="stylesheet">
	<style>
    @import 'https://fonts.googleapis.com/css?family=Indie+Flower';
      
      :root {
        --main-ann-color: darkseagreen;
      }
      
     body{
        background-color: var(--main-ann-color);
     }

svg {
        background-color: white;
        font-family: 'Lato';
     }
      
      .chartTitle {
        font-family: 'Indie Flower';
        font-size: 1.2rem;
        font-weight: bold;
      }

.annotation-note-title, text.title {
      font-weight: bold;
      font-size: 1.1rem;
      font-family: 'Indie Flower';
      margin: 'auto';
    }

.annotation-note-label {
      font-size: 0.9rem;
      font-family: 'Indie Flower';
    }

</style>
</head>
<body>
    <script>
      // set constants
      const width = 960;
      const height = 500;
      
      // create svg and title
      d3.select('body').append('svg')
      	.attr('width', width)
      	.attr('height', height);
      
      d3.select('svg').append('text')
        	.attr('class', 'chartTitle')
        	.attr('x', 480)
        	.attr('y', 40)
        	.attr('text-anchor', 'middle')
        	.html('Playing with d3-annotation')
      
      const annotations = [
        {
          //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: "Here's the text for 'label'",
            title: "This is the text for  'title'",
            wrap: 190 // how long label can be
          },
          //settings for the subject, in this case the circle radius
          subject: {
            radius: 100
          },
          x: (width/4), //
          y: (height/2), //
          dy: -120, // y-pos for text
          dx: -3 // x-pos for text
        },
        {
          //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: "(Received drug)",
            title: "Treatment Group",
            wrap: 190 // how long label can be
          },
          //settings for the subject, in this case the circle radius
          subject: {
            radius: 100
          },
          x: (width/1.5), //
          y: (height/2), //
          dy: -120, // y-pos for text
          dx: 0 // x-pos for text
        }
        ].map(function(d){ d.color = "black"; return d})

const makeAnnotations = d3.annotation()
          .type(d3.annotationLabel)
          .annotations(annotations)

d3.select("svg")
          .append("g")
          .attr("class", "annotation-group")
          .call(makeAnnotations)
        
var rc = rough.svg('svg');
      
d3.selectAll('.annotation-subject').select('path')
	.attr('visibility', 'hidden')

d3.selectAll('.annotation-connector').select('path')
	.attr('visibility', 'hidden')

d3.selectAll('path.note-line')
	.attr('visibility', 'hidden')
      
d3.selectAll('.annotation-subject').each(function() {
    let gParent = this
    d3.select('svg').select('path.subject').each(function() {
      gParent.appendChild( rc.path(d3.select(this).node().getAttribute('d'), {
      stroke: 'black',
      fillStyle: 'hachure',
      strokeWidth: 0.55,
      roughness: 2.5,
        })
      )
    })
  })

d3.selectAll('.annotation-connector').each(function() {
    let gParent = this
    d3.select('svg').select('path').each(function() {
      gParent.appendChild( rc.path(d3.select(this).node().getAttribute('d'), {
      stroke: 'black',
      fillStyle: 'hachure',
      strokeWidth: 0.55,
      roughness: 2.5,
        })
      )
    })
  })

d3.selectAll('.annotation-note').each(function() {
    let gParent = this
    d3.select(this).each(function() {
      gParent.append(rc.path(d3.select('path.note-line').node().getAttribute('d'), {
      stroke: 'black',
      fillStyle: 'hachure',
      strokeWidth: 0.55,
      roughness: 2.5,
        })
      )
    })
  })

// d3.selectAll('.annotation-note').each(function() {
//     let gParent = this
//     d3.select(this).append(rc.path(d3.select('path.note-line').node().getAttribute('d'), {
//       stroke: 'black',
//       fillStyle: 'hachure',
//       strokeWidth: 0.55,
//       roughness: 2.5,
//         })
//       )
//   })

</script>
</body>
</html>

Updated missing url https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js to https://cdn.jsdelivr.net/gh/susielu/d3-annotation/d3-annotation.min.js

https://d3js.org/d3.v4.js

https://cdnjs.cloudflare.com/ajax/libs/rough.js/2.2.5/rough.min.js

https://rawgit.com/susielu/d3-annotation/master/d3-annotation.min.js