How to use the textures.lines function in textures

To help you get started, we’ve selected a few textures examples, based on popular ways it is used in public projects.

Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.

github sebastianquek / commute / src / modules / datetime-manager / components / DatetimeSlider.js View on Github external
.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)
github reichlab / d3-foresight / src / components / common / axis-x.js View on Github external
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
  }
github reichlab / flusight / src / modules / timechart.js View on Github external
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)
github reichlab / flusight / src / choropleth.js View on Github external
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
  }
github finnfiddle / react-svg-textures / src / Lines.js View on Github external
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),
github govau / performance-dashboard / client / src / _dashboard-legacy / Helpers / createPatterns.js View on Github external
.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;
github govau / performance-dashboard / client / src / _dashboard-legacy / Helpers / createPatterns.js View on Github external
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()