Text along path by nitaku

index.js

(function() {
  var height, svg, width;

  svg = d3.select('svg');

  width = svg.node().getBoundingClientRect().width;

  height = svg.node().getBoundingClientRect().height;

  svg.attr({
    viewBox: "" + (-width / 2) + " " + (-height / 2) + " " + width + " " + height
  });

  svg.append('path').attr({
    d: 'M-300 0 C0 -300 0 300 300 0',
    id: 'the_path'
  });

  svg.append('text').append('textPath').attr({
    'xlink:href': '#the_path',
    startOffset: '50%'
  }).append('tspan').text('Hello Ground!');

}).call(this);

index.html

<!DOCTYPE html>
<html>
	<head>
        <meta charset="utf-8">
        <meta name="description" content="Text along path" />
        <title>Text along path</title>
		<link type="text/css" href="index.css" rel="stylesheet"/>
        <script src="//d3js.org/d3.v3.min.js"></script>
	</head>
	<body>
        <svg height="500" width="960"></svg>
        <script src="index.js"></script>
	</body>
</html>

index.coffee

svg = d3.select('svg')
width = svg.node().getBoundingClientRect().width
height = svg.node().getBoundingClientRect().height

# translate the viewBox to have (0,0) at the center of the vis
svg
  .attr
    viewBox: "#{-width/2} #{-height/2} #{width} #{height}"
    
svg.append('path')
  .attr
    d: 'M-300 0 C0 -300 0 300 300 0'
    id: 'the_path'
    
svg.append('text')
  .append('textPath')
    .attr
      'xlink:href': '#the_path'
      startOffset: '50%'
  .append('tspan')
    .text('Hello Ground!')

index.css

svg {
  background: white;
}
path {
  stroke-width: 4;
  stroke-opacity: 0.3;
  stroke: #333;
  fill: none;
}
text {
  fill: black;
  font-size: 64px;
  text-anchor: middle;
}