Skip to content

Instantly share code, notes, and snippets.

@goude

goude/index.html

Last active June 3, 2016 13:08
Show Gist options
  • Save goude/aaf16cf6294d819362b3fd806439094b to your computer and use it in GitHub Desktop.
Save goude/aaf16cf6294d819362b3fd806439094b to your computer and use it in GitHub Desktop.
Download ZIP
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="http://gist.githubusercontent.com/goude/a71dbb47995c1ae768bdfb963d1cbcf9/raw/cb83771ca99bf600adc02f032dda2c8b3d344793/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