Portfolio assignment 4+5-dataset in firebase

Portfolio assignment 4+5-dataset in firebase

d3.json('https://astportfoliodata.firebaseio.com/.json', function(d) {
    console.log(data);  //Log output to console

    var dataset = data
    
myDataRef = new Firebase('https://astportfoliodata.firebaseio.com/.json');

//Width and height
		var w = 500;
		var h = 400;

//Create scale functions
var padding = 20;

var xScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[0]; })])
                     .range([padding, w - padding * 2]);

var yScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                     .range([h - padding, padding]);

var rScale = d3.scale.linear()
                     .domain([0, d3.max(dataset, function(d) { return d[1]; })])
                     .range([2, 5]);


//Create SVG element

var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h);

svg.selectAll("circle")  
   .data(dataset)
   .enter()
   .append("circle")     
   .attr("cx", function(d) {
        return xScale(d[0]);
   })
   .attr("cy", function(d) {
        return yScale(d[1]);
   })
   .attr("r", function(d) {
    return rScale(d[1]);
});


//Create mouseover/mouseout
svg.selectAll("circle")    
      .on("mouseover", function() {
        d3.select(this)
          .attr("fill", "orange");
});

svg.selectAll("circle")
      .on("mouseout", function(d) {
        d3.select(this)
      .transition()
      .duration(250)
      .attr("fill", "rgb(0, 0, " + (d * 10) + ")");
});

//Create labels
svg.selectAll("circle")
    .append("title")
    .text(function(d) {
         return "This value is " + d;
});

//Create Axis
var xAxis = d3.svg.axis()
                  .scale(xScale)
                  .orient("bottom");
                  
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(0," + (h - padding) + ")")
    .call(xAxis);

var yAxis = d3.svg.axis()
                  .scale(yScale)
                  .orient("left")
svg.append("g")
    .attr("class", "axis")
    .attr("transform", "translate(" + padding + ",0)")
    .call(yAxis);


//Create update form
  
  var newValuesForm='<form id="newValues"><br/><u>Enter new Values to be stored: </u><br/><br/>Student:<input type="text" id="newLabel" ><br/>Hours of Coding: <input type="number" id="val1" class="required number" style="width: 50px;"> Grade: <input type="number" id="val2" style="width: 50px;"><a><i id="storeData">Click this text to store new data</i></a></form>';
  $('body').append(newValuesForm);

$("#storeData")
    .on("click", function() {
      n = dataset.length;

      for ( var i = 0, l = 10; i < l; i++ ) {
        p = i + 1;
            myDataRef.child(n).child(i).set( parseInt( $("#val"+p).val()) );
            };
      myDataRef.child(n).child(10).set( $("#newLabel").val() );

      createForm();
      $('#newValues :input').val('');

      d3.json('https://astportfoliodata.firebaseio.com/.json', function(data) {
        dataset = data; 
        alert("New data stored successfully, you can now select it from the dropdown menu to be diplayed.");
        });

});

});