中学生アンケート

データは以下より

山本弘のSF秘密基地BLOG:中学生の6割は「月は西からのぼる」と信じている。（1）

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge"/>
<title></title>
<style>
#chart {
    width: 960px;
    height: 480px;
}

.bg {
	display: none;
}

/* axis */
.axisLayer .axis {
}
.axisLayer .axis .domain {
	stroke: #333333;
}
.axisLayer .tick line {
	display: none;
}
.axisLayer .tick text {
	fill: #333333;
	/*font-family: Oswald, sans-serif;*/
	font-size: 10px;
	letter-spacing: .05em;
}

/* grid */
.backgroundLayer .grid line {
	stroke: #cccccc;
	stroke-dasharray: 3,3;
}

/* grind のベースライン */
.backgroundLayer .grid .domain {
	stroke: none;
}

.bar0 {
    fill:#2851cc;
}
.bar1 {
    fill:#837373;
}
.bar2 {
    fill:#cc2828;
}

.label0 {
    color:#2851cc;
}
.label1 {
    color:#837373;
}
.label2 {
    color:#cc2828;
}

</style>

</head>

<body>

function makeDataset(data){
    var reslut = {
        "正答率(%)": genData("正答率(%)"),
        "不明率(%)": genData("不明率(%)"),
        "誤答率(%)": genData("誤答率(%)"),
    }
    
    
    function genData(sortKey) {
        var temp = []
        data.sort(function(a,b){
            return a[sortKey] - b[sortKey]
        })
            
        data.forEach(function(d){
            [
             {type:"正答率(%)", answer:"正答", count:"正答数"},
             {type:"不明率(%)", answer:"不明", count:"不明数"},
             {type:"誤答率(%)", answer:"誤答", count:"誤答数"}
            ]
            .forEach(function(list){
                var question = d["質問"]
                var percent = d[list.type]
                var count = d[list.count]
                var answer = d[list.answer]
                
                
                temp.push({question:question, type:list.type, percent:percent, count:count, answer:answer, title:list.answer})
            })
            
        })

return temp
    }
    
    return reslut

}    
    
function main(data){
    var tooltipFormat = function(d, i){
        return {
            title:d["title"],
            items: [
                { title: '質問', value: d["question"]},                
                { title: '解答', value: d["answer"]},
                { title: '人数', value: d["count"]},
                { title: '比率', value: d["percent"]+"%"}
            ]
        }
    }    
    
    
    var dataset = makeDataset(data)
        
    //チャートモジュール初期化
    var BarChart = nChart.createHStackBarChart()
        .baseMargin({top:10, left:0, bottom:10, right:20})
        .plotMargin({top:20, left:320, bottom:20, right:10})
        .x(function(d){ return d["percent"] })
        .y(function(d){ return d["question"] })
        .s(function(d){ return d["type"] })

//アクシスモジュール初期化
    var Axis = nChart.createAxis()
            .yAxisDomainLineVisible(false)
    
    
    //セレクターにモジュールをバインド
    var selector = d3.selectAll("#chart")
        .datum(dataset["正答率(%)"])
        .call(BarChart)    
        .call(Axis)
    
    
    selector.selectAll(".bar").call(d3.kodama.tooltip().format(tooltipFormat))
    
    d3.select("#sort_type").selectAll("input").on("click", function(){
        selector.update(dataset[this.dataset.key])
    })
        
}    
   
    
</script> 
</body>
</html>

Updated missing url //bl.ocks.org/shimizu/raw/0b526eab82263c8443108c33e454d221/nChart.js to //bl.ocks.org/shimizu/0b526eab82263c8443108c33e454d221/nchart.js

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

https://bl.ocks.org/shimizu/raw/0b526eab82263c8443108c33e454d221/nChart.js