d3.js - D3.Geo.Circle with Canvas -

i'm using d3 create mercator projection using canvas rather svg. i've got path of land working can't work out how (if possible) add d3.geo.circle @ specific long/lat positions.

if svg i'd use like

var group = svg.append('g'); group.append('circle')    .attr('cx', coords[0])    .attr('cy', coords[1])    .attr('r', 10)    .style('fill', 'red'); 

but can't work out how translate canvas , i'm not finding in way of resources d3 using canvas rather svg.

any suggestions?

you have create manually using canvas arc command:

var coords = [50, 50]; var r = 10;  ctx.beginpath(); // make arc 0 math.pi*2, aka full circle ctx.arc(coords[0], coords[1], r, 0, math.pi*2, false); ctx.fillstyle = 'red'; ctx.fill(); 

live example: http://jsfiddle.net/9kmv3/

---

edit: appears mean expressing latitude , longitude appropriate transformation on canvas, have @ instead:

var coords = [47.61, -122.33]; var r = 5;  ctx.beginpath(); // make arc 0 math.pi*2, aka full circle  // x = longitude // y = latitude // negative latitude values go upwards, reverse sign of latitude  ctx.arc(coords[1], -coords[0], r, 0, math.pi*2, false); ctx.fillstyle = 'red'; ctx.fill(); 

live example placing seattle on map: http://jsfiddle.net/9kmv3/1/