Transition on mouseout

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>
<body>
    <div class="viz"></div>
    <div class="viz1"></div>
    <div class="viz2"></div>
    <div class="viz3"></div>
</body>

JavaScript

var sampleSVG = d3.select(".viz")
        .append("svg")
        .attr("width", 400)
        .attr("height", 400);    

var first = sampleSVG.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .style("fill", "blue")
        .attr("opacity", .5)
        .on("mouseover", function(){
            d3.select(this).transition().duration(1000).attr("opacity", 1)
        })
        .on("mouseout", function(){
            d3.select(this).transition().attr("opacity", 1)
                .transition().attr("opacity", .5)
        });
        
var sampleSVG1 = d3.select(".viz1")
        .append("svg")
        .attr("width", 400)
        .attr("height", 400);    

var first = sampleSVG1.append("circle")
        .style("stroke", "gray")
        .style("fill", "white")
        .attr("r", 40)
        .attr("cx", 50)
        .attr("cy", 50)
        .style("fill", "blue")
        .attr("opacity", .5)
        .on("mouseover", function(){
            d3.select(this).transition().duration(1000).attr("opacity", 1)
        })
        .on("mouseout", function(){
            d3.select(this).transition().attr("opacity", 1)
                .transition().attr("opacity", .5)
        });