AST_Assignment4

var chartTitle = '<h2>Dutch Olympic Medals from 2000 to 2014</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://assignmentdata.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 axis
            
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")

    });