D3 Examples - Odd colour transitions

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <title>Map</title>
        <script src="https://d3js.org/d3.v3.js"></script>
    </head>
    
    
    
    
    <body>
        
        <div id = "n2"> Option #1
        </div>
        
        <div id = "n1"> Option #2
        </div>
​
        <div id = "tooltip" class="hidden">
​
        </div>
​
        <br>
​
        <script type="text/javascript">
        
        var dataset;
        var padding = 45;
        var h = 500;
        var w = 700;
        var projection =  d3.geo.albersUsa()
                            .translate([w/2,h/2])
                            .scale([900]);  
        var population;
        var path = d3.geo.path()
                            .projection(projection);
        
        var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);
            
            d3.json("us-states.json", function(json){
​
                svg.selectAll("path")
                    .data(json.features)
                    .enter()
                    .append("path")
                    .attr("d", path)
                    .attr({
                        "fill": "black",
                        "stroke": "White",
                        "stroke-width": 0.3,
                        "opacity": 0.6
                    });
            });
​
        
        
            d3.csv("SO_city_pop.csv", function(data){
                    console.log(data);
                var rScale = d3.scale.linear()
                                .domain([0, d3.max(data, function(d){
                                    return parseFloat(d.x1);
                                })])
                                .range([5,15]);
                
                var circleXCoord;   
                var circleYCoord;   
                        
                dataset = data;
    
                svg.selectAll("circle")
                .data(dataset)
                .enter()
                .append("circle")
                .attr({
                    "cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
                    "cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
                    "r": function (d) { return rScale(parseFloat(d.x1));}
                })
                .style({
                    "fill": "#0000FF",
                    "opacity": 0,
                    "stroke-width":0.7,
                    "stroke":"white"
                })
                .transition()
                .duration(1000)
                .ease("circle")
                .style("opacity",0.9)
               
              
            });
        </script>
            
            
            
            
            
            
            
            
            
        <script> //CHANGING CIRCLE COLOUR AND SHAPE
            d3.select("#n1")
            .on("click", function(){
                
            var rScale = d3.scale.linear()
                            .domain([0, d3.max(dataset, function(d){
                                return parseFloat(d.x2);
                            })])
                            .range([5,15]);
​
            var circleXCoord;   
            var circleYCoord;   
            
            svg.selectAll("circle")
                .transition()
                .delay(300)
                .duration(1000)
                .ease("circle")
                .style({
                    "fill": "DeepPink",
                    "stroke": "white",
                    "opacity": 0.9,
                    "stroke-width": 0.7
                })
                .attr({
                    "cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
                    "cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
                    "r": function (d) { return rScale(parseFloat(d.x2));}
                })
                ;
        });
        
        
        
        
        
        d3.select("#n2")
        .on("click", function(){
            
        // svg.selectAll("circle")
        //  .transition()
        //  .duration(500)
        //  .style("opacity", 0);
            
        var rScale = d3.scale.linear()
                        .domain([0, d3.max(dataset, function(d){
                            return parseFloat(d.x1);
                        })])
                        .range([5,15]);
​
        var circleXCoord;   
        var circleYCoord;   
        
        svg.selectAll("circle")
            .transition()
            .delay(300)
            .duration(1000)
            .ease("circle")
            .style({
                "fill": "#0000FF",
                "stroke": "white",
                "opacity": 0.9,
                "stroke-width": 0.7
            })
            .attr({
                "cx": function(d) { circleXCoord = projection([d.lon, d.lat])[0]; return circleXCoord},
                "cy": function(d) { circleYCoord = projection([d.lon, d.lat])[1]; return circleYCoord},
                "r": function (d) { return rScale(parseFloat(d.x1));}
            }); 
        
        
    });
        
        
        </script>   
            
    </body>
</html>
    