SVG TABLE

_.md

[ Launch: Tributary inlet ] 6497164 by roundrobin

config.json

{"description":"SVG TABLE","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/mlSHOH9.png","ajax-caching":true}

inlet.js

var data = {
  "GER" : 40,
  "USA": 20,
  "GRE" : 10,
  "CHL" : 20
};


var data = [1,2,3,4,5,1,2,3,4,5];

var selection = g.selectAll('.row')
.data(data)
.enter();

var barHeight = 30;
var barWidth = 180;
var x = 0;

var tableGroup = selection.append("g")
  .attr({
    transform: function(d, i){
      
      return "translate("+[20,20+ i * barHeight]+")";
    },
    "class": "row"
  });

tableGroup.append("rect")
.attr({
    width: barWidth,
    height: barHeight,
  fill: function(d,i){
    if(i % 2 === 0) return "white";
    return "#F3F8FF";
  }
});


var y = 19;
tableGroup.append('text')
.text(function(d,i){return i;})
.attr({
  fill: "#000000",
  x : 5,
  y: y,
  "font-size": 13,
  "font-family": "Arial",
  "font-weight" : "bold",
  "text-anchor": "start"
});


tableGroup.append('text')
.text(function(d,i){return "Table row";})
.attr({
  fill: "#000000",
  x : 20,
  y: y,
  "font-size": 13,
  "font-family": "Arial",
  "text-anchor": "start"
});

tableGroup.append('text')
.text(function(d,i){return i;})
.attr({
  fill: "#7C633A",
  x : barWidth - 5,
  y: y,
  "font-size": 13,
  "font-family": "Arial",
  "font-weight" : "bold",
  "text-anchor": "end"
});