jonsadka · April 17, 2018 00:53
diff --git a/.block b/.block
 license: gpl-3.0
diff --git a/README.md b/README.md
diff --git a/data.csv b/data.csv
diff --git a/index.html b/index.html
 <!DOCTYPE html>
 <meta charset="utf-8">
 <style>

 rect {
  stroke: #fff;
 }

 </style>
 <body>
 <script src="//d3js.org/d3.v4.min.js"></script>
 <script>

 const width = 960,
    height = 500;

 const x = d3.scaleLinear()
    .range([0, width]);

 const y = d3.scaleLinear()
    .range([0, height]);

 const color = d3.scaleOrdinal(d3.schemeCategory20c);

 const partition = d3.partition()
    .size([width, height])
    .padding(0)
    .round(true);

 const svg = d3.select("body").append("svg")
    .attr("width", width)
    .attr("height", height);

 let rect = svg.append("g")
  .selectAll("rect");

 let text = svg.append("g")
  .attr("fill", "white")
  .selectAll("text");

 let hoverText = svg.append("text")
  .attr("font-size", 24)
  .attr("fill", "gray")
  .attr("x", 10)
  .attr("y", height - 22);

 d3.csv("data.csv", function(error, root) {
  if (error) throw error;

  root = d3.nest()
    .key(d => d.state)
    .key(d => d.city)
    .key(d => d.neighborhood)
    .rollup(v => d3.sum(v, d => 1))
    .object(root);  

  root = d3.hierarchy(d3.entries(root)[0], d => d3.entries(d.value))
    .sum(d => d.value)
    .sort((a, b) => b.value - a.value);

  partition(root);

  rect = rect
      .data(root.descendants())
    .enter().append("rect")
      .attr("x", d => d.x0)
      .attr("y", d => d.y0)
      .attr("width", d => Math.round(d.x1 - d.x0))
      .attr("height", d => d.y1 - d.y0)
      .attr("fill", d => color((d.children ? d : d.parent).data.key))
      .on("mouseover", hovered)
      .on("mouseout", unhovered)
      .on("click", clicked);

  text = text
      .data(root.descendants())
    .enter().append("text")
      .text(d => d.x1 - d.x0 > 50 ? d.data.key : '')
      .attr("class", d => d.data.key)
      .attr("x", d => d.x0 + 4)
      .attr("y", d => d.y0 + 16)

 });

 function hovered(d) {
  let text = d.data.key;
  let cursor = d;
  while (cursor.parent) {
    text = cursor.parent.data.key + ' > ' + text
    cursor = cursor.parent
  }
  
  const percentage = d.value / cursor.value;
  text += ` (${Math.round(percentage * 10000)/100}%)`

  hoverText.text(text)
 }

 function unhovered() {
  hoverText.text('')
 }

 function clicked(d) {
  x.domain([d.x0, d.x1]);
  y.domain([d.y0, height]).range([d.depth ? 20 : 0, height]);

  rect.transition()
    .duration(750)
    .attr("x", d => x(d.x0))
    .attr("y", d => y(d.y0))
    .attr("width", d => x(d.x1) - x(d.x0))
    .attr("height", d => y(d.y1) - y(d.y0));

  text.transition()
    .duration(750)
    .attr("x", d => x(d.x0) + 4)
    .attr("y", d => y(d.y0) + 16)
    .text(d => x(d.x1) - x(d.x0) > 50 ? d.data.key : '');
 }

 </script>
 </body>
diff --git a/thumbnail.png b/thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	rect {
	stroke: #fff;
	}

	</style>
	<body>
	<script src="//d3js.org/d3.v4.min.js"></script>
	<script>

	const width = 960,
	height = 500;

	const x = d3.scaleLinear()
	.range([0, width]);

	const y = d3.scaleLinear()
	.range([0, height]);

	const color = d3.scaleOrdinal(d3.schemeCategory20c);

	const partition = d3.partition()
	.size([width, height])
	.padding(0)
	.round(true);

	const svg = d3.select("body").append("svg")
	.attr("width", width)
	.attr("height", height);

	let rect = svg.append("g")
	.selectAll("rect");

	let text = svg.append("g")
	.attr("fill", "white")
	.selectAll("text");

	let hoverText = svg.append("text")
	.attr("font-size", 24)
	.attr("fill", "gray")
	.attr("x", 10)
	.attr("y", height - 22);

	d3.csv("data.csv", function(error, root) {
	if (error) throw error;

	root = d3.nest()
	.key(d => d.state)
	.key(d => d.city)
	.key(d => d.neighborhood)
	.rollup(v => d3.sum(v, d => 1))
	.object(root);

	root = d3.hierarchy(d3.entries(root)[0], d => d3.entries(d.value))
	.sum(d => d.value)
	.sort((a, b) => b.value - a.value);

	partition(root);

	rect = rect
	.data(root.descendants())
	.enter().append("rect")
	.attr("x", d => d.x0)
	.attr("y", d => d.y0)
	.attr("width", d => Math.round(d.x1 - d.x0))
	.attr("height", d => d.y1 - d.y0)
	.attr("fill", d => color((d.children ? d : d.parent).data.key))
	.on("mouseover", hovered)
	.on("mouseout", unhovered)
	.on("click", clicked);

	text = text
	.data(root.descendants())
	.enter().append("text")
	.text(d => d.x1 - d.x0 > 50 ? d.data.key : '')
	.attr("class", d => d.data.key)
	.attr("x", d => d.x0 + 4)
	.attr("y", d => d.y0 + 16)

	});

	function hovered(d) {
	let text = d.data.key;
	let cursor = d;
	while (cursor.parent) {
	text = cursor.parent.data.key + ' > ' + text
	cursor = cursor.parent
	}

	const percentage = d.value / cursor.value;
	text += ` (${Math.round(percentage * 10000)/100}%)`

	hoverText.text(text)
	}

	function unhovered() {
	hoverText.text('')
	}

	function clicked(d) {
	x.domain([d.x0, d.x1]);
	y.domain([d.y0, height]).range([d.depth ? 20 : 0, height]);

	rect.transition()
	.duration(750)
	.attr("x", d => x(d.x0))
	.attr("y", d => y(d.y0))
	.attr("width", d => x(d.x1) - x(d.x0))
	.attr("height", d => y(d.y1) - y(d.y0));

	text.transition()
	.duration(750)
	.attr("x", d => x(d.x0) + 4)
	.attr("y", d => y(d.y0) + 16)
	.text(d => x(d.x1) - x(d.x0) > 50 ? d.data.key : '');
	}

	</script>
	</body>