4

I'm using D3's orthographic projection to build a rotating globe that gets drawn to a canvas. I'm adding shapes to the globe using d3.geo.*, particuarlly geo.circle.

I would also like to display text on the globe (also via canvas), with the caveat that the text should exist on the globe, with proper transformation/curvature and clipping, like all the other GeoJSON/TopoJSON features that are rendered. However, only shapes created via d3.geo.path can be drawn this way.

Is there a way to take some text (and a point, or perhaps a bounding box) and transform it via d3.geo.path so that it can be drawn correctly on the globe? Here is a photoshopped (poorly—the shapes aren't quite right) example of the sort of effect I'm after:

Example

Michelle Tilley
  • 157,729
  • 40
  • 374
  • 311
  • 1
    Related: [converting SVG text to a path](http://stackoverflow.com/questions/26594555/d3js-how-to-convert-svg-text-to-path). A path could be transformed the same way you've transformed the continents there. – Anko - inactive in protest Nov 24 '15 at 02:55

1 Answers1

3

You will have to get the font as raw vectors and then create the text as a set of points to pass to d3.js for it to project it onto the map as it has done with the country outlines. The canvas is very limited in the transformations it can apply to elements like text. Orthographic projection is way outside its capabilities.

Thus you will have to get a font in vector format. The simplest way is to use photoshop, illustrator, inkscape, or any package that can vectorise a font for you and then write the function to create the text as a path from that vector font. I had a look through d3.js API documentation and there does not seem to be anything there to help with fonts.

Blindman67
  • 51,134
  • 11
  • 73
  • 136