How to use textures - 10 common examples

.attr('height', h * 2)
      .call(zoom)

    // Create clip path for entire chart area
    svg
      .append('clipPath')
      .attr('id', 'entire-chart-area')
      .append('rect')
      .attr('x', padding.left)
      .attr('y', padding.top)
      .attr('width', w - padding.left - padding.right)
      .attr('height', h * 2 - padding.top - padding.bottom)
      .attr('fill', 'none')

    // Setup brush domain background texture
    const bgTexture = textures
      .lines()
      .stroke('#ddd')
      .size(5)
      .strokeWidth(1)

    svg.call(bgTexture)

    // Create brush domain background
    const brushDomainBgContainer = svg.append('g')

    const brushDomainBgMask = brushDomainBgContainer
      .append('clipPath')
      .attr('id', 'brush-domain-bg-area')
      .append('rect')
      .attr('x', padding.left)
      .attr('y', padding.top)

if (url) {
      xText
        .style('cursor', 'pointer')
        .on('click', () => {
          window.open(url, '_blank')
        })
    }

    // Setup reverse axis (over onset offset)
    // Clone of axis above onset panel, without text
    this.selection.append('g')
      .attr('class', 'axis axis-x-ticks')
      .attr('transform', `translate(0, ${layout.height})`)

    // Create onset panel
    let onsetTexture = textures.lines()
        .lighter()
        .strokeWidth(0.5)
        .size(8)
        .stroke('#ccc')
    this.selection.call(onsetTexture)

    this.selection.append('rect')
      .attr('class', 'onset-texture')
      .attr('height', layout.totalHeight - layout.height)
      .attr('width', layout.width)
      .attr('x', 0)
      .attr('y', layout.height)
      .style('fill', onsetTexture.url())

    this.layout = layout
  }

this.svg = svg
    this.xScale = xScale
    this.yScale = yScale
    this.xScaleDate = xScaleDate
    this.height = height
    this.width = width
    this.onsetHeight = onsetHeight
    this.weekHook = weekHook

    // Add axes
    this.setupAxes()

    // Add marker primitives
    this.timerect = new marker.TimeRect(this)

    this.onsetTexture = textures.lines()
      .lighter()
      .strokeWidth(0.5)
      .size(8)
      .stroke('#ccc')
    svg.call(this.onsetTexture)

    // Paint the onset panel
    this.paintOnsetOffset()

    // Add overlays and other mouse interaction items
    this.setupOverlay()

    // Axis at top of onset panel
    this.setupReverseAxis()

    this.history = new marker.HistoricalLines(this)

defaultFill: '#ccc'
      },
      geographyConfig: {
        highlightOnHover: false,
        popupOnHover: false
      }
    })

    this.tooltip = d3.select('#choropleth-tooltip')
      .style('display', 'none')

    let svg = d3.select('#' + elementId + ' svg')
        .attr('height', divHeight)
        .attr('width', divWidth)

    this.selectedTexture = textures.lines()
      .size(10)
      .background('white')
    svg.call(this.selectedTexture)

    // Override datamaps css
    d3.select('#' + this.selectedTexture.id() + ' path')
      .style('stroke-width', '1px')

    this.width = svg.node().getBoundingClientRect().width
    this.height = svg.node().getBoundingClientRect().height
    this.svg = svg
    this.regionHook = regionHook
  }

image.onload = function() {
      // m_tex.replace_image(cover, "monitor", image);
      m_tex.replace_image(cover, "monitor", image);
    }
    image.src = "./images/a_cover_pic-01.jpg";

request(url, function (err, response, body) {
    if (err) {
      console.log(err);
      return message.reply('Sorry, cannot get Mojang status at this time.');
    };

    body = JSON.parse(body);
    //testOff = JSON.parse(testOffline);
    const embed = new Discord.RichEmbed().addField(`${Object.keys(body[0])[0]}`, `${body[0]['minecraft.net'] ==="green" ? '**Up And Online!** :white_check_mark: ' : '**Looks like the servers are having issues right now :x:**'}`) //Minecraft.net
      .addField(`${Object.keys(body[1])[0]}`, `${body[1]['session.minecraft.net'] === "green" ? '**Up And Online!** :white_check_mark: ' : '**Looks like the servers are having issues right now :x:**'}`) //session.minecraft.net
      .addField(`${Object.keys(body[2])[0]}`, `${body[2]['account.mojang.com'] ==="green"? '**Up And Online!** :white_check_mark: ' : '**Looks like the servers are having issues right now :x:**'}`) //account.mojang.com
      .addField(`${Object.keys(body[3])[0]}`, `${body[3]['authserver.mojang.com'] ==="green"? '**Up And Online!** :white_check_mark: ' : '**Looks like the servers are having issues right now :x:**'}`) //authserver.mojang.com
      .addField(`${Object.keys(body[4])[0]}`, `${body[4]['sessionserver.mojang.com'] ==="green"? '**Up And Online!** :white_check_mark: ' : '**Looks like the servers are having issues right now :x:**'}`) //sessionserver.mojang.com
      .addField(`${Object.keys(body[5])[0]}`, `${body[5]['api.mojang.com'] ==="green"? '**Up And Online!** :white_check_mark: ' : '**Looks like the servers are having issues right now :x:**'}`) //api.mojang.com
      .addField(`${Object.keys(body[6])[0]}`, `${body[6]['textures.minecraft.net'] ==="green"? '**Up And Online!** :white_check_mark: ' : '**Looks like the servers are having issues right now :x:**'}`) //textures.minecraft.net
      .addField(`${Object.keys(body[7])[0]}`, `${body[7]['mojang.com'] ==="green"? '**Up And Online!** :white_check_mark: ' : '**Looks like the servers are having issues right now :x:**'}`) //mojang.com
      .setThumbnail('https://vignette.wikia.nocookie.net/logopedia/images/d/d6/Mojang_ab_logo_vector.png/revision/latest?cb=20120306163913')
      .setColor(config.green)
    message.channel.send(embed);
  });
};

generate() {
    const t = textures.lines();
    [
      'size',
      'strokeWidth',
      'orientation',
      'shapeRendering',
      'stroke',
      'background',
      'id',
    ].forEach((key) => {
      if (this.props[key]) t[key](this.props[key]);
    });
    const selection = new Selection();
    t(selection);

    this.setState({
      pattern: selection.toReact(this.props.components),

.stroke(d3.rgb(c).brighter(0.6))
          .background(c)
          .lighter()
          .thicker();
        break;
      case 3:
        t = textures
          .paths()
          .d('waves')
          .thicker()
          .strokeWidth(1)
          .stroke(d3.rgb(c).brighter(0.6))
          .background(c);
        break;
      case 4:
        t = textures
          .lines()
          .strokeWidth(1)
          .thicker()
          .orientation('6/8')
          .stroke(d3.rgb(c).brighter(0.6))
          .background(c);
        break;
      default:
        t = textures
          .circles()
          .radius(3)
          .fill('transparent')
          .strokeWidth(1)
          .stroke(d3.rgb(c).brighter(0.6))
          .background(c);
        break;

colors.forEach((c, i) => {
    let t;
    switch (i) {
      case 0:
        t = textures
          .lines()
          .thicker()
          .strokeWidth(1)
          .stroke(d3.rgb(c).brighter(0.6))
          .background(c);
        break;
      case 1:
        t = textures
          .circles()
          .fill(d3.rgb(c).brighter(0.6))
          .thicker()
          .background(c);
        break;
      case 2:
        t = textures
          .paths()

return projection;
        };

        delete projection.scale;
        delete projection.translate;
        delete projection.center;
        return projection.alpha(0);

    }

    var globe = {type: "Sphere"},
        land = topojson.feature(world, world.objects.land),
        countries = topojson.feature(world, world.objects.countries).features,
        boundary = topojson.mesh(world, world.objects.countries, function(a, b) { return a !== b; });

        var t = textures.circles().lighter().size(3).fill("#e1e1e1");

        g.call(t);

        //append countries path
        feature
            .data(countries)
            .enter()
                .append("path")
                .attr("d", path(land))
                .style("fill", t.url())
                .attr("stroke", "#e1e1e1");

    }