AST_assignment_3

var chartTitle = '<h2>Events and ratings</h2>'
$('.main').append(chartTitle)
 
var eventsJSON = localStorage.getItem('assignment');
var data = JSON.parse(eventsJSON).events;
var events = data;
 
var w = 800 
var h = 300 
var barPadding = 5
 
var ratings = function(d) { return d.rating * 30};
var rating = function(d) { return d.rating};
var names = function (d) {return d.name};
 
var svg = d3.select("body")
            .append("svg")
            .attr("width", w)
            .attr("height", h)
 
svg.selectAll("rect")
   .data(events)
   .enter()
   .append("rect")
 .attr("x", function(d, i) {return i * (w / events.length);})
.attr("y", function(d) {return h - (d.rating * 30);})
.attr("width", (w / events.length - barPadding))
.attr("height", ratings)
.attr("fill", function(d) {
    return "rgb(64, 224, " + (d.rating * 50) + ")";})
.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.rating * 50) + ")";})})
 
//svg.selectAll("rect")
.filter(function (d, i) {
                    return d.ficticious == true;
                })
                .attr("stroke", 'red');
            
svg.selectAll("rect").attr('stroke', function(d){
    if(d.ficticious){
      return 'red';
    }
    return 'black';
  })
 
svg.selectAll("text")
   .data(events)
   .enter()
   .append("text")
.text(function(d) {return d.rating})
.attr("x", function(d, i) {
        return i * (w / events.length) + (w / events.length - barPadding) / 2;
   }).attr("y", function(d) {
        return h - (d.rating * 15);
   }).attr("text-anchor", "middle")
.attr("font-family", "calibri")
   .attr("font-size", "14px")
   .attr("fill", function(d) {
    return "rgb(64, 224, " + (d.rating * 50) + ")";})
 
 
var svg2 = d3.select("body")
            .append("svg")
            .attr("width", 800)
            .attr("height", 200)
 
svg2.selectAll("text")
.data(events)
.enter()
.append("text")
.text(names)
.attr("x", function(d, i) {
        return i * (w / events.length) + (w / events.length - barPadding) / 2})
.attr("text-anchor", "middle")
.attr("y", 60)
.attr("font-family", "arial")
   .attr("font-size", "10px")
   .attr("fill", function(d) {
    return "rgb(64, 224, " + (d.rating * 50) + ")";})
.style("writing-mode", "tb")
//.style("glyph-orientation-vertical", "1")