d3 - updating charts on map make basemap diasappear - why?

I want to combine several visualisiations that I made earlier with d3.js into one more complex visualisation. Therefore I'd like to combine an updating choropleth map with a symbol map consisting of pie charts. The choropleth map already has buttons to select the year that should be shown. Later on, the pies should also be selectable just like the choropleth map by different buttons, but I tried to start with something easier and tried to put the pies of only one year onto the map.
My problem right now is that, as soon as I put the function creating the pies into my code, the choropleth map won't be shown any more but the legend of the choropleth map is still visible. Where is my mistake? Is there some problem with the way I am binding the data?

The function creating the map with the choropleth looks like this:

d3.json("PolenReg2.json", function(json){
d3.csv("Jugendarbeitslosigkeit5.csv",function(csv){

    draw = function(year){

        for(var j = 0; j < csv.length; j++){
            for(var i = 0; i < json.features.length; i++){
                    if(json.features[i].properties.name_alt == csv[j].region){
                        json.features[i].properties.perCent = csv[j][year];
                        break;
                    }               
                }
            }


         map = svg.selectAll("path")
            .data(json.features)
            .enter()
            .append("path")
            .attr("d", path)
            .style({
                "fill":function(d) {
                  var value = d.properties.perCent;
                        if (value) { return color(value); }
                        else { return "#ffffff"; }},
                 "opacity":.8
            })
            .text(function(d){
                return d.properties.name_alt;
            })
            .on("mouseover", function(d){   
                var coordinates = d3.mouse(this);
                d3.select(this).style("opacity",1)          
                d3.select("#tooltip")
                .style({
                        "left": coordinates[0]  + "px",
                        "top": coordinates[1] + "px"
                    }).classed("hidden",false)
                    .select("#perCent").append("text")
                    .text(function(){
                        if(d.properties.perCent){
                            return d.properties.name_alt + ", " + d.properties.perCent + "%";
                        }
                        else{
                            return d.properties.name_alt + ", UN Data not available";
                        }
                    })
            })
            .on("mouseout",function(d){
                d3.select(this).style("opacity",.8)
                d3.select("#tooltip").classed("hidden",true).select("text").remove();
            })


        var keys = legend.selectAll('li')
            .data(color.range());

        keys.enter().append('li').classed("legend",true)
            .style({
                "border-top-color":String,
                "opacity": .8
            })
            .text(function(d) {
                var r = color.invertExtent(d);
                return Math.ceil(r[0]) +" - " + Math.floor(r[1]) ; // give the approximate value
            });

    }

    draw(2014);

    $(".btn").click(function(e){
         $("#yearSelect").find(".highlight").removeClass("highlight");
        e.preventDefault();
        map.remove();
        draw($(this).attr('data-value'));
        $(this).addClass("highlight");

    });

})

})

The function creating the pies basically looks like this:

    var loadPies = d3.csv("Bevoelkerung-Altersstruktur-2010-2.csv", function(err, data) {    var pie = d3.layout.pie()
.sort(null)
.value(function(d) {
  return +d.key;
});


var pies = svg
.append('g')
.attr('class', 'big-pies')
.selectAll('.pie')
.data(data)
.enter()
.append('g')
.attr('class', 'pie')
.attr("transform", function(d) {
  var proj = projection([d.lon, d.lat]);
  return "translate(" + proj[0] + "," + proj[1] + ")";
})
.selectAll('.slice')

.data(function(d) {
  // set slice data with additional total value
  // so that we can render the slice with this given value
  return pie([{
    key: d.Kinder,
    tot: d.Einwohner
  }, {
    key: d.Jugendliche,
    tot: d.Einwohner
  }, {
    key: d.Erwachsene,
    tot: d.Einwohner
  }, {
    key: d.Rentner,
    tot: d.Einwohner
  }]);
})
.enter()
.append('path')
.attr('d', function(d, i) {
  // return the arc function with outer radius increased by the total value
  return d3.svg.arc().innerRadius(0).outerRadius(Math.sqrt(d.data.tot /10000 * Math.PI)) .call(d, d)
})
.style('fill', function(d, i) {
  return colorbigpie(i);
})
   .style("opacity", 0.80)

 ;

});

You can see the completet code under this link: https://plnkr.co/edit/ofrJmQ9if2j3kgH7T3xe?p=preview