D3.js visualization from circles to triangles

Question

Does anybody know how I might change the circles in this graph http://bost.ocks.org/mike/nations/ to be triangles and still dynamically grow and shrink?

Answer 1

There are a variety of ways to create triangles; one way to do this without doing any geometry yourself is to use d3.svg.symbol with the type "triangle-up". Like so:

• http://bl.ocks.org/3244058

Answer 2

I think that the code is almost the same, but instead of drawing circles, you need to compute the vertices of a polygon with three edges. Is important that the area of your triangle to be proportional to the value that it represents. Take a look to the polygon documentation https://github.com/mbostock/d3/wiki/SVG-Shapes