proclamo-zz/README.md

## README.md

      
    Raw
  

              README.md
            
          
    Please, open in the new window to view the full example
This is the first version of a d3 plugin for automatic labeling. I called it labeling.
Each overlapped label rotates until no more overlaps. If one label reach the last position there is three options:

scale( factor ): the label scales factor times and run again the algorithm. scale can be called multiple times with different parameters.
legend(): transforms the label into a number and builds an internally legend which can be returned with the getLegend() function.
remove(): the label is removed.

The basic functioning is shown here:
d3.labeling()
  .select('.label')
  .align()

select can be a d3's valid string selector or a function which returns a d3 selection:
d3.labeling()
  .select(function() { 
     return d3.selectAll('.place-label')
       .sort(function(a,b) { 
           return d3.geo.area(b.geometry) - d3.geo.area(a.geometry); 
       })
  })
  .align();

In the example we have:
d3.labeling()
  .select('.place-label')		// className of the labels
  .legend()				// builds a legend
  .scale(.8)			// if no fit, scales down 0.8 times the label (or number)
  .scale(.5)			// idem but scales 0.5 times    
  .remove()				// else removes
  .align();      			// start


## index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style>

.countries {
  fill: #ccc;
  stroke: #fff;
}
.place,
.place-label {
  fill: #444;
}

text {
  font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
  font-size: 10px;
  pointer-events: none;
}

.map svg {
  background-color: white;
}

.land {
  opacity: .7;
  stroke: #888;
}

div.legend {
  position: absolute;
  font-size: 10px;
  top: 10px;
  left: 950px;
}

div.legend ul {
  list-style-type: none;
}

div.legend .counter {
  font-weight: bold;
}

</style>
<body>
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script type="text/javascript" src="labeling.js"></script>

<script>
var width = 960,
    height = 500;

var projection = d3.geo.mercator()
    .center([0,37])
    .scale(450 / Math.PI)
    .translate([width / 2, height / 2]);

var path = d3.geo.path()
    .projection(projection);

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

d3.json("world.json", function(error, world) {

  var countries = topojson.feature(world, world.objects.countries),
      geometries = countries.features;

  svg.selectAll(".land")
        .data(countries.features)
        .enter()
          .append("path")
          .attr("class", "land")
          .attr("d", path)
          .style("fill", "#cacaca");

  svg.selectAll(".place-label")
        .data(geometries)
      .enter()
        .append("text")
        .attr("class", "place-label")
        .text(function(d) { return d.properties.name; })
        .attr("x", function(d) { return path.centroid(d)[0]; })
        .attr("y", function(d) { return path.centroid(d)[1]; });

  var labeling = d3.labeling()
    .select('.place-label')
    .legend()
    .scale(.8)
    .scale(.5)
    .remove()
    .align();

  var legend = d3.select('body')
    .append('div')
      .attr('class', 'legend')
    .append('div')
      .attr('class', 'counter')
      .text("Visible countries: " + d3.selectAll('.place-label')[0].length + " of 177")
    .append('ul');

  legend.selectAll('.legend')
    .data(labeling.getLegend())
    .enter()
      .append('li')
      .text(function(d) { return d.key + ': ' + d.name; });

  });

</script>


## labeling.js
;
d3.labeling = function() {

	var labeling = {}, className, labels, callbacks = [], callbackpos = -1,
		updateLabels = false, _break = false, legend = [];

	labeling.select = function(_className) {
		className = _className;
		labels = getLabels();
		return labeling;
	}

	var getLabels = function() {

		if (typeof className === "string") {
			return svg.selectAll(className);
		}
		else {
			return className.call(this);
		}
	}

	labeling.remove = function() {
		callbacks.push(labeling_remove);
		updateLabels = true;
		return labeling;
	}

	labeling.scale = function(_scaleFactor) {

		var scaleFactor = _scaleFactor || .75;

		// currying: https://medium.com/@kbrainwave/currying-in-javascript-ce6da2d324fe
		var fn = function(label) {
			return labeling_scale(label, scaleFactor);
		}

		callbacks.push(fn);

		return labeling;
	}

	labeling.legend = function() {
		callbacks.push(labeling_legend);
		updateLabels = true;
		return labeling;
	}

	var labeling_remove = function(label) {
		label.remove();
	}

	var labeling_scale = function(label,factor) {

		var x = +label.attr("x"), y = +label.attr("y"),
			scaleFactor = factor < 1 ? 1 - factor : - (factor - 1),
			transform = "translate(" + (x * scaleFactor) + "," + (y * scaleFactor) + ") scale(" + factor + ")";

		label.attr("transform", transform);
	}

	var labeling_legend = function(label) {

		legend.push(label.text());

		label.text(legend.length);

	}

	var next = function(label) {

		var box = getBox(label);

		var pos = label.attr("data-pos") || 0;

		pos++;

		if (pos === 8) {

			var calls = label.attr("data-calls") || -1;

			calls++;

			label.attr("data-calls", calls);

			if (calls < callbacks.length) {
				var fn = callbacks[calls];
				fn.call(this, label);
			}

			pos = 0;
			box = getBox(label);

			// prevent infinite loop
			if (!callbacks.length) {
				_break = true;
			}

		}

		label.attr("data-pos", pos);

		var x = +label.attr("x"), y = +label.attr("y");

		switch(pos) {
			case 0:
			case 1:
				y += box.height/2;
				break;
			case 2:
			case 3:
				x -= box.width/2;
				break;
			case 4:
			case 5:
				y -= box.height/2;
				break;
			case 6:
			case 7:
				x += box.width/2;
				break;
		}

		label.attr("x", x).attr("y", y);

	}

	var overlaps = function(a, b) {

		return (
			(a.left <= b.left && b.left <= a.right)
			||
			(a.left <= b.right && b.right <= a.right)
		)
		&&
		(
			(a.top <= b.top && b.top <= a.bottom)
			||
			(a.top <= b.bottom && b.bottom <= a.bottom)
		);
	}

	var getBox = function(d) {
		return d[0][0].getBoundingClientRect();
	}

	labeling.align = function() {

		var overlappeds;

		do {
			overlappeds = 0;

			labels.each(function() {
				var current = this;
				var box_text = getBox(d3.select(current));

				var _overlappeds = labels[0].filter(function(d) {
					if (d === current) return false;
					return overlaps(box_text, getBox(d3.select(d)));
				});

				overlappeds += _overlappeds.length;

				_overlappeds.forEach(function(el) {
					next(d3.select(el));
				});

			});

			if (updateLabels) {
				labels = getLabels(className);
			}

		} while (overlappeds > 0 && !_break);

		return labeling;
	}

	labeling.getLegend = function() {

		return legend.map(function(d, i) {
			return { key: i + 1, name: d }
		});
	}

	return labeling;

}

## thumbnail.png

      
    Raw
  

              thumbnail.png
            
          
## world.json

      
Display the source blob

    
Display the rendered blob

    
    Raw
  

              world.json
            
          
      Sorry, something went wrong. Reload?
      Sorry, we cannot display this file.
      Sorry, this file is invalid so it cannot be displayed.
      
          Viewer requires iframe.
	<!DOCTYPE html>
	<meta charset="utf-8">
	<style>

	.countries {
	fill: #ccc;
	stroke: #fff;
	}
	.place,
	.place-label {
	fill: #444;
	}

	text {
	font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
	font-size: 10px;
	pointer-events: none;
	}

	.map svg {
	background-color: white;
	}

	.land {
	opacity: .7;
	stroke: #888;
	}

	div.legend {
	position: absolute;
	font-size: 10px;
	top: 10px;
	left: 950px;
	}

	div.legend ul {
	list-style-type: none;
	}

	div.legend .counter {
	font-weight: bold;
	}

	</style>
	<body>
	<script src="http://d3js.org/d3.v3.min.js"></script>
	<script src="http://d3js.org/topojson.v1.min.js"></script>
	<script type="text/javascript" src="labeling.js"></script>

	<script>
	var width = 960,
	height = 500;

	var projection = d3.geo.mercator()
	.center([0,37])
	.scale(450 / Math.PI)
	.translate([width / 2, height / 2]);

	var path = d3.geo.path()
	.projection(projection);

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

	d3.json("world.json", function(error, world) {

	var countries = topojson.feature(world, world.objects.countries),
	geometries = countries.features;

	svg.selectAll(".land")
	.data(countries.features)
	.enter()
	.append("path")
	.attr("class", "land")
	.attr("d", path)
	.style("fill", "#cacaca");

	svg.selectAll(".place-label")
	.data(geometries)
	.enter()
	.append("text")
	.attr("class", "place-label")
	.text(function(d) { return d.properties.name; })
	.attr("x", function(d) { return path.centroid(d)[0]; })
	.attr("y", function(d) { return path.centroid(d)[1]; });

	var labeling = d3.labeling()
	.select('.place-label')
	.legend()
	.scale(.8)
	.scale(.5)
	.remove()
	.align();

	var legend = d3.select('body')
	.append('div')
	.attr('class', 'legend')
	.append('div')
	.attr('class', 'counter')
	.text("Visible countries: " + d3.selectAll('.place-label')[0].length + " of 177")
	.append('ul');

	legend.selectAll('.legend')
	.data(labeling.getLegend())
	.enter()
	.append('li')
	.text(function(d) { return d.key + ': ' + d.name; });

	});

	</script>
	;
	d3.labeling = function() {

	var labeling = {}, className, labels, callbacks = [], callbackpos = -1,
	updateLabels = false, _break = false, legend = [];

	labeling.select = function(_className) {
	className = _className;
	labels = getLabels();
	return labeling;
	}

	var getLabels = function() {

	if (typeof className === "string") {
	return svg.selectAll(className);
	}
	else {
	return className.call(this);
	}
	}

	labeling.remove = function() {
	callbacks.push(labeling_remove);
	updateLabels = true;
	return labeling;
	}

	labeling.scale = function(_scaleFactor) {

	var scaleFactor = _scaleFactor \|\| .75;

	// currying: https://medium.com/@kbrainwave/currying-in-javascript-ce6da2d324fe
	var fn = function(label) {
	return labeling_scale(label, scaleFactor);
	}

	callbacks.push(fn);

	return labeling;
	}

	labeling.legend = function() {
	callbacks.push(labeling_legend);
	updateLabels = true;
	return labeling;
	}

	var labeling_remove = function(label) {
	label.remove();
	}

	var labeling_scale = function(label,factor) {

	var x = +label.attr("x"), y = +label.attr("y"),
	scaleFactor = factor < 1 ? 1 - factor : - (factor - 1),
	transform = "translate(" + (x * scaleFactor) + "," + (y * scaleFactor) + ") scale(" + factor + ")";

	label.attr("transform", transform);
	}

	var labeling_legend = function(label) {

	legend.push(label.text());

	label.text(legend.length);

	}

	var next = function(label) {

	var box = getBox(label);

	var pos = label.attr("data-pos") \|\| 0;

	pos++;

	if (pos === 8) {

	var calls = label.attr("data-calls") \|\| -1;

	calls++;

	label.attr("data-calls", calls);

	if (calls < callbacks.length) {
	var fn = callbacks[calls];
	fn.call(this, label);
	}

	pos = 0;
	box = getBox(label);

	// prevent infinite loop
	if (!callbacks.length) {
	_break = true;
	}

	}

	label.attr("data-pos", pos);

	var x = +label.attr("x"), y = +label.attr("y");

	switch(pos) {
	case 0:
	case 1:
	y += box.height/2;
	break;
	case 2:
	case 3:
	x -= box.width/2;
	break;
	case 4:
	case 5:
	y -= box.height/2;
	break;
	case 6:
	case 7:
	x += box.width/2;
	break;
	}

	label.attr("x", x).attr("y", y);

	}

	var overlaps = function(a, b) {

	return (
	(a.left <= b.left && b.left <= a.right)
	\|\|
	(a.left <= b.right && b.right <= a.right)
	)
	&&
	(
	(a.top <= b.top && b.top <= a.bottom)
	\|\|
	(a.top <= b.bottom && b.bottom <= a.bottom)
	);
	}

	var getBox = function(d) {
	return d[0][0].getBoundingClientRect();
	}

	labeling.align = function() {

	var overlappeds;

	do {
	overlappeds = 0;

	labels.each(function() {
	var current = this;
	var box_text = getBox(d3.select(current));

	var _overlappeds = labels[0].filter(function(d) {
	if (d === current) return false;
	return overlaps(box_text, getBox(d3.select(d)));
	});

	overlappeds += _overlappeds.length;

	_overlappeds.forEach(function(el) {
	next(d3.select(el));
	});

	});

	if (updateLabels) {
	labels = getLabels(className);
	}

	} while (overlappeds > 0 && !_break);

	return labeling;
	}

	labeling.getLegend = function() {

	return legend.map(function(d, i) {
	return { key: i + 1, name: d }
	});
	}

	return labeling;

	}