Lichen.js Pattern Showcase

A more formal attempt at creating a utility to extend d3.js, lichen.js.

This block shows some of the methods of some of the patterns in the library. In some cases the user interface limits setting more complex method parameters (such as multiple widths for plaid and stripe patterns).

<head>
<script src="https://d3js.org/d3.v5.js"></script>
<link rel="stylesheet" type="text/css" href="https://fonts.googleapis.com/css?family=Lato" />
<style>
	.chevrons {
		cursor: pointer;
	}
	text {
		font-family: "Lato";
	}
	.menu {
		cursor: pointer;
	}
	.grids {
		cursor: pointer;
	}
</style>

var ps = ln.circles().spacings([1,2,3]).get();
	console.log(ps);
	
	var width = 960;
	var height = 500;
	
	var svg = d3.select("body")
	  .append("svg")
	  .attr("width", width)
	  .attr("height", height);
	  
	var topBackground = svg.append("g");
	
	topBackground.append("rect")
	  .attr("width",width)
	  .attr("height",50)
	  .attr("fill",ln.hexagon().stroke("#ddd").strokeWidth(1).radius(40).angle(20).spacing(0).fill("none").use())

control.selectAll(".chevrons")
	  .data(chevronData)
	  .enter()
	  .append("path")
	  .attr("d",chevrons)
	  .attr("class","chevrons")
	  .attr("fill","#555")
	  .attr("opacity",function(d) { return d.o; })
	  .on("mouseover", mouseover) 
	  .on("mouseout",mouseout)

var patterns = [
	   {type:"circle",fill:ln.circle(),options:["spacing","radius","strokeWidth"],grid:["hex","square"]}, 
	   {type:"square",fill:ln.square(),options:["spacing","length","strokeWidth"],grid:["hex","square"]}, 
	   {type:"hexagon",fill:ln.hexagon(),options:["spacing","radius","strokeWidth"],grid:["hex","square"]}, 
	   {type:"symbol",fill:ln.symbol(),options:["spacing","strokeWidth"],grid:["hex","square"]}, 
	   {type:"checker",fill:ln.checker(),options:["width"]},
	   {type:"letter",fill:ln.text(),options:["spacing","strokeWidth","fontSize"],grid:["hex","square"]},
	   {type:"sine",fill:ln.sine(),options:["amplitude","period","strokeWidth","sampling"]},
	   {type:"stripe",fill:ln.stripe(),options:["width"] }, 
	   {type:"octagon",fill:ln.octagon(),options:["strokeWidth","length"] },
	   {type:"plaid",fill:ln.plaid(),options:["width"]}, 
	   {type:"cairo",fill:ln.cairo(),options:["length","strokeWidth"]}, 
	   {type:"fish",fill:ln.fish(),options:["spacing","scale"],grid:["hex","square"]}
	  ];

var currentPattern = patterns[Math.floor(Math.random()*patterns.length)];

svg.append("text")
	  .attr("y", 80)
	  .attr("x",150)
	  .style("font-size",24)
	  .style("text-anchor","middle")
	  .text("Selected Base Patterns");
	  
	svg.append("text")
	  .attr("y", 80)
	  .attr("x",760)
	  .style("font-size",24)
	  .style("text-anchor","middle")
	  .text("Selected Pattern Methods");	
	  
	svg.append("text")
	  .attr("y", 30)
	  .attr("x",480)
	  .style("font-size",24)
	  .style("text-anchor","middle")
	  .text("lichen.js Pattern Explorer");	
	
	var pattern = svg.append("circle")
	  .attr("r", 140)
	  .attr("fill", currentPattern.fill.use())
	  .attr("stroke","black")
	  .attr("stroke-width",8)
	  .attr("transform","translate("+width/2+","+height/2+")");
	
	var showcase = svg.selectAll()
	  .data(patterns)
	  .enter()
	  .append("circle")
	  .attr("cx", function(d,i) { return i%3 * 100 + 50; })
	  .attr("cy", function(d,i) { return Math.floor(i/3) * 100 + 150 })
	  .attr("r", 40)
	  .attr("fill", function(d) { return d.fill.use() })
	  .attr("stroke","black")
	  .attr("stroke-width",3)
	  .attr("class","menu")
	  .on("click", function(d) {
		currentPattern = d;
		pattern.attr("fill", currentPattern.fill.use());
	    showOptions(d);
	  })
	  
	var scales = {
			spacing: d3.scaleLinear().range([0,200]).domain([-5,40]),
			radius: d3.scaleLinear().range([0,200]).domain([0,40]),
			length: d3.scaleLinear().range([0,200]).domain([0,40]),
			strokeWidth: d3.scaleLinear().range([0,200]).domain([0,10]),
			width: d3.scaleLinear().range([0,200]).domain([0,80]),
			amplitude: d3.scaleLinear().range([0,200]).domain([0,80]),
			period: d3.scaleLinear().range([0,200]).domain([0,200]),
			sampling: d3.scaleLinear().range([0,200]).domain([0.01,5]),
			scale: d3.scaleLinear().range([0,200]).domain([0.1,5]),
			fontSize: d3.scaleLinear().range([0,200]).domain([8,32])
	}
	
	showOptions(currentPattern);
	
	function showOptions(p) {
		
		
		svg.selectAll(".currentName").attr("opacity",1).transition().attr("opacity",0).duration(200).remove();
		svg.append("text")
		  .attr("class","currentName")
		  .attr("x", 750)
		  .attr("y", 110)
		  .attr("opacity",0)
		  .text("ln."+p.type+"()")
		  .transition()
		  .attr("opacity",1)
		  .duration(200)
		  .delay(200);
		
		var options = svg.selectAll(".options")
		   .data(p.options);
		   
		options.exit().transition().attr("opacity",0).duration(500).remove();
		
		var options = options.enter()
		  .append("g")
		  .merge(options)
		  .attr("transform",function(d,i) {
			return "translate("+700+","+(i*80+180)+")";
		  })
		  .attr("class","options")
		  
		options.selectAll("*").transition().attr("opacity",0).duration(200).remove();
		
		options.append("line")
		  .attr("x1",100)
		  .attr("x2",100)
		  .attr("stroke-width",3)
		  .attr("stroke","grey")
		  .transition()
		    .delay(200)
			.attr("x1",0)
			.attr("x2",200)
			.duration(400);
			
		options.append("text")
		  .attr("x",100)
		  .attr("y",-20)
		  .style("text-anchor","middle")
		  .text(function(d) { return d; });
		  
		  
		options.append("circle")
		  .attr("cy",0)
		  .attr("r", 8)
		  .attr("cx", function(d) {
			var current = p.fill[d]();
			return scales[d](current);
		  })
		  .attr("opacity",0)
		  .call(d3.drag().on("drag",dragValue))
		  .style("cursor","pointer")
		  .transition()
		    .attr("opacity",1)
			.delay(250)
			.duration(300);
		  
		if (p.grid != undefined) {

function dragValue(d) {
		var circle = d3.select(this);
		var x = d3.event.x;
		
		if (x < 0) x = 0;
		if (x > 200) x = 200;
		
		circle.attr("cx",x);
		
		var f = d3.format(".2f");
		
		var text = d3.select(this.parentNode).select("text").text(d+"("+f(scales[d].invert(x))+")");
		
		currentPattern.fill[d](scales[d].invert(x)).add();
	}

function dragged(d) {
		var x = d3.event.x; 
		var y = d3.event.y;
		var r = 170;
		x = x - width/2;
		y = y - height/2;
	
		var a = Math.atan(y/x);

var x1 = Math.cos(a) * r;
		var y1 = Math.sin(a) * r;

if(a<0) a = -a + Math.PI*2;
		if (x<0) y1 = -y1, x1 = -x1;
		
		var theta = getAngle([x1,y1],[0,0],[100,0]);
		
		if(y<0) theta = 2*Math.PI-theta;
		
		currentPattern.fill.angle(theta*180/Math.PI+Math.PI/2).add();
		control.attr("transform","translate("+ (width/2) + "," + (height/2) +")rotate("+(90)+")");

d3.select(this)
			.attr("transform","translate("+ (width/2) + "," + (height/2) +")rotate("+(theta*180/Math.PI+90)+")");
	}
	
  
	function getAngle(A,B,C) {
		var AB = Math.sqrt(Math.pow(B[0]-A[0],2)+ Math.pow(B[1]-A[1],2));    
		var BC = Math.sqrt(Math.pow(B[0]-C[0],2)+ Math.pow(B[1]-C[1],2)); 
		var AC = Math.sqrt(Math.pow(C[0]-A[0],2)+ Math.pow(C[1]-A[1],2));
		return Math.acos((BC*BC+AB*AB-AC*AC)/(2*BC*AB));
	}

https://d3js.org/d3.v5.js