fontStyle

_.md

[ Launch: Pattern grid - raster ] 4660017 by roundrobin
[ Launch: Pattern grid - raster ] 4659977 by roundrobin
[ Launch: Pattern grid - 2 ] 4659021 by roundrobin
[ Launch: Pattern grid - stripes ] 4657513 by roundrobin
[ Launch: Pattern grid - wave ] 4647105 by roundrobin
[ Launch: Pattern grid - elector ] 4647086 by roundrobin
[ Launch: Pattern grid - elector ] 4647080 by roundrobin
[ Launch: Pattern grid - 50-50 circles ] 4647076 by roundrobin
[ Launch: Pattern grid - double quater circles ] 4647019 by roundrobin
[ Launch: Pattern grid - double quater circles ] 4646988 by roundrobin
[ Launch: Pattern grid - quater circles ] 4646984 by roundrobin
[ Launch: Pattern grid - 70ies circles ] 4646978 by roundrobin
[ Launch: Pattern grid - cross ] 4646975 by roundrobin
[ Launch: Pattern grid - hash ] 4646958 by roundrobin
[ Launch: Pattern grid - hash ] 4646953 by roundrobin
[ Launch: Tributary inlet ] 4646912 by roundrobin

config.json

{"description":"fontStyle","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}},"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"period","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"fullscreen":false,"thumbnail":"http://i.imgur.com/fVaaxxv.png"}

inlet.js

function Path(canvas, path){
  
  this.dataPoints = [];
  
  if(path != undefined){
      this.path = path;
  
  } else {
    
    this.path = canvas.append('svg:path')
    .attr("stroke","black")
    .attr("stroke-width",3)
    .attr("fill","none");
  
  }
   
}
Path.prototype.el  = function(wayPoint){
	return this.path;  
}

Path.prototype.add  = function(wayPoint){
  this.dataPoints.push(wayPoint);

}

Path.prototype.render  = function(){
  	
   this.path.attr("d",this.pathWay());
}

Path.prototype.pathWay  = function(){
  var way = '';
  
  for(var i=0; i < this.dataPoints.length; i++){
    var elem = this.dataPoints[i];
    	way += elem.join(' ');
  }
  return way;
} 

var pattern_size = 7;
var strokeSize = 1.568;


var defs = d3.select('svg').append('defs')
var pattern = defs.append('pattern')
    .attr('id','pattern1')
    .attr('patternTransform','')
    .attr('height',pattern_size)
    .attr('width',pattern_size)
    .attr('patternUnits','userSpaceOnUse')
var attr = {
  'fill':'none',
   'stroke':'#73A5A5',
  'stroke-width':strokeSize,

}

var path = new Path(pattern)
path.add(['M', 0,pattern_size/2]);  
path.add(['L',pattern_size/2,pattern_size]);

path.add(['M', pattern_size/2,0]);  
path.add(['L',pattern_size,pattern_size/2]);
path.el().attr(attr).style('stroke-linecap','square');

path.render();

var path = new Path(pattern)
path.add(['M', 0,pattern_size/2]);  
path.add(['L',pattern_size/2,0]);

path.add(['M', pattern_size/2,pattern_size]);  
path.add(['L',pattern_size,pattern_size/2]);

path.el().attr(attr).style('stroke-linecap','square');

path.render();


var path = new Path(pattern)
path.add(['M', pattern_size/3,0]);  
path.add(['L',pattern_size*1.3,pattern_size]);


path.add(['M', 0,pattern_size*0.7]);  
path.add(['L',pattern_size*0.3,pattern_size]);


path.el().attr(attr)
.style('stroke-linecap','square')
.attr("stroke","#0A0A0A")
path.render();


d3.select('svg').append('rect')
        .attr('height',tributary.sh)
      .attr('width',tributary.sw)
  	  .attr('fill','#AAD8AF')
//  	  .attr('fill','url(#pattern1)')

g.append('svg:text')
.text(function(d,i){ return "Data";})
.attr('fill','url(#pattern1)')
.attr("x", 492)
.attr("y", 117)
.attr("font-size", 101)
.attr("font-family", "SF Movie Poster")
.attr("text-anchor", "middle")
.style("text-shadow", "5px 5px 0px black,10px 10px 0px white");

g.append('svg:text')
.text(function(d,i){ return "Visualization";})
.attr('fill','url(#pattern1)')
.attr("x", 492)
.attr("y", 206)
.attr("font-size", 128)
.attr("font-family", "SF Movie Poster")
.attr("text-anchor", "middle")
.style("text-shadow", "5px 5px 0px black,10px 10px 0px white");


var y = 89;
var x = 342;
g.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",1)
.attr("fill","none")
.attr("x1",x)
.attr("x2",x+100)
.attr("y1",y)
.attr("y2",y);

var y = 89;
var x = 547;
g.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",1)
.attr("fill","none")
.attr("x1",x)
.attr("x2",x+100)
.attr("y1",y)
.attr("y2",y);


var y = 243;
var x = 342;
g.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",1)
.attr("fill","none")
.attr("x1",x)
.attr("x2",x+137)
.attr("y1",y)
.attr("y2",y);


var x = 547;
g.append('svg:line')
.attr("stroke","black")
.attr("stroke-width",1)
.attr("fill","none")
.attr("x1",x-37)
.attr("x2",x+100)
.attr("y1",y)
.attr("y2",y);

g.append("svg:circle")
	.attr("r",3)
	.attr("cx",x-54)
	.attr("cy",y)
	.attr("fill","#585858");


g.append('svg:text')
.text(function(d,i){ return "&";})
.attr('fill','#4A5F59')
.attr("x", 492)
.attr("y", 448)
.attr("font-size", 271)
.attr("font-family", "Times")
.attr("text-anchor", "middle")
.style("text-shadow", "5px 5px 0px black,10px 10px 60px #F5FF07");