Custom shapes

_.md

[ Launch: Custom shapes ] c06f6a4273a3a5ecb608 by trinary

config.json

{"description":"Custom shapes","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"style.css":{"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,"ajax-caching":true,"thumbnail":"http://i.imgur.com/4tup5eG.png"}

inlet.js

var data = generateData(34);
    console.log(data);

/* Our data format:
	{x: 0, y: 0, type: "up" }
*/

var width = 540;
var height = 320;

var x = d3.scale.linear().domain([0,d3.max(data, function(d) { return d.x})]).range([0,width]);
var y = d3.scale.linear().domain([0,d3.max(data, function(d) { return d.y})]).range([height,0]);

var svg = d3.select("svg");
var g = svg.append("g").attr("transform", "translate(70,50)");

g.selectAll(".symbol")
	.data(data)
	.enter()
	.append("path")
	.classed("symbol", true)
	.classed("up",function(d) { return d.type == "up"})
	.classed("down",function(d) { return d.type != "up"})
	.attr("d", generateSymbol)
	.attr("transform",transformer);


function transformer(d) {
  var t="translate(" + [x(d.x),y(d.y)] + ")";
  if(d.type != "up") {
    t += " rotate(180)";
  }
  return t;
}

function generateSymbol(d,i) {
    return "M0,10 L20,10 L10,0 Z";
}

function generateData(n) {
  var data = [];
  for(var i = 0; i < n; i++) {
    data.push({x: Math.random() * 32, y: Math.random() * 20, type: Math.random() > 0.5 ? "up" : "down"})
  }
  return data;
}

style.css

.up {
  stroke: none;
  fill: darkseagreen;
}

.down {
  stroke: none;
  fill: crimson;
}