Portfolio assignment 03

Portfolio assignment 03

localStorage.getItem('assignment');   // <-- getting assignments from local storage
 
JSON.parse(localStorage.getItem('assignment'));   // <-- parsing data

//creating dataset
var eventsJSON = localStorage.getItem('assignment');
var events = JSON.parse(eventsJSON).events;
var data = events;

//creating w/h/padding

var w = 800 
var h = 300 
var barPadding = 5

//creating svg
var svg = d3.select('body')
  .append('svg')
  .attr('width', 400)
  .attr('height', 300);


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)


var bars = 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)

//ficticious/non-ficticious bars
bars.attr('fill', function(d){
    if(d.ficticious){
      return '#F8396C';
    }
    return '#F86239';
  });

//text
bars.append("title")
    .text(function(d) {
         return "Has a rating of " + d.rating;
});

//undertext

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", "#F86C39")
.style("writing-mode", "tb")

//mouseover/mouseout
   bars.on("mouseover", function() {
        d3.select(this)
          .attr("fill", "orange");
});

  bars.on("mouseout", function(d) {
        d3.select(this)
      .transition()
      .duration(250)
      .attr('fill', function(d){
    if(d.ficticious){
      return '#F8396C';
    }
    return '#F86239';
  });
});