syntagmatic · August 29, 2015 14:05
diff --git a/README.md b/README.md
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <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="http://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>
diff --git a/thumbnail.png b/thumbnail.png
diff --git a/vfinx500.csv b/vfinx500.csv
	<!DOCTYPE html>
	<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="http://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>