Data positions in d3 projection transitions

Question

How can data positions be included in d3 projection transitions?

I made a JsFiddle demo based on https://bl.ocks.org/mbostock/3711652 .

Obviously the data point does not follow the projection transitions. This is the relevant javascript I added:

//==========================================
var button = d3.select("#button")
    .on("click", function(){
       drawDot();
     });

function drawDot(){
    var coordinates = projection([d3.select("#lon").property("value"),
                                  d3.select("#lat").property("value")]);
    d3.select('svg')
        .append('svg:circle')
        .attr('cx', coordinates[0])
        .attr('cy', coordinates[1])
        .attr('r', 5);
}
//==========================================

Answer 1

So first of all your JS Fiddle isn't working.

looking at the bl.ocks demo what it is doing is on update it selects the path object and transforms it.

Here is a working example: https://jsfiddle.net/87h9ysLv/6/

function drawDot(){
var coordinates = projection([d3.select("#lon").property("value"),
                              d3.select("#lat").property("value")]);
d3.select('svg')
    .append('path')
    .datum(d3.geo.circle().origin(coordinates).angle(2))
    .attr('d', d3.geo.path().projection(options[d3.select("#projection-menu")[0][0].selectedIndex].projection));}

So the circle needs to be a path element with the "d" attribute set. to do this we need to set the datum to be the circle object we want, in this case it is using the "geo" types to work (shor for geographies).

So we set the origin of our geo.circle to the long/lat of the center, and the "angle" is our radius.

then we set the attribute "d" to be a path, using d3.geo.path(), we then "project" it onto the shape by selecting the currently selected option in the select and retrieving the associated projection.