Portfolio assignment 4+5-dataset in firebase

d3.json('https://astportfoliodata.firebaseio.com/.json', function(data) {
    var d = Object.keys(data).map(function(key){ return data[key]});
    
//Width and height
		var w = 500;
		var h = 400;

//Create scale functions
var padding = 20;

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

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

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


//Create SVG element

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

svg.selectAll("circle")  
   .data(d)
   .enter()
   .append("circle")     
   .attr("cx", function(d) {
        return xScale(d["Hours of coding"]);
   })
   .attr("cy", function(d) {
        return yScale(d["Grade"]);
   })
   .attr("r", function(d) {
    return rScale(d["Grade"]);
});


//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 = d.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) {
        d = data; 
        alert("New data stored successfully, you can now select it from the dropdown menu to be diplayed.");
        });

});

});