D3 Examples - 中学生アンケート

xxxxxxxxxx
 
<!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>
​
<div id="sort_type">
    <label  class="label0"><input type="radio" name="sort" data-key="正答率(%)" checked="checked">正答率</label>
    <label class="label1" ><input type="radio" name="sort" data-key="不明率(%)">不明率</label>
    <label class="label2"><input type="radio" name="sort" data-key="誤答率(%)">誤答率</label>
</div>
​
<div id="chart"></div>
​
​
​
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/4.3.0/d3.min.js"></script>    
<script src="//bl.ocks.org/shimizu/0b526eab82263c8443108c33e454d221/nchart.js"></script>
<script src="kodama.js"></script>
<script>    
var cast = function(d){
    Object.keys(d).forEach(function(key){
        if (!isNaN(+d[key])) d[key] = +d[key]   
    })
    return d 
}
    
d3.tsv("data.tsv", cast,  main)    
    
    
​
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>
​
    