curves.html 1.36 KB
Newer Older
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52
<html>
    <head>
        <meta charset="utf-8">
        <script src='http://d3js.org/d3.v5.min.js'></script>
    </head>
<body>
</body>

<script>

    var lineData = [];

    //horizontalish lines
    for(var i = 0; i < 30; ++i) {
        var newElement = [];
        for(var x = 0; x < 1600; x += 100) {
            newElement.push({x: x, y: 30*i + 0.1*x + 0.0002* i * x * x});
        }
        lineData.push(newElement);
    }

    //verticalish lines
    for(var i = 0; i < 70; ++i) {
        var newElement = [];
        for(var y = 0; y < 1000; y += 100) {
            newElement.push({x: 60*i - 0.1*y - 0.0001* i * y * y, y: y});
        }
        lineData.push(newElement);
    }

    var lineFunction = d3.line()
        .x(function(d) { return d.x; })
        .y(function(d) { return d.y; })
        .curve(d3.curveCatmullRom.alpha(0.5));

    var svgContainer = d3.select("body").append("svg")
        .attr("width", 1600)
        .attr("height", 600);
    
    svgContainer.append("rect")
        .attr("width", "100%")
        .attr("height", "100%")
        .attr("fill", "black");

    var lineGraph = svgContainer.selectAll("path")
        .data(lineData).enter()
        .append("path")
            .attr("d", function(d) {; return  lineFunction(d)})
            .attr("stroke", "white")
            .attr("stroke-width", 1.5)
            .attr("fill", "none");
</script>