Skip to content

Instantly share code, notes, and snippets.

@laxmikanta415

laxmikanta415/.block

Created April 21, 2018 04:37
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save laxmikanta415/cb5a5e671c2ea9100a8b92bbac3a899f to your computer and use it in GitHub Desktop.
Save laxmikanta415/cb5a5e671c2ea9100a8b92bbac3a899f to your computer and use it in GitHub Desktop.
Download ZIP
TreemapWithLegends
Raw
.block
license: mit
Raw
index.html
<!DOCTYPE html>
<head>
<meta charset="utf-8">
<script src="https://d3js.org/d3.v4.min.js"></script>
<style>
div#treemap {
font: 10px sans-serif;
position: relative;
}
.node {
box-sizing: border-box;
position: absolute;
overflow: hidden;
}
.node-label {
padding: 4px;
margin: 0px;
color: #fff;
}
.title-top{
font-size: 12px;
}
.small-text{
font-size: 8px;
}
span.text-right{
text-align: right;
position: absolute;
right: 2px;
}
.node-value {
color: rgba(0,0,0,0.8);
font-size: 9px;
margin-top: 1px;
}
</style>
</head>
<body>
<div id="treemap">
</div>
<script>
// Feel free to change or delete any of the code you see in this editor!
var data =[{id: "etf",value: 0,assets: '$20.86',type:'Equity',percentage: '-20.34%',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer1", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer2", value: 50,assets: '$20.86',type:'Equity',percentage: '20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer3", value: 60,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer4", value: 20,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer5", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer6", value: 50,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer7", value: 60,assets: '$20.86',type:'Equity',percentage: '20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer8", value: 20,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer9", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer10", value: 50,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer11", value: 60,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer12", value: 20,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer13", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer14", value: 50,assets: '$20.86',type:'Equity',percentage: '20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer15", value: 60,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer16", value: 20,assets: '$20.86',type:'Equity',percentage: '20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer17", value: 30,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer28", value: 50,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer31", value: 60,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer42", value: 20,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'},
{id: "etf.issuer115", value: 40,assets: '$20.86',type:'Equity',percentage: '-20.34',short:'LBJ',info: 'Direxion Daily Latin America'}
];
var color = d3.scaleOrdinal()
.range(d3.schemeCategory10
.map(function(c) { c = d3.rgb(c); c.opacity = 0.6; return c; }));
var width = 987, height = 400;
var treemap = d3.treemap()
.size([width, height])
.padding(1)
.round(true);
var stratify = d3.stratify()
.parentId(function(d) { return d.id.substring(0, d.id.lastIndexOf(".")); });
var root = stratify(data)
.sum(function(d) { return d.value ? 1 : 0; })
.sort(function(a, b) { return b.height - a.height || b.value - a.value; });
treemap(root);
var rootDivs = d3.select("div#treemap")
.selectAll(".node")
.data(root.leaves())
.enter().append("div")
.attr("class", "node")
.attr("title", function(d) { return d.id; })
.style("left", function(d) { return d.x0 + "px"; })
.style("top", function(d) { return d.y0 + "px"; })
.style("width", function(d) { return d.x1 - d.x0 + "px"; })
.style("height", function(d) { return d.y1 - d.y0 + "px"; })
.style("background", function(d) {
if(d.data.percentage >= 0){
return "#00bb00";
}else{
return "#950410";
}
});
var containerDiv= rootDivs.append("div");
var topRowP = containerDiv
.append('p')
.attr("class", "node-label title-top");
topRowP.append('span')
.text(function(d) { return d.data.short});
topRowP.append('span')
.classed('text-right',true)
.text(function(d) { return d.data.percentage+'%'});
containerDiv.append('p')
.attr("class", "node-label small-text")
.text(function(d) { return d.data.info});
containerDiv.append('p')
.attr("class", "node-label small-text")
.text(function(d) { return d.data.type});
containerDiv.append('p')
.attr("class", "node-label small-text")
.text(function(d) { return 'Total Assets ' +d.data.assets});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment