D3 Examples - Pattern Module Demo 2

xxxxxxxxxx
 
<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>
    