Pulse Demo

Demonstrates pulses linking planets together

by IPWright83

HTML

<svg id="svg">
    <defs>
        <radialGradient id="grad1" cx="50%" cy="50%" r="50%" fx="50%" fy="50%">
            <stop offset="5%" style="stop-color:rgb(255,255,255); stop-opacity:1" />
            <stop offset="10%" style="stop-color:rgb(255,255,255); stop-opacity:0.8" />
            <stop offset="20%" style="stop-color:rgb(255,255,255); stop-opacity:0.6" />
            <stop offset="60%" style="stop-color:rgb(255,255,255);stop-opacity:0.0" />
        </radialGradient>
    </defs>
</svg>

CSS

svg {
    background: #222234;
    width: 600px;
    height: 600px;
    font-size: 10px;
    text-align: center;
    font-family: 'Open Sans', Arial, sans-serif;
}
circle {
    fill: url(#grad1);
}
line {
    fill: none;
    stroke: #fff;
    stroke-width: 2px;
}
text {
    text-anchor: middle;
}

JavaScript

var nodes = [
    { x: 105, y: 105, r: 55, color: "#3BAF4A", title: "Objectives" }, 
    { x: 305, y: 505, r: 35, color: "#AA7040", title: "Services" },
    { x: 505, y: 305, r: 35, color: "#AA7040", title: "Missions" },
    { x: 205, y: 205, r: 35, color: "#AA7040", title: "Equipment" },
    { x: 505, y: 105, r: 75, color: "#AA7040", title: "Assets" }
];
var links = [
    { source: nodes[0], target: nodes[1] },
    { source: nodes[0], target: nodes[2] },
    { source: nodes[0], target: nodes[3] },
    { source: nodes[0], target: nodes[4] },
    { source: nodes[1], target: nodes[4] },
    { source: nodes[1], target: nodes[3] },
];

    nodes.forEach(function(d) {
        d.links = [];
    });

    links.forEach(function(d) {
        d.source.links.push(d.target);
    });
    
var svg = d3.select("svg");
var relationshipLayer =svg.append("g").attr("id", "relationships");
var nodeLayer = svg.append("g").attr("id", "nodes");

// Add the nodes
var nodeEnter = nodeLayer.selectAll("circle").data(nodes).enter();
    
var nodes = nodeEnter.append("g")
                     .attr("transform", function(d) { return "translate(" + d.x + "," + d.y + ")";})
                     .on("click", function (d) {
                         
                            d3
                           .selectAll(".node")
                           .transition()
                            .duration(100)
                            .style("fill", function(n) { 
                                if(n === d) { return d.color; }
                                return "#1C1C1C";
                            })
                           .filter(function(n) { return n === d; })
                            .each("end", function(d) { pulse(d); });
                     });

var circles = nodes.append("circle")
                    .attr("class", "node")
                    .attr("r", function (d) { return d.r; })
                    .style("fill", "#1C1C1C")
                    .style("stroke-width",...