variable width line

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/d3@2.10.3/d3.v2.js"></script>
        <script type="text/javascript" src="https://cdn.jsdelivr.net/gh/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);

svg.selectAll("path").data([dat]).enter()
            .append("svg:path")
            .attr("d", linevar);
        })();
        </script>
    </body>
</html>

Modified http://mbostock.github.com/d3/d3.js to a secure url

Updated missing url https://raw.github.com/larskotthoff/d3/varline/src/svg/line-variable.js to https://cdn.jsdelivr.net/gh/larskotthoff/d3/varline/src/svg/line-variable.js

https://mbostock.github.com/d3/d3.js

https://raw.github.com/larskotthoff/d3/varline/src/svg/line-variable.js