地図変形・円グラフ

地図をクリックすると円グラフに変化します。

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

#stage {
    width: 100%;
    height: 100%;
}
svg {
    width: 100%;
    height: 100%;
}

.hidden {
    display: none;
}
</style>

</head>

var svg = d3.select("#stage").append("svg")
            
    var overLayer = svg.append("g").attr("class", "overLayer")
        .attr("width", stageW)
        .attr("height", stageH)
        .attr("transform", "translate("+[margin.left, margin.top]+")")
        
    
    var mapLayer = svg.append("g").attr("class", "mapLayer")
        .attr("width", stageW)
        .attr("height", stageH)
        .attr("transform", "translate("+[margin.left, margin.top]+")")

var pieColor = ["red", "blue"]
            
 
    var pieBg = overLayer.append("circle").attr("class", "pieBg").attr("r", radius)
            .attr("stroke", "green")
            .attr("fill", "#ccffcc")
            .attr("opacity", 0)
    
    var pieGroup = overLayer.append("g").attr("class", "pieGroup").attr("opacity", 0)

pieBg.attr("transform", "translate("+[stageW/2, stageH/2]+")")
    pieGroup.attr("transform", "translate("+[stageW/2, stageH/2]+")")

var xScale = d3.scaleLinear().domain([0, 100]).range([0, stageW])
    var yScale = d3.scaleLinear().domain([0, 100]).range([stageH, 0])    
        
    var projection = d3.geoMercator()	
        .scale(stageW*1.4)
        .translate([stageW/2,stageH/1.7])
        .center([139.0032936, 36.3219088]); 
    
    
    var geoPath = d3.geoPath().projection(projection);　
    
    
    var arcPath = d3.arc()
        .outerRadius(radius)
        .innerRadius(radius/2)

var arcs = d3.pie()
        .sort(null)
        .value(function(d) {  return d.value })
    
    d3.json('japan.geojson', main)
    
    
    function main(json) {
        json.features.forEach(function(d){
            d.properties.gender = [
                {type:"male", value:(Math.random()*100)},
                {type:"female", value:(Math.random()*100)},
            ]
        })
        
        
        var data = convert(json)
        
        drawMaps(data)
            
        var toggleFn = toggle(
            function(that) {
                drawPie(d3.select(that).datum())
                changeScatter(that)
            },
            function (that) {                
               changeMap(that)
            }
        )
    
        
        mapLayer.selectAll(".land").on("click", function(d){
            toggleFn(this)        
        })
    }
    
    function drawPie(data) {
        var genderData = data.properties.gender
            
        pieGroup.data([genderData])
        
        var block = pieGroup.selectAll(".arc")
            .data(arcs(genderData))
            
        var newBlock = block.enter().append("g").classed("arc", true)

newBlock.append("path")
            .attr("d", function(d){ return arcPath({startAngle:0, endAngle:0})})
            .attr("id", function(d, i) { return "arc-" + i })
            .attr("stroke-width", 2)
            .attr("stroke", "green")
            .attr("fill", function(d,i){ return pieColor[i] })
            .attr("fill-opacity", 0.5)

}
    
    function drawMaps(data) {
                 
        var selector = mapLayer.selectAll(".land")
            .data(data, function(d){ return d.properties.ObjName})
            
        var newSelector = selector.enter().append("path")
            
        newSelector.merge(selector)
            .attr("class", function(d){return "land " + d.properties.pref })
            .attr("d", function(d){ return d.geoPath })
            .attr("stroke", "green")
            .attr("fill", "#ccffcc")
            .attr("opacity", 1)

}
    
    
    
    function changeMap(that) {
        var lands = mapLayer.selectAll(".land")
 
        var filtered = lands.filter(function(){ return this != that })
        var selected = lands.filter(function(){ return this == that })
           
        pieGroup.selectAll("path")
            .transition() //円グラフ閉じる
            .duration(800)
            .attrTween("d", function(b) {
                var i = d3.interpolate(b, {startAngle: 0, endAngle: 0});
                return function(t) {  return arcPath(i(t)); };
            })
            .on("end", function(){
                pieGroup.attr("opacity", 0)
                pieBg.attr("opacity", 0)
                selected.attr("opacity", 1)
                
                
                
                selected
                    .transition()   //縮小
                    .duration(600)                                                
                    .attr("d", function(d){ return d.scatterPath })
                    .transition()   //元の位置に戻る
                    .duration(800) 
                    .attr('transform', "translate(0, 0)")
                    .transition()   //地形に変形
                    .duration(600)                           
                    .attr("d", function(d){ return d.geoPath })
                    .on("end", function(d){
                    
                        lands.each(function(d){
                            d.order = d.properties["JIS-CODE"]
                        })
                        .sort(function(a,b){ return a.order - b.order})
                        
                        filtered.classed("hidden", false)
                            .transition()   //日本地図をフェードイン
                            .duration(600)            
                            .attr("opacity", 1)                                            
                        
                                                        
                    })
                            
            })
    }
    
    function changeScatter(that) {        
        var lands = mapLayer.selectAll(".land")
        
        lands.each(function(d){
            if(this == that) d.order = 999
        })
        .sort(function(a,b){ return a.order - b.order})
        
        var filtered = lands.filter(function(){ return this != that })
        var selected = lands.filter(function(){ return this == that })
            
            
            
        filtered.transition()
            .duration(600)  //日本地図をフェードアウト
            .attr("opacity", 0)
            .on("end", function(){
                lands.filter(function(){ return this != that }).classed("hidden", true)
            })

selected
            .transition()   //円に変形
            .duration(600)
            .attr("d", function(d){ return d.scatterPath })
            .transition()   //中心へ移動
            .duration(800)
            .attr('transform', function(d, i){
                return 'translate('+(0-d.center.x)+','+(0-d.center.y)+'),translate('+d.center.nx+','+d.center.ny+')';		    
            })
            .transition()   //円を拡大
            .duration(600)                            
            .attr("d", function(d){ return d.piePath })
            .on("end", function(){
                selected.attr("opacity", 0) 
                pieBg.attr("opacity", 1)
                pieGroup.attr("opacity", 1)
                    .selectAll("path")
                    .transition()
                    .duration(800)
                    .attrTween("d", function(b) {
                        var i = d3.interpolate({startAngle: 0, endAngle: 0}, b);
                        return function(t) {  return arcPath(i(t)); };
                    })
                
            })
    }
    
    
    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 pieCoords = d3.geo2circle(geoCoords, radius);
            var piePathString = 'M' + pieCoords.join('L') + 'Z';

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