地図変形・散布図

クリックすると地形から散布図へ遷移します。

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title>地図・散布図遷移</title>

#stage {
    width: 900px;
    height: 500px;
}
svg {
    width: 100%;
    height: 100%;
}
</style>

</head>

}
    
    function drawAxis() {
        axisLayer.append("g")
            .attr("transform", "translate("+[margin.left, margin.top]+")")
            .attr("class", "axis y")
            .call(d3.axisLeft(yScale))
    
        axisLayer.append("g")
            .attr("class", "axis x")
            .attr("transform", "translate("+[margin.left, stageH+margin.top]+")")
            .call(d3.axisBottom(xScale))
                
    }
    
    function drawMaps(data) {
         
        data.sort(function(a,b){ return a.properties["JIS-CODE"] - b.properties["JIS-CODE"]})
        
        var selector = mapLayer.selectAll(".land")
            .data(data, function(d){ return d.properties.ObjName})
            
        var newSelector = selector.enter().append("path")
            
        newSelector.merge(selector)
            .attr("class", "land")
            .attr("d", function(d){ return d.geoPath })
            .attr("stroke", "green")
            .attr("fill", "#ccffcc")
            .attr("fill-opacity", 0.5)
            
    }
    
    
    function changeMap() {
        mapLayer.selectAll(".land")
            .transition()
            .duration(1200)
            .attr("transform", function(){
                return "translate("+[0, 0]+")"
            })
            .call(endAll, function(){
                mapLayer.selectAll(".land")
                    .transition()
                    .delay(function(d, i){ return i * 100 })
                    .duration(1000)
                    .attr("d", function(d){ return d.geoPath })
            })
            
    }
    
    function changeScatter() {
        mapLayer.selectAll(".land")
            .transition()
            .delay(function(d, i){ return i * 100 })
            .duration(1000)        
            .attr("d", function(d){ return d.scatterPath })
            .call(endAll, function(){
                mapLayer.selectAll(".land")
                    .transition()
                    .duration(1200)
                    .attr('transform', function(d, i){
                        var center = path.centroid(d.properties.geometry);
                        var x = ~~center[0]; 
                        var y = ~~center[1];
                        var nx = xScale(Math.random()*100)  
                        var ny = yScale(Math.random()*100)  
                            return 'translate('+(0-x)+','+(0-y)+'),translate('+nx+','+ny+')';		    
                    });
                    
            })
    
    }
    
    function endAll(transition, callback) {
        var n = 0; 
        transition
            .each(function() { ++n; })     
            .on('end', function() { if (!--n) callback.apply(this, arguments); });
        
    }
    
    
    
    function convert(json) {
        
        var calcCoords = function(polygon, properties) {
            var geoCoords = polygon.map(projection);
            var scatterCoords = d3.geo2circle(geoCoords, 6);
            var scatterPathString = 'M' + scatterCoords.join('L') + 'Z';
            var geoPathString = 'M' + geoCoords.join('L') + 'Z';
            return { scatterPath: scatterPathString, geoPath: geoPathString , properties:properties};
        };	
    
        var reslut  = [];
        for (var i = 0; i < json.features.length; i++) {
            var geometry = json.features[i].geometry;
            var properties =json.features[i].properties;
            properties.geometry = geometry;
            if (geometry.type == 'Polygon') {
                reslut.push(calcCoords(geometry.coordinates[0], properties));			
            } else if (geometry.type == 'MultiPolygon') {
                geometry.coordinates.forEach(function(coordinates){
                    reslut.push(calcCoords(coordinates[0], properties));
                });			
            }
        }
            
        return reslut
    
    }
    
    function toggle(){
        var fn = arguments;
        var l = arguments.length;
        var i = 0;
        return function(){
            if(l <= i) i=0;
            fn[i++]();            
        }
    }
    
    
    function endall(transition, callback) { 
        var n = 0; 
        transition 
            .each(function() { ++n; }) 
            .each('end', function() { if (!--n) callback.apply(this, arguments); }); 
    }      
}());    
  
</script>
</body>
</html>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.1.1/d3.min.js