AST_Assignment_5

//implement the necessary firebase script

$('head').append("<script src='https://cdn.firebase.com/v0/firebase.js'></script>")
      
---------------------------------------------------
//making and implementing the form

var inputs = "<input type='text' id='nameInput' placeholder='Olympic Game'><input type='number' id='medalsInput' placeholder='Medals total'><input type='checkbox' id='boolInput' placeholder='Summer Games'><label for='boolInput'>Summer Games</label><button type='submit' class='submit'>Submit</button>"
 
var firebaseData = new Firebase("https://assignment5.firebaseio.com");
 
var allData = null;
var allDataCount = 0; 
 
$('.main').append(inputs)
 
firebaseData.once('value', function(snapshot) {
  allData = snapshot.val();
  allDataCount = snapshot.numChildren(); // this is the index to increment off of
});

//pass comands that will add data

$('.submit').on('click', function (evt) { 
  var gameName = $('#nameInput').val(); 
  var medalCount = $('#medalsInput').val(); 
  var bool = $('#boolInput').is(':checked'); 
  firebaseData.child('/' + allDataCount).set({
     games: gameName, 
     medals: medalCount, 
     summergames: bool
  }); 
  allDataCount += 1; // increment since we still don't have the reference
});
    
---------------------------------------------------

//implement the d3 bar chart

var chartTitle = '<h2>Dutch Olympic Medals</h2>'
$('.main').append(chartTitle)
var dataSource =  '<p>Source: https://en.wikipedia.org/wiki/Netherlands_at_the_Olympics</p>'
$('body').append(dataSource)
var legend = '<p style="color:orange;font-size:20px;"> - Summer Games</p><p style="color:darkblue;font-size:20px;"> - Winter Games</p>'
$('body').append(legend)
 
 
 d3.json( 'https://assignment5.firebaseio.com/.json', 
  function (assignmentdata){;
 
var margin = { top: 20, right: 20, bottom: 20, left: 40 };
var w = 800 - margin.left - margin.right; 
var h = 550  - margin.top - margin.bottom;
var chartHeight = 400;
var barPadding = 5
 
var medals = function(d) { return d.medals * 30};
var medal = function(d) { return d.medals};
var games = function (d) {return d.games};
 
//add svg area
 
var svg = d3.select("body")
            .append("svg")
            .attr("width", w + margin.left + margin.right)
            .attr("height", h + margin.top + margin.bottom)
            .append('g')
            .attr('transform', 'translate(' + margin.left + ', ' + margin.top + ')');
 
 
//generate scales and axes
            
var xScale = d3.scale.ordinal()
  .domain(d3.range(assignmentdata.length))
  .rangeRoundBands([0, w], 0.2);
 
  var yScale = d3.scale.linear()
  .domain([0, d3.max(assignmentdata, function(d) { return d.medals; })])
  .range([chartHeight, 0])
 
var yAxis = d3.svg.axis()
  .scale(yScale)
  .orient("left")
  .ticks(5);
 
//group  chart elements
 
var barChart = svg.selectAll('g')
    .data(assignmentdata)
    .enter()
    .append('g')
    .attr('x', function(d,i) {
      return xScale(i) + xScale.rangeBand();
    })
    .attr('width', xScale.rangeBand() + 10)
    .attr('height', chartHeight)
    .append('g')
    .attr("transform", function(d, i) {
      return "translate(" + xScale(i) + "," + 0 + ")";
    })
 
//ad chart bars
 
    barChart.append('rect')
    .attr('x', 0)
    .attr('y', function(d) {
      return yScale(d.medals);
    })
    .attr('width', xScale.rangeBand()) 
    .attr('height', function(d){
      return chartHeight - yScale(d.medals);
    })
  .attr("fill", function(d) {
    return "rgb(64, 224, " + (d.medals * 10) + ")";})
.on("mouseover", function() {
        d3.select(this)
          .attr("fill", "purple");})
.on("mouseout", function() {
        d3.select(this)
        .transition()
        .duration(250)
          .attr("fill", function(d) {
    return "rgb(64, 224, " + (d.medals * 10) + ")";})})
.attr('stroke', function(d){
    if(d.summergames){
      return 'orange';
    }
    return 'darkblue';
  })
    .style('stroke-width', '4px')
 
//add bar data labels
            
barChart.append("text")
    .text(medal)
    .attr("text-anchor", "middle")
    .attr("x", function(d, i) { return xScale.rangeBand() / 2; })
    .attr("y", function(d) { return yScale(d.medals) + 20; })
    .attr("font-family", "calibri")
    .attr("font-size", "14px")
    .attr("fill", function(d) {
    return "rgb(64, 224, " + (d.medals * 10) + ")";})
 
//add bar names
 
  barChart.append("text")
    .text(games)
    .attr("x", function(d, i) { return xScale.rangeBand() / 2; })
    .attr("y", chartHeight + 10)
    .attr("font-family", "calibri")
    .attr("font-size", "14px", "bold")
    .attr("fill", function(d) {
    return "rgb(64, 224, " + (d.medals * 10) + ")";})
    .style("writing-mode", "tb");
 
//add yAxis
  
  svg.append("g")
    .attr("class", "axis")
    .call(yAxis)
    .attr("fill", "#black")
    //.attr("stroke", "black")
    .attr("font-family", "calibri")
    .attr("font-size", "16px")
 
    
    });

//alert when data is added
    
firebaseData.on('value', function(d) {
	alert('New data has been added successfully!')
});
    
    
//don't know exactly what to do with these (not sure if this is right):
 
 //firebaseData.on('value', function(assignmentdata) {
//data = d.val();
//update(assignmentdata);
//});