eesur/README.md

## README.md

      
    Raw
  

              README.md
            
          
    testing out textures.js on paths

  
## index.html
<!DOCTYPE html>
<meta charset="utf-8">

<section id="vis"></section>
<!-- d3js inside d3fc.bundle -->
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/10.1.0/d3fc.bundle.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>
<script src="https://cdn.rawgit.com/riccardoscalco/textures/master/dist/textures.js" charset="utf-8"></script>
<!-- d3 code -->
<script src="script-compiled.js" charset="utf-8"></script>


## script-compiled.js
'use strict';

// test with dummy data
function generateData() {
    var _data = [];

    // generate data
    _.times(9, function (n) {
        _data.push({
            x: n,
            y: _.random(10, 100)
        });
    });

    return _data;
}

var data = generateData();

function bar() {

    // test out some textures
    var t1 = textures.lines(),
        t2 = textures.lines().heavier(),
        t3 = textures.paths().d('crosses').lighter().thicker(),
        t4 = textures.lines().thicker(),
        t5 = textures.lines().heavier(10).thinner(1.5),
        t6 = textures.lines().size(4).strokeWidth(1),
        t7 = textures.lines().size(8).strokeWidth(2),
        t8 = textures.lines().orientation('3/8').stroke('tomato'),
        t9 = textures.paths().d('woven').lighter().thicker();

    var t = [t1, t2, t3, t4, t5, t6, t7, t8, t9];

    var width = 960,
        height = 400;

    var container = d3.select('#vis').append('svg').attr({
        width: width,
        height: height
    });

    // need to call each fill individually?
    _.times(t.length, function (n) {
        container.call(t[n]);
    });

    var xScale = d3.scale.linear().domain(fc.util.extent().pad(0.1).fields(['x'])(data)).range([0, width]);

    var yScale = d3.scale.linear().domain(fc.util.extent().fields(['y'])(data)).range([height, 0]);

    var bar = fc.series.bar().xValue(function (d) {
        return d.x;
    }).yValue(function (d) {
        return d.y;
    }).xScale(xScale).yScale(yScale).decorate(function (s) {
        s.enter().select('.bar > path').style({
            // apply the texture (account for more than 9 items)
            fill: function fill(d, i) {
                return t[i % t.length].url();
            },
            stroke: 'none'
        });
    });

    var chart = container.append('g');

    render();
    function render() {
        chart.datum(data).call(bar);
    }

    setInterval(function (d) {
        var _data = generateData();
        chart.datum(_data).transition().duration(600).call(bar);
    }, 2000);
}

bar();

## thumbnail.png

      
    Raw
  

              thumbnail.png
	<!DOCTYPE html>
	<meta charset="utf-8">

	<section id="vis"></section>
	<!-- d3js inside d3fc.bundle -->
	<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3fc/10.1.0/d3fc.bundle.min.js"></script>
	<script src="//cdnjs.cloudflare.com/ajax/libs/lodash.js/4.6.1/lodash.min.js" charset="utf-8"></script>
	<script src="https://cdn.rawgit.com/riccardoscalco/textures/master/dist/textures.js" charset="utf-8"></script>
	<!-- d3 code -->
	<script src="script-compiled.js" charset="utf-8"></script>
	'use strict';

	// test with dummy data
	function generateData() {
	var _data = [];

	// generate data
	_.times(9, function (n) {
	_data.push({
	x: n,
	y: _.random(10, 100)
	});
	});

	return _data;
	}

	var data = generateData();

	function bar() {

	// test out some textures
	var t1 = textures.lines(),
	t2 = textures.lines().heavier(),
	t3 = textures.paths().d('crosses').lighter().thicker(),
	t4 = textures.lines().thicker(),
	t5 = textures.lines().heavier(10).thinner(1.5),
	t6 = textures.lines().size(4).strokeWidth(1),
	t7 = textures.lines().size(8).strokeWidth(2),
	t8 = textures.lines().orientation('3/8').stroke('tomato'),
	t9 = textures.paths().d('woven').lighter().thicker();

	var t = [t1, t2, t3, t4, t5, t6, t7, t8, t9];

	var width = 960,
	height = 400;

	var container = d3.select('#vis').append('svg').attr({
	width: width,
	height: height
	});

	// need to call each fill individually?
	_.times(t.length, function (n) {
	container.call(t[n]);
	});

	var xScale = d3.scale.linear().domain(fc.util.extent().pad(0.1).fields(['x'])(data)).range([0, width]);

	var yScale = d3.scale.linear().domain(fc.util.extent().fields(['y'])(data)).range([height, 0]);

	var bar = fc.series.bar().xValue(function (d) {
	return d.x;
	}).yValue(function (d) {
	return d.y;
	}).xScale(xScale).yScale(yScale).decorate(function (s) {
	s.enter().select('.bar > path').style({
	// apply the texture (account for more than 9 items)
	fill: function fill(d, i) {
	return t[i % t.length].url();
	},
	stroke: 'none'
	});
	});

	var chart = container.append('g');

	render();
	function render() {
	chart.datum(data).call(bar);
	}

	setInterval(function (d) {
	var _data = generateData();
	chart.datum(_data).transition().duration(600).call(bar);
	}, 2000);
	}

	bar();