d3 putting multi pie chart on map

Question

I want to put multi pie chart on d3 map but I'm confused how to do it.

I'm noob at d3 so I searched about the issue and made below code.

Someone suggested that I should make two seperate svgs so I did it.

There are two svgs. one has a map, and the other has multiple pie chart.

Now I have a problem with mapping these pies on map.

I don't know how to map these pies with geo coordinates...

It's just browser(?) coordinates so I want to change it.

and I want to zoom and pan map correctly with pies...

hope your help...

summary

I have two problems

1. putting multiple pie charts on right map place

2. zoom and pan correctly

   <script src="http://d3js.org/d3.v3.min.js"></script>
   <script src="http://d3js.org/topojson.v0.min.js"></script>
   <script>
       var width = 960, height = 500;
   
       var projection = d3.geo.mercator().center([ 127.46, 36.00 ])
               .scale(4000).translate([ width / 2, height / 2 ]);
   
       var color = d3.scale.category20();
   
           //first svg
       var svg = d3.select("body").append("svg").attr("width", width).attr(
               "height", height);
   
       var path = d3.geo.path().projection(projection);
   
       var radius = 30;
   
       var arc = d3.svg.arc().innerRadius(radius - 100).outerRadius(
               radius - 20);
       var g = svg.append("g");
   
       var rawFile = new XMLHttpRequest();
       rawFile.open("GET", "/tourdata.txt", false);
       var allText;
       rawFile.onreadystatechange = function() {
           if (rawFile.readyState === 4) {
               if (rawFile.status === 200 || rawFile.status == 0) {
                   allText = rawFile.responseText;
               }
           }
       }
   
       rawFile.send(null);
   
       var lines = allText.split('\n');
   
       var timeTable = new Array();
       var res = lines[0].split(", ");
       var currentTime = res[1];
       var currentDate = res[0];
   
       var timeInformation = new Array();
       var corInformation = new Array();
       var timeCorTable = new Array();
   
       for ( var i = 0; i < lines.length; i++) {
           var res = lines[i].split(", ");
   
           if (currentDate != res[0] || currentTime != res[1]) {
               currentDate = res[0];
               currentTime = res[1];
               timeTable[currentDate + ":" + currentTime] = timeInformation;
               timeCorTable[currentDate + ":" + currentTime] = timeCorTable;
               timeInformation = new Array();
               corInformation = new Array();
           }
   
           if (timeInformation[res[2] + "," + res[3]] == undefined) {
               corInformation.push(res[2] + "," + res[3]);
               timeInformation.push([ res[4], res[5], res[6], res[7], res[8],
                       res[9], res[10], res[11], res[12], res[13] ]);
           }
       }
   
       timeTable.push(timeInformation);
       timeCorTable.push(corInformation);
   
       var data = timeTable;
       console.log(timeCorTable[0]);
       // load and display the World
       d3.json("kor.json",
               function(error, topology) {
                   // load and display the cities
                   var geo = topojson.object(topology,
                           topology.objects['kor.geo']).geometries;
                   g.selectAll('path').data(geo).enter().append('path').attr(
                           'd', path)
               });
   
       console.log(data[0]);
   
           //second svg that has multiple pies
       var svgSvg = d3.select("body").select("svg").selectAll("g").data(timeTable[0]).enter().append("svg:svg").attr(
               "width", width).attr("height", height).append("svg:g").style(//svg:g make pie group
               "opacity", 0.8).attr("transform", function(d, i) {
           var split = timeCorTable[0][i].split(",");
           //console.log(split[0]);
           var point = [split[0], split[1]];
           console.log(projection(point[0], point[1])[0]); 
           return ("translate(" + projection(point[0], point[1])[0] + "," + projection(point[0], point[1])[1] + ")");
       });
   
       svgSvg.selectAll("path").data(d3.layout.pie()).enter().append(
               "svg:path").attr("d",
               d3.svg.arc().innerRadius(10).outerRadius(30)).style("fill", function(d, i) { return color(i); });
   
   
   
       // zoom and pan
       var zoom = d3.behavior.zoom().on(
               "zoom",
               function() {
                   g.attr("transform", "translate("
                           + d3.event.translate.join(",") + ")scale("
                           + d3.event.scale + ")");
                   g.selectAll("path").attr("d", path.projection(projection));
                   svgSvg.attr("transform", "translate("
                           + d3.event.translate.join(",") + ")scale("
                           + d3.event.scale + ")");
               });
   
       svg.call(zoom)
   </script>