Old school D3 from simpler times

All examples By author By category About

Andrew-Reid

Full window Github gist

Pattern Module Demo 2

A second quick demo of this attempt at a d3 module for patterns.

This example shows how to modify the patterns, while the linked block only shows default characteristics.

<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js"></script>
<script src="https://d3js.org/d3-selection-multi.v1.min.js"></script>
<script src="d3Pattern.js"></script>
<body>
<script>
	
	var svg = d3.select("body")
	  .append("svg")
	  .attr("width", 960)
	  .attr("height", 500);
	  
	var patterns = [
		d3.patternStripes().colors(["steelblue","white","darkblue","white"]).width([10,2]).angle(30),
		d3.patternPlaid().colorsX(["crimson","white"]).colorsY(["salmon","pink"]).opacityX([0.4]).opacityY([0.3,0.6]).widthX([5,10]).widthY(10),
		d3.patternSquares().spacing(10).color("orange").edgeLength(9).angle(75),
		d3.patternSymbols().symbol(d3.symbol().type(d3.symbolWye).size(800)).spacing(50).stroke("black").angle(60),
		d3.patternDots().spacing(10).radius(5).color("steelblue"),
		d3.patternCheckers().width(6).angle("20").colors(["red","orange"])
		];

var radius = 70;
	
	var circles = svg.selectAll(null)
	  .data(d3.range(6))
	  .enter()
	  .append("circle")
	  .attr("cx", function(d,i) { return d * radius * 2.2 + radius + 10; })
	  .attr("cy", 200)
	  .attr("r",radius)
	  .attr("fill",function(d,i) { return patterns[i].use(); })

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/4.11.0/d3.js

https://d3js.org/d3-selection-multi.v1.min.js