Reusable Legend

_.md

[ Launch: Tributary inlet ] d447bbec378d19b006a6 by jkeohan
[ Launch: Tributary inlet ] eae9e630e544c02b8433 by jkeohan

config.json

{"description":"Reusable Legend","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"countries.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12},"reusable.d3.charts.js":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/Bq1hClk.png"}

countries.json

inlet.js

var countries = tributary.countries
var padding = {left:20, right:20, top:20, bottom:20}
//console.log(countries.features)

var svg = d3.select('svg')
var canvas = canvasSize('svg')
var colorScale = d3.scale.category20();

w = canvas[0]
h = canvas[1]

//Define map projection
var projection = d3.geo.mercator()
   .center([ 0, 0 ])
   .translate([ w/2, h/2.35777941504 ])
   .scale([ w/9 ])

//Define path generator
var path = d3.geo.path()
   .projection(projection);

//Define Legend
var legendKeys = d3.set(countries.features.map(function(d,i) 
    { return d["properties"]["continent"] } ) ).values()

//console.log(legendKeys)

colorScale.domain(legendKeys)


var rlegend = d3.models.legend()
.fontSize(15).width(padding.left)
	.inputScale(colorScale)
	.translate([0,160])


svg.call(rlegend)
//console.log(rlegend())

svg.selectAll("path")
   .data(countries.features)
   .enter()
   .append("path")
   .attr("fill", function(d,i) { return colorScale(d.properties.continent) } ) 
   .attr("d", path);

function canvasSize(target) { 
  var height = parseFloat(d3.select(target).node().clientHeight)
  var width = parseFloat(d3.select(target).node().clientWidth)
  return [width,height]
}//canvasSize

reusable.d3.charts.js

d3.models = {};

//var rlegend = d3.edge.legend().fontSize(15)
//svg.datum(yearMean).call(rlegend)

d3.models.legend = function () {

	var fontSize = 15;
	var width = 650;
	var height = 400;
	var legSpacing = 20;
	var translateX = 0;
	var translateY = 0;
	var translate = [0,0];
	var legendValues;

	var dispatch = d3.dispatch("mouseOver", "mouseOut");

	function render(selection) {
		console.log("selection",selection)
		selection.each(function(_data) { 
			console.log("_data",_data)
			var legend = selection.append('g').attr("transform", function (d, i) { return "translate(" + translate[0] + "," + translate[1] + ")"})
				.selectAll("legend").data(legendValues).enter().append("g")
				.attr("class", "legend")
				.attr("transform", function (d, i) { return "translate(0," + i *  legSpacing + ")"})
           	console.log(legend)
            legend.append('rect')
			 				.attr({ x:width+5, y:5, width: 10, height: 10 })
            	.style("fill", function (d, i) { 
            		console.log(d)
            		return d.color;})
        

        legend.append('text')
        	.attr({ x: width+25, y: 15})
		  		.text(function (d, i) { return d.text})
		      .attr("class", "textselected")
		      .style("text-anchor", "start")
		      .style("font-size", fontSize)
		      .on("mouseover",dispatch.mouseOver)
		      .on("mouseout", dispatch.mouseOut)
		})//_selection.each()
	}//render()

	render.fontSize = function(_x) {
		if (!arguments.length) return fontSize;
		fontSize = _x;
		return this;
	}
	render.width = function(_x) {
		if (!arguments.length) return width;
		width = _x;
		return this;
	}
	render.height = function(_x) {
		if (!arguments.length) return height;
		height = _x;
		return this;
	}
	render.translate = function(_x) {
		if (!arguments.length) return translate;
		translate = _x;
		return this;
	}
	// 	render.translateY = function(_x) {
	// 	if (!arguments.length) return translateY;
	// 	translateY = _x;
	// 	return this;
	// }
		render.legSpacing = function(_x) {
		if (!arguments.length) return legSpacing;
		legSpacing = _x;
		return this;
	}
	render.inputScale = function(_x) {
     if (!arguments.length) return inputScale;
        scale = _x;
        legendValues = [];
       	scale.domain().forEach(function (el) {
        var cellObject = {color: scale(el), text: el} 
        legendValues.push(cellObject)
    	})

		return this;
  }

	d3.rebind(render, dispatch, "on")
	return render
}