Skip to content

Instantly share code, notes, and snippets.

@vvvhung

vvvhung/index.html

Last active June 23, 2017 10:36
Show Gist options
  • Save vvvhung/b2e88a5d92d95095a6032307a67cc5c8 to your computer and use it in GitHub Desktop.
Save vvvhung/b2e88a5d92d95095a6032307a67cc5c8 to your computer and use it in GitHub Desktop.
Download ZIP
percentage category
Raw
index.html
<!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>
Raw
portfolios.csv
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