riccardoscalco / textures Goto Github PK

View Code? Open in Web Editor NEW

6.0K 90.0 218.0 5.84 MB

Textures.js is a JavaScript library for creating SVG patterns

Home Page: http://riccardoscalco.github.io/textures/

License: MIT License

JavaScript 100.00%

textures patterns svg d3

textures's Introduction

textures.js

Textures.js is a JavaScript library for creating SVG patterns. Made on top of d3.js, it is designed for data visualization.

Install

npm install textures

Usage

Import textures.js from NPM with:

import textures from 'textures';

You can also use textures.js in your HTML page with a <script> tag by downloading textures.js to a local folder:

<script src="path/to/textures.js"></script>

or by using the Unpkg CDN network:

<script src="https://unpkg.com/[email protected]/dist/textures.js"></script>

Then textures.js can be used alongside d3 with:

const svg = d3
  .select('#example')
  .append("svg");

const texture = textures
  .lines()
  .thicker();

svg.call(texture);

svg
  .append('circle')
  .style('fill', texture.url());

License

MIT

textures's People

Contributors

Stargazers

Watchers

Forkers

deoxxa tobymarsden gijs thehiddenhaku leury1 msloth zikes arthurvondyck wavelets jstopchick mywynne bollwyvl jongrover max-mapper kdoore dev-enthusiast silky beetaa arslanmit caarloshugo weishishuo duynguyenhoang f2ealexis fyatao drooids eadistar kublaj thenitish23121991 polycopter bradparks myrddin669 raleighgee ezhangle trengrj alexanderkwright fooidge omni360 alihalabyah tl1028 jaggedsoft jozephol ohcrider s1ckdark rpascual0812 wanjl leexy rjagadishsingh secounit yadhn umarmughal 474491418 expond gitmanny joesantana carabina stimpygato rosalescorp oliviachou cule alexlaforge konstantinos-tsatsarounos oxcodertest magnumcreative babukrishna degatt2 lorenzopub sarat246 michaelwiss xyproto yohnz orzorzooo brian-hicks rolka avantassel thomassander say2joe majimax txd159 yerffejytnac tankyh tanykim namminammi andreaslangsays farfor arpitartworks michaeljunlove gaychou michael-gabenna alsino tutotau fgcarto seenaomi web1o1 esaul modulexcite duyqngo cuulee digitalcoder daprice fadizahhar

textures's Issues

textures.scale?

Here's the shortest way I saw at present to represent a scale of textures:
http://codepen.io/anon/pen/wBRwvj

Perhaps a textures.scale, necessarily ordinal, could make this easier:

scale = textures.scale.lines()
  .domain(data)
  .strokeWidth(function(d){ return d.value; });

svg.call(scale.init()) // compute all the textures needed, insert the defs

svg.selectAll("circle")
  .data(data)
  .enter()
  .style({fill: scale})

create tags?

Can you push out releases so the version can handled through bower?

Example chart integrations

Please provide example code snippets for integrating Textures.js with popular chart frameworks, so that developers can add textures more quickly to our applications!

Chart.js
TUI
flot
Highcharts
D3
Amcharts

Replace header .png with an .svg map of Italy

Hi there! 👋

I was just browsing for data visualization-related libraries and modules for the product I'm working on, and came across your amazing work here.

While I was scrolling through the page, one of my devs walked by and stopped to check out what I was looking at. Impressed, he asked me if the map was also an .svg, and when I checked it out, we both discovered it wasn't.

I did a quick google and found this awesome collection of country maps in svg format.

If you're feeling like updating the site anytime soon, maybe consider this resource so the whole page is rendered w/ svgs! 😄

Making textures work in simple context

Hello everybody, today I have a super simple example that I want to display. After looking at this for several hours and searching through internet (since no docs are available today) I'm getting stuck with this:

<html>
<script src="https://unpkg.com/[email protected]/dist/textures.js"></script>
<body>
<svg xmlns='http://www.w3.org/2000/svg' style="border: 1px solid red;">
          <defs>
            <pattern
              id="slzxo"
              patternUnits="userSpaceOnUse"
              width="10"
              height="10"
            >
              <path
                d="M 2.5,7.5l2.5,-5l2.5,5"
                fill="transparent"
                stroke="darkorange"
                stroke-width="1"
                stroke-linecap="square"
                shape-rendering="auto"
              ></path>
            </pattern>
          </defs>
          <circle style='fill: url("#slzxo");'></circle>
        </svg>
</body>
</html>

Can someone help me with this basic example output that was given by my React app and that does not display anything?

I also have this in React:

import textures from "textures";
import * as d3 from "d3";
import React from "react";
import ReactDOM from "react-dom";

class MySvgBackground extends React.Component {
  componentDidMount() {
    const svg = d3.select("#example").append("svg");
    const texture = textures
      .paths()
      .d("caps")
      .lighter()
      .thicker()
      .stroke("darkorange");
    svg.call(texture);
    svg.append("circle").style("fill", texture.url());
  }

  render() {
    return (
        <div id="example" style={{border: "1px solid red"}}></div>
    );
  }
}

ReactDOM.render(
  <React.StrictMode>
    <MySvgBackground />
  </React.StrictMode>,
  document.getElementById("root")
);

I also want to bring a little precision about this code. If I define elsewhere the svg than in componentDidMount(), than it won't add in the <div id="example"... the svg tag.

Thank you! :)

Have a new texture instance with a copy() method

At the moment a new texture cannot be created from another one.
The following direction has been suggest on issue #7.

var svg = d3.select("#example").append("svg");

var t1 = textures.lines().thicker();
var t2 = t1.copy().fill("red") // This creates a new texture instance

// t1 and t2 would have separate defs in the SVG
svg.call(t1);
svg.call(t2);

svg.append("circle").style("fill", t1.url());
svg.append("circle").style("fill", t2.url());

Website exampels broken as //d3js.org/d3.v3.min.js is timing out on https

d3js.org does not support https you must http explicitly.

<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>

Publish to https://cdnjs.com/

Please host static assets on a content delivery network such as CDNJS.com, so that developers can integrate Textures.js more easily into our applications!

texture fill for responsive map

I am wondering if there's a way to coordinate texture fill with responsive d3 map? It seems that the strokes will disappear while background color remains. It could be just me.

Thank you.

Is it possible to customize fill color for each item inside the pattern ?

Undefined on svg.call

d3 version 2.9.7

Usage:

var t = textures.lines().thicker();
svg.call(t);
svg.style('fill', t.url());

svg.call(t) returns undefined inside d3's append child method.

Publish as a Node package on npmjs

Would be great to see this library on www.npmjs.com.

Personally, I could see myself using this in a future version of D3plus.

A tool for drawing textures

@zanarmstrong created a tool for drawing textures:
http://bl.ocks.org/zanarmstrong/raw/08833a326224d41fbb96/

Creating patterns is usually tricky, it would be great to have such tool in a dedicated webpage and linking to it from the textures.js webpage (or having it directly there).

@zanarmstrong's tool can be improved with some features, like

a mechanism to snap points to the grid (like inkscape), so to have linear segments
a variable number of grid steps, on x and y
the grid (i.e. the drawing area) should be larger than the quadrant, because it is often useful to draw lines that go beyond the quadrant
a mechanism to delete segments
a way to copy and paste the resulting code (see textures.js custom patterns)

Typo on site page - 'ligher' should be 'lighter'.

Under LINES, textures.lines.lighter() is misspelt.

Best way to use in Sketch for design?

Hey guys, love these textures. Any way to download use this svg library in Sketch app for design?
Thanks!

using with browserify

I've installed textures using npm install textures --save-dev but when I try and require('textures'); it is returning as undefined.

Use linear gradient as fill/stroke colour?

Is it possible to use a gradient fill instead of a single colour?

var def = svg.append('defs');
var gradient = def.append('linearGradient')
    .attr('id', 'custom_id_1')
    .attr('x1', '50%')
    .attr('y1', '0%')
    .attr('x2', '50%')
    .attr('y2', '100%');

//set start
gradient.append('stop')
    .attr('offset', '0%')
    .attr('stop-color', 'white')

//set color at the end
gradient.append('stop')
    .attr('offset', '100%')
    .attr('stop-color', 'blue')

var t = textures
    .lines()
    .shapeRendering("crispEdges")
    .background('url(#custom_id_1)');

var t = textures
    .lines()
    .shapeRendering("crispEdges")
    .stroke('url(#custom_id_1)');

Browser printing is not the same as I thought

When I want to print with a browser. I found that the effect is not what I thought.

Please push a new minor version to npm

I really only need the patch that makes require work. Thanks.

working with svg crowbar to export?

Hello,

I would like to be able to export the textures to a svg file with a tool such as svg crowbar; unfortunately it only seems to work in Inkscape — Illustrator or Affinity Designer don't find the textures. If I use Inkscape to export to PDF, then open the PDF in Illustrator, the textures are there but contain a small “border„ around each square, which is pretty ugly.

Do you have any idea of what can be missing? I can post example files.

D3v4 compatibility

There seem to be a few things breaking with D3v4. I think most of them are related to D3's updated selection methods.

For the sake of parsimony, the multi-value map methods have been extracted to d3-selection-multi and are no longer part of the default bundle. The multi-value map methods have also been renamed to plural form to reduce overload: selection.attrs, selection.styles and selection.properties.

Changing all the .attr calls to .attr is east enough. But changes to selection.call seem like they're going to be trickier.

The selection.call method no longer sets the this context when invoking the specified function; the selection is passed as the first argument to the function, so use that.

I'm having issues with call in other places too, but I'm trying to get this working.

Possible to assign fill to custom paths?

I'm attempting to use the custom path tool to create some shapes that are filled. When I attempt to chain the .fill('#fff') method, I'm getting an error. Is this possible, or am I doing something wrong?

var fill = textures.paths().d(function(s){
// This path is generated by another function that does the sizing
var path = 'M24,3.5999999999999996 L23.1,5.3999999999999995 L23.700000000000003,6.8999999999999995 L25.5,7.5 L27,6.300000000000001 L27,4.199999999999999 z';
return path
})
.size(30)
.strokeWidth(0.5)
.fill('#fff')
.background('#000');

Avoid svg.call(t)

This issue is related to #7, in particular at the @bollwyvl comment

an element in an svg can always know its svg. Since these textures must be
singletons anyway a la #id, and since it can only ever drive "fill"... one
could remove the svg.call(t1) and t1.url(). Then it would just be
shape.call(t1), which would be much more d3-like. Under the hood, it would
selectAll("defs #some-texture-id", [t]) and then the whole enter/update
dance... But finally selection.style("fill", t.url()).

d3 zoom

Is there any solution for change stroke-width and size using d3 zoom scale?

downloading a fill that is done with a url

I am using a pattern to fill a map usin the .attrr('fill','url(..')

but when I download it as an svg the url fill are all white

does anyone have a solution to downloading the actual patterns?

sorry I know this is not really a specific issue to this library but I have not found any help with this anywhere else.

TypeError: this.append is not a function

Hi,

I'm hitting this error when implementing the "getting started" example on your webpage:

textures.inc.js:208 Uncaught TypeError: this.append is not a function

I'm using:

d3 v4.2.0
textures v1.0.3

Any ideas?

Cheers.

Link to repository on website

Maybe this is more an issue with your personal site...but you have a beautiful and compelling intro page for this repository, only to have no link to the code! It took searching your name on Github to find the actual repo, so I could star it for later.

Please add a link to the specimen page. This is wonderful work!