First version assignment 5 Jade and Patty (handed in)

First version assignment 5 Jade and Patty (handed in)

//define firebase
var firebase = new Firebase("https://vivid-fire-6976.firebaseio.com/");
 
//call firebase-data, execute tree-diagram when all data is there
d3.json("https:///vivid-fire-6976.firebaseio.com/.json", function(data) {
 
var width = 1000,
    height = 400;
 
 
//define diagram
    var tree = d3.layout.tree().size([width, height/3]);
    var nodes = tree.nodes(data);
    var links = tree.links(nodes);
 
    var svg = d3.select("body").append("svg")
        .attr("width", width)
        .attr("height", height)
        .append("g")
        .attr("transform", "translate(20,20)");
 
//create nodes
    var nodeSelection = svg.selectAll(".node").data(nodes, function(d) {
        return d.name;
    });
 
    var groupNodes = nodeSelection.enter().append("g")
        .attr("transform", function(d) {
            return "translate(" + d.x + ", " + d.y + ")";
        })
        .attr("class", function(d) {
            return d.phases ? "phases" : "node";
        });
 
    groupNodes.append("circle")
        .attr("r", 15)
        .attr("fill", "#CC9999")
        .attr("stroke", "#CC3333")
        .attr("stroke-width", 10);
 
    groupNodes.append("text")
        .text(function(d) { return d.name; })
        .attr("text-anchor", "left")
        .attr("transform", "translate(10, 5)");
 
    nodeSelection.exit()
        .remove();
 
    var linkSelection = svg.selectAll("path.link")
        .data(links, function(d) {
            return d.source.name + "-" + d.target.name;
        })
        .enter()
        .append("path")
        .attr("class", "link")
        .attr("d", d3.svg.diagonal());
 
    var phaseSelection = nodeSelection.filter(function(d) { return d.phases; }).selectAll("g.phases")
        .data(function(d) { return d.phases; }, function(d) { return d.name; });
 
    var phaseNodes = phaseSelection.enter().append("g")
        .attr("class", "phase")
        .attr("transform", function(d, i) {
            return "translate(" + ((i*120)-120) + ", 30)";
        });
        
 
phaseNodes.append("svg:image")
            .attr('x',-9)
            .attr('y',-12)
            .attr('width', 100)
            .attr('height', 150)
            .attr("xlink:href", function(d) { return d.imagen });
           
 
//click-alert function
$(function() { var clickEvent = function() { alert("clickEvent"); }; $("image").on("click", function() { alert("Would you like to see a bigger picture?"); }).on("click");  
 
//click image function for bigger pictures
$("image").click(function(event) {
    window.open($(this).attr("href"), "popupWindow", "width=500,height=300,scrollbars=yes");
 
 
       });
    });
 });