Last active
June 23, 2017 10:36
-
-
Save vvvhung/b2e88a5d92d95095a6032307a67cc5c8 to your computer and use it in GitHub Desktop.
percentage category
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!DOCTYPE html> | |
<html> | |
<head> | |
<meta charset="utf-8"> | |
<meta http-equiv="X-UA-Compatible" content="IE=edge"> | |
<title></title> | |
<link rel="stylesheet" href=""> | |
<script src="https://d3js.org/d3.v4.min.js"></script> | |
</head> | |
<body> | |
<div id="port"></div> | |
<script> | |
var color = d3.scaleOrdinal(d3.schemeCategory20c); | |
function portfolios_plot(selector, datafile, sclass){ | |
const margin = {top: 20, right: 310, bottom: 30, left: 0}; | |
const width = 500; | |
const height = 400 - margin.top - margin.bottom; | |
const radius = Math.min(width, height) / 2; | |
let legendRectSize = 18; | |
let legendSpacing = 4; | |
d3.csv(datafile, function(error, _data) { | |
_data.columns.slice(1).map((idx)=>{ | |
if(idx == 'class') return; | |
data = _data.map((d,i) => { | |
return {'assest':d.assest,'percentage':d[idx],'class':d['class']};}) | |
data = data.sort((a,b)=>{ | |
let _a, _b; | |
if(a.class=='Safety'){ | |
_a = 0; | |
} | |
else if(a.class=='Income'){ | |
_a = 1; | |
} | |
else if(a.class=='Tactical'){ | |
_a = 2; | |
} | |
else if(a.class=='Accummulation'){ | |
_a = 3; | |
} | |
if(b.class=='Safety'){ | |
_b = 0; | |
} | |
else if(b.class=='Income'){ | |
_b = 1; | |
} | |
else if(b.class=='Tactical'){ | |
_b = 2; | |
} | |
else if(b.class=='Accummulation'){ | |
_b = 3; | |
} | |
return _a - _b; | |
}) | |
if (error) throw error; | |
let arc = d3.arc() | |
.outerRadius(radius) | |
.innerRadius(radius*3/4); | |
let class_arc = d3.arc() | |
.outerRadius(radius*3/4) | |
.innerRadius(radius/2); | |
let labelArc = d3.arc() | |
.outerRadius(radius) | |
.innerRadius(radius); | |
let labelClassArc = d3.arc() | |
.outerRadius(radius*3/4) | |
.innerRadius(radius/2); | |
var pie = d3.pie() | |
.sort((d)=>{ | |
}) | |
.value(function(d) { | |
if(inner_flag){ | |
if(last_class == d.class){ | |
cummulate += d.percentage; | |
return null; | |
} | |
else{ | |
_l = cummulate; | |
cummulate = 0; | |
last_class = d.class; | |
return _l; | |
} | |
} | |
else{ | |
return d.percentage; | |
} | |
}); | |
var pie2 = d3.pie() | |
.sort((d)=>{ | |
}) | |
.value(function(d) { | |
}); | |
var svg = d3.select(selector).append("svg") | |
.attr("class", "risk-level " + idx + ' ' + sclass) | |
.attr("width", width + margin.left + margin.right).attr("height", height + margin.top + margin.bottom) | |
var bg = svg.append("g") | |
.attr("transform", "translate(" + width / 2 + "," + height / 2 + ")"); | |
let filter_data = data; | |
data = data.filter((d)=>{ return d.percentage > 1e-2 }); | |
var last_class = '', cummulate = 0; | |
var inner_flag = false; | |
let g = bg.selectAll(".arc") | |
.data(pie(data)) | |
.enter().append("g") | |
.attr("class", "arc"); | |
g.append("path").attr("d", arc) | |
.style("fill", function(d,i) { | |
return color(d.data.assest); | |
}) | |
.style("stroke","#fff") | |
; | |
inner_flag = true; | |
g.append("path").attr("d", class_arc) | |
.style("fill", function(d,i) { | |
d = d.data.class; | |
if(d=='Safety'){ | |
return d3.rgb(51, 153, 102) | |
} | |
else if(d=='Income'){ | |
return d3.rgb(46, 92, 184) | |
} | |
else if(d=='Tactical'){ | |
return d3.rgb(71, 71, 209) | |
} | |
else if(d=='Accummulation'){ | |
return d3.rgb(230, 115, 0) | |
} | |
}) | |
.style("stroke",function(d,i) { | |
d = d.data.class; | |
if(d=='Safety'){ | |
return d3.rgb(51, 153, 102) | |
} | |
else if(d=='Income'){ | |
return d3.rgb(46, 92, 184) | |
} | |
else if(d=='Tactical'){ | |
return d3.rgb(71, 71, 209) | |
} | |
else if(d=='Accummulation'){ | |
return d3.rgb(230, 115, 0) | |
} | |
}) | |
.attr("class","dropdown") | |
.on('mouseover', function(d) {d3.select(this).selectAll("p").style("display","block"); }) | |
.on("mouseout", function() {d3.select(this).selectAll("p").style("display","none");}) | |
.append("p").html(function(d){return d.data.class;}) | |
.style("display","none") | |
.attr("class","dropdown-content") | |
.style("z-index", 1000000) | |
let legend1 = svg.selectAll('.legend') | |
.data(data) | |
.enter() | |
.append('g') | |
.attr('class', 'legend') | |
.attr('transform', function(d, i) { | |
var height = legendRectSize + legendSpacing; | |
var offset = height; | |
var horz = width + margin.left + 10; | |
var vert = i * height +10; | |
return 'translate(' + horz + ',' + vert + ')'; | |
}); | |
class_data = ['Safety','Income','Tactical','Accummulation'] | |
let legend2 = svg.selectAll('.legend2') | |
.data(class_data) | |
.enter() | |
.append('g') | |
.attr('class', 'legend2') | |
.attr('transform', function(d, i) { | |
var height_ = legendRectSize + legendSpacing; | |
var offset = height/ 2; | |
var horz = -2 * legendRectSize + width / 2 ; | |
var vert = (i-2) * height_ + offset; | |
return 'translate(' + horz + ',' + vert + ')';}); | |
legend1.append('rect') | |
.attr('width', legendRectSize) | |
.attr('height', legendRectSize) | |
.style('fill', (d,i)=>{ | |
return color(d.assest) | |
}); | |
legend1.append('text') | |
.attr('x', legendRectSize + legendSpacing) | |
.attr('y', legendRectSize - legendSpacing) | |
.style('fill',(d)=>{ | |
return 'black'; | |
}) | |
.style("font-weight", (d)=>{ | |
if(d.percentage > 0){ | |
return "bold"; | |
} | |
else{ | |
return ''; | |
} | |
}) | |
.text((d) => { return d.assest + '['+parseInt(d.percentage*100)+'%]'; }); | |
legend2.append('rect') | |
.attr('width', legendRectSize) | |
.attr('height', legendRectSize) | |
.style('fill', (d,i)=>{ | |
if(d=='Safety'){ | |
return d3.rgb(51, 153, 102) | |
} | |
else if(d=='Income'){ | |
return d3.rgb(46, 92, 184) | |
} | |
else if(d=='Tactical'){ | |
return d3.rgb(71, 71, 209) | |
} | |
else if(d=='Accummulation'){ | |
return d3.rgb(230, 115, 0) | |
} | |
}); | |
legend2.append('text') | |
.attr('x', legendRectSize + legendSpacing) | |
.attr('y', legendRectSize - legendSpacing) | |
.text((d) => { return d; }); | |
}); | |
}); | |
function type(d) { | |
d.percentage = +d.percentage; | |
return d; | |
} | |
} | |
portfolios_plot('#port', 'portfolios.csv', 'portfolios'); | |
</script> | |
</body> | |
</html> |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
assest | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | class | |
---|---|---|---|---|---|---|---|---|---|---|---|---|---|
-- | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | Safety | |
ターゲットイヤー2021?2030 | -0.0 | 0.00039 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Safety | |
ターゲットイヤー2031? | -0.0 | 0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | 0.0 | Income | |
ターゲットイヤー?2020 | 0.0 | 0.0556 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Safety | |
バランス | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | Income | |
ヘッジファンド | 0.0 | 0.04707 | -0.0 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Safety | |
国内REIT | -0.0 | 0.0004 | 0.00178 | 0.01205 | 0.01114 | 0.00834 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | Accummulation | |
国内中型グロース | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | Accummulation | |
国内中型バリュー | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | 0.0 | Accummulation | |
国内中型ブレンド | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 9e-05 | 0.0 | 0.0 | -0.0 | -0.0 | 0.0 | Accummulation | |
国内債券・中長期債 | 0.0 | 0.15466 | 0.25782 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | 0.0 | -0.0 | Safety | |
国内債券・物価連動債 | 0.0 | 0.15805 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | Safety | |
国内債券・短期債 | 1.0 | 0.23527 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | Safety | |
国内債券・転換社債 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Income | |
国内大型グロース | -0.0 | -0.0 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | Accummulation | |
国内大型バリュー | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | Accummulation | |
国内大型ブレンド | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | Accummulation | |
国内小型グロース | -0.0 | 0.04627 | 0.14209 | 0.22504 | 0.32711 | 0.44445 | 0.6595 | 0.94451 | 0.63131 | 0.31111 | 0.0 | Accummulation | |
国内小型バリュー | -0.0 | 0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | Accummulation | |
国内小型ブレンド | -0.0 | -0.0 | -0.0 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | 0.0 | Accummulation | |
国際REIT・グローバル・含む日本(F) | 0.0 | -0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | Tactical | |
国際REIT・グローバル・含む日本(H) | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | Safety | |
国際REIT・グローバル・除く日本(F) | -0.0 | -0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | -0.0 | 0.0 | Tactical | |
国際REIT・特定地域(F) | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | -0.0 | Tactical | |
国際債券・エマージング・複数国(F) | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | -0.0 | Tactical | |
国際債券・オセアニア(F) | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | Income | |
国際債券・グローバル・含む日本(F) | 0.0 | -0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | Safety | |
国際債券・グローバル・除く日本(F) | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Income | |
国際債券・ハイイールド債(F) | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | Income | |
国際債券・北米(F) | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Income | |
国際債券・欧州(F) | -0.0 | 0.00018 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | Income | |
国際債券・物価連動債(F) | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | Income | |
国際債券・短期債(F) | 0.0 | -0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Income | |
国際債券・転換社債(F) | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | Income | |
国際債券・転換社債(H) | 0.0 | 0.18099 | 0.4513 | 0.51972 | 0.24365 | 0.023 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | Safety | |
国際株式・インド(F) | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | Accummulation | |
国際株式・エマージング・単一国(F) | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | -0.0 | Tactical | |
国際株式・エマージング・複数国(F) | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | Tactical | |
国際株式・オセアニア(F) | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | Tactical | |
国際株式・グローバル・含む日本(F) | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | Tactical | |
国際株式・グローバル・含む日本(H) | 0.0 | 0.00788 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Safety | |
国際株式・グローバル・除く日本(F) | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0395 | -0.0 | 0.0 | -0.0 | 0.0 | Tactical | |
国際株式・グローバル・除く日本(H) | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | Safety | |
国際株式・ブラジル(F) | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | Accummulation | |
国際株式・ロシア(F) | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | Accummulation | |
国際株式・中国(F) | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | Accummulation | |
国際株式・中国(H) | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | Tactical | |
国際株式・北米(F) | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | 0.0 | 0.0 | 0.0 | -0.0 | 0.0 | Tactical | |
国際株式・北米(H) | -0.0 | 0.06111 | 0.11239 | 0.16612 | 0.28981 | 0.30822 | 0.01573 | -0.0 | 0.0 | -0.0 | 0.0 | Income | |
国際株式・欧州(F) | -0.0 | 0.00015 | 0.03462 | 0.07707 | 0.12829 | 0.21587 | 0.28526 | 0.00396 | 0.0 | -0.0 | 0.0 | Tactical | |
国際株式・欧州(H) | -0.0 | 0.00834 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | 0.0 | Income | |
安定 | 0.0 | 0.01891 | 0.0 | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | Safety | |
安定成長 | -0.0 | 0.0 | 0.0 | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | Income | |
成長 | -0.0 | 0.0 | -0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | 0.0 | -0.0 | 0.0 | Tactical | |
株式ブル型 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | 3e-05 | 0.0 | 0.05153 | 0.36869 | 0.68889 | 1.0 | Accummulation | |
為替ブル型 | 0.0 | -0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | 0.0 | 0.0 | -0.0 | -0.0 | Tactical | |
評価対象外 | 0.0 | 0.02472 | 0.0 | 0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | -0.0 | Safety |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment