ex2: legend

_.md

[ Launch: legend example ] 75b5ccd937aa4b376d98 by blehman

config.json

{"description":"ex2: legend","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"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},"style.css":{"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/88cqSxG.png"}

inlet.js

// globals 
var legend = d3.select("svg").append("g")
var legend_width = 191
var legend_height = 121
var legend_x_transform = 53
var legend_y_transform = 60
var content_x_transform = 8
var content_y_transform = 5
var legend_content = d3.select("svg").append("g")
var legend_text = d3.select("svg").append("g")
var legend_circles_radius = 5
var fake_data = ["GOOD STUFF","BAD STUFF","REGULAR STUFF","BEST STUFF"]
var color = d3.scale.category10();

// create legend rectangle 
legend.append("rect")
	.classed("legend",true)
	.attr("height",legend_height)
	.attr("width",legend_width)
	.attr("transform","translate(" + legend_x_transform + "," + legend_y_transform+ ")")

// create legend shapes 
legend_content.selectAll("legendShapes")
	.data(fake_data)
	.enter().append("circle")
	.classed("legendShapes",true)
	.attr("r",legend_circles_radius)
	.attr("cx",10)
	.attr("cy",function(d,i){return i*30;})
	.attr("transform","translate(" + legend_x_transform + "," + (legend_y_transform + 10) + ")")
	.attr("fill",function(d,i) {return color(i);})
	
// create legend text
legend_content.selectAll("legendText")
	.data(fake_data)
	.enter().append("text")
	.classed("legendText",true)
.text(function(d,i){return d})
	.attr("x",20)
.attr("y",function(d,i){return (i*30)+7})
	.attr("transform","translate(" + legend_x_transform + "," + (legend_y_transform + 10) + ")")

// adjust content location
legend_content.attr("transform","translate(" + content_x_transform + "," + content_y_transform + ")")

style.css

.legend {
  stroke: #3d3d3d;
  stroke-width: 2.5px;
  fill: #ffe6bc; /* other color options (http://bit.ly/1ymjJKI) */
}

.legendShapes {
  stroke: #000000;
  stroke-width: 2.5px;
}