Data scraped from VFINX 500 holdings on August 25, 2014.
xxxxxxxxxx
<meta charset="utf-8">
<style>
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
margin: auto;
position: relative;
width: 960px;
}
form {
position: absolute;
right: 10px;
top: 10px;
}
.node {
border: solid 1px white;
font: 10px sans-serif;
color: #fff;
line-height: 12px;
overflow: hidden;
position: absolute;
text-indent: 2px;
cursor: crosshair;
}
.tooltip {
background: #fff;
position: absolute;
z-index: 100;
top: 80px;
left: 90px;
width: 200px;
padding: 10px;
pointer-events: none;
font-size: 13px;
}
.tooltip h4 {
margin: 0;
padding: 0;
}
.tooltip p {
margin-bottom: 0;
}
</style>
<body>
<script src="https://d3js.org/d3.v3.min.js"></script>
<script>
var margin = {top: 4, right: 4, bottom: 4, left: 4},
width = 960 - margin.left - margin.right,
height = 500 - margin.top - margin.bottom;
var color = d3.scale.category20c();
var treemap = d3.layout.treemap()
.size([width, height])
.sticky(true)
.padding(1)
.children(function(d, depth) { return d.values; })
.value(function(d) { return d.value; });
var div = d3.select("body").append("div")
.style("position", "relative")
.style("width", (width + margin.left + margin.right) + "px")
.style("height", (height + margin.top + margin.bottom) + "px")
.style("left", margin.left + "px")
.style("top", margin.top + "px");
var tooltip = div.append("div")
.attr("class", "tooltip")
.style("display", "none")
.text("Testing");
d3.csv("vfinx500.csv", function(error, data) {
data.forEach(function(d) {
d.value = parseInt(d["Market Value"].replace("$","").replace(/,/g,""));
})
var root = d3.nest()
.key(function(d) { return "root"; })
// .key(function(d) { return d.subreddit; })
.entries(data)[0];
console.log("root", root);
console.log("treemap", treemap.nodes(root));
var node = div.datum(root).selectAll(".node")
.data(treemap.nodes)
.enter().append("div")
.attr("class", "node")
.call(position)
.style("background", function(d) { return d.values ? null : "#777"; })
.text(function(d) { return d.values ? null : d.Holding; })
.on("mousemove", function(d) {
var pos = d3.mouse(this);
tooltip
.style("display", "block")
.style("top", (d.y + pos[1]) + "px")
.style("left", d.x > width/2
? (d.x + pos[0] - 220) + "px"
: (d.x + pos[0]) + "px")
.html("");
tooltip.append("h4")
.text(d.Holding);
tooltip.append("p")
.text(d["Market Value"]);
})
.on("mouseout", function(d) {
tooltip
.style("display", "none");
})
});
function position() {
this.style("left", function(d) { return d.x + "px"; })
.style("top", function(d) { return d.y + "px"; })
.style("width", function(d) { return Math.max(0, d.dx - 1) + "px"; })
.style("height", function(d) { return Math.max(0, d.dy - 1) + "px"; });
}
</script>
Modified http://d3js.org/d3.v3.min.js to a secure url
https://d3js.org/d3.v3.min.js