JavaScript Maps

_.md

[ Launch: JavaScript Map ] 8626655 by ljbrown238

config.json

{"description":"JavaScript Maps","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}},"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,"thumbnail":"http://i.imgur.com/5EGiA2Y.png"}

inlet.js

var svg = d3.select("svg");

// Here is the data array
var data = [
	{"name":"Bill","age":"47"},
	{"name":"Bob","age":"50"},
	{"name":"George","age":"24"},
	{"name":"Mary","age":"19"} 
];


// This is the callback function that will be called for each element
// in the array passed to the ".map() function
function callback(d) {
	return { "name":d.name,"percentage_of_80":+d.age / 80};
}

// "Map" is a method associated with any Array
var newArr = data.map(callback);

// add SVG gruops for each element in the mapped array
var g = svg.selectAll("g")
	.data(newArr)
	.enter()
		.append("g")
	//.attr("transform",function(d,i) {return "translate("+(100*i)+",0)";});
  
g
	.append("text")
    .attr("x",10)
    .attr("y",function(d,i) { return 40 + i*53;})
	.style("font-size","40px")
	.text(function(d) {return d.name + ": " + d.percentage_of_80.toFixed(2) * 100 + "% of 80 yrs";})