Skip to content

Instantly share code, notes, and snippets.

@larskotthoff

larskotthoff/index.html

Created January 19, 2012 21:31
Show Gist options
  • Save larskotthoff/1642835 to your computer and use it in GitHub Desktop.
Save larskotthoff/1642835 to your computer and use it in GitHub Desktop.
Download ZIP
variable width line
Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<script type="text/javascript" src="http://mbostock.github.com/d3/d3.js"></script>
<script type="text/javascript" src="https://raw.github.com/larskotthoff/d3/varline/src/svg/line-variable.js"></script>
</head>
<body>
<div id="linevar"></div>
<script type="text/javascript">
(function () {
var dat = [{x: 20, y: 20, w: 0},
{x: 20, y: 150, w: 30},
{x: 80, y: 100, w: 20},
{x: 200, y: 100, w: 10},
{x: 300, y: 100, w: 20},
{x: 380, y: 100, w: 0}],
svg = d3.select("#linevar")
.append("svg:svg")
.attr("height", 200)
.attr("width", 400);
var linevar = d3.svg.line.variable()
.interpolate("basis")
.w(function(d) { return d.w; })
.x(function(d) { return d.x; })
.y(function(d) { return d.y; });
svg.selectAll("path").data([dat]).enter()
.append("svg:path")
.attr("d", linevar);
})();
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment