Assignment 5 (revised version Portfolio1)

Assignment 5 (revised version Portfolio1)

//new css script

text {
        font-size: 14px;
        font-family: 'Pathway Gothic One', sans-serif;
        font-weight: 400
    }
    .phase text {
        font-size: 100px;
        font-family: 'Pathway Gothic One', sans-serif;
    }
    .link {
        fill: none;
        stroke: #605076;
        stroke-width: 3;
}

//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", 13)
        .attr("fill", "#00000")
        .attr("stroke", "#786f6f")
        .attr("stroke-width", 5);
 
    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) + ", 10)";
        });
        
 
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("The Arab Spring initially started in Tunesia, but spread to other countries. On January 25 (2011), protesters gathered at Tahrir square in Cairo. This was the start of a revolution in Egypt. These photos were all taken on the 25th of January, in 2011, 2012 and 2013 (photos: from left to right). The photos on the left side of the diagram were published by the New York Times, on the right by NRC Handelsblad. Click OK to see a bigger image."); }).on("click");  
 
//click image function for bigger pictures
$("image").click(function(event) {
    window.open($(this).attr("href"), "popupWindow", "width=500,height=300,scrollbars=no");
       });
    });
 });