Skip to content

Instantly share code, notes, and snippets.

@dholth

dholth/gradient.js

Created November 15, 2011 20:20
Show Gist options
  • Star 4 You must be signed in to star a gist
  • Fork 1 You must be signed in to fork a gist
  • Save dholth/1368205 to your computer and use it in GitHub Desktop.
Save dholth/1368205 to your computer and use it in GitHub Desktop.
Download ZIP
d3.js + svg gradients
Raw
gradient.js
var svg = d3.select("body")
.append("svg:svg")
.attr("width", 256)
.attr("height", 256);
var defs = svg.append('svg:defs');
defs.append('svg:linearGradient')
.attr('gradientUnits', 'userSpaceOnUse')
.attr('x1', 0).attr('y1', 0).attr('x2', 20).attr('y2', 0)
.attr('id', 'master').call(
function(gradient) {
gradient.append('svg:stop').attr('offset', '0%').attr('style', 'stop-color:rgb(0,0,0);stop-opacity:1');
gradient.append('svg:stop').attr('offset', '100%').attr('style', 'stop-color:rgb(0,0,0);stop-opacity:0');
});
var data = [[0, 30], [1, 60], [2, 180], [3, 70], [4, 42], [5, 64]];
var text = "xyzzy xyzzy xyzzy xyzzy xyzzy";
defs.selectAll('.gradient').data(data)
.enter().append('svg:linearGradient')
.attr('id', function(d, i) { return 'gradient' + i; })
.attr('class', 'gradient')
.attr('xlink:href', '#master')
.attr('gradientTransform', function(d) { return 'translate(' + d[1] + ')'; });
svg.selectAll('text').data(data)
.enter().append('svg:text')
.attr('fill', function(d, i) { return 'url(#gradient' + i + ')'; })
.attr('x', 0)
.attr('y', function(d, i) { return (i+1) * 20; })
.text(text);
Raw
index.html
<html>
<head>
<style>
text { font-family: serif; font-size: 40; }
</style>
</head>
<body>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js?2.5.0"></script>
<script type="text/javascript" src="gradient.js"></script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment