D3.js - Line fun

by Steven Senkus

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

JavaScript

var w = 440,
    h = 260;
var color1 = d3.scale.category20b();
var color2 = d3.scale.category20c();

var paddingX = 50;
var paddingY = 50;


//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w)
    .attr("height", h)
    .style('background-color', '#000');


for (var i = 0; i <= w - 25; i = i + 5) {
    svg.append("line")
        .attr("x1", 0)
        .attr("y1", i)
        .attr("x2", w)
        .attr("y2", 0)

        .style("stroke", color2(i))
        .style("stroke-width", 29)

        .transition()
        .duration(1000)
        .attr('y2', h)
        .transition()
        .delay(1000)
        .duration(1000)
        .attr("x1", w)
        .transition()
        .delay(2000)
        .duration(1000)
        .attr('x2', 0)
        .attr("y2", i)

        .transition()
        .delay(5000)
        .duration(1000)
        .style("stroke", color1(i))
        .style('opacity', 0.75)


    svg.append("line")
        .attr("x1", 0)
        .attr("y1", 0)
        .attr("x2", w)
        .attr("y2", i)
        .style("stroke", color1(i))
        .style("stroke-width", 5)
        .transition()
        .duration(1000)
        .attr('y2', 0)
        .transition()
        .delay(1500)
        .duration(1000)
        .attr("y2", i)
        .transition()
        .delay(3000)
        .duration(1000)
        .attr("y1", i)
        .style('opacity', 0.8);
}