AST_Assignment_3_old

var chartTitle = '<h2>Events and ratings</h2>'
$('.main').append(chartTitle)
 
var events = [
{"name":"veniam ","rating":2,"ficticious":false},
{"name":"consequat ","rating":2,"ficticious":true},
{"name":"Excepteur reprehenderit ","rating":1,"ficticious":true},
{"name":"ea ","rating":2,"ficticious":false},
{"name":"sed ","rating":2,"ficticious":true},
{"name":"sunt Ut ","rating":3,"ficticious":true},
{"name":"magna adipisicing ","rating":3,"ficticious":true},
{"name":"amet ","rating":4,"ficticious":true},
{"name":"id et ","rating":5,"ficticious":false},
{"name":"ut ","rating":1,"ficticious":false},
{"name":"est veniam ","rating":5,"ficticious":true},
{"name":"enim magna ","rating":4,"ficticious":false},
{"name":"nostrud ","rating":5,"ficticious":false},
{"name":"non voluptate ","rating":1,"ficticious":true},
{"name":"laborum ","rating":2,"ficticious":false},
{"name":"incididunt ","rating":1,"ficticious":true},
{"name":"deserunt ","rating":5,"ficticious":false},
{"name":"eu ","rating":4,"ficticious":false},
{"name":"consectetur ","rating":2,"ficticious":false},
{"name":"magna id ","rating":3,"ficticious":true}
]
    
 
 
var w = 800;
var h = 100;
var barPadding = 1
var ratings = function(d) { return d.rating * 10};
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 * 10);})
.attr("width", 20)
.attr("height", ratings)
.attr("fill", function(d) {
    return "rgb(64, 224, " + (d.rating * 50) + ")";})
.on("mouseover", function() {
        d3.select(this)
          .attr("fill", "orange");})
.on("mouseout", function() {
        d3.select(this)
          .attr("fill", function(d) {
    return "rgb(64, 224, " + (d.rating * 50) + ")";})})
 
 
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) / 4;
   }).attr("y", function(d) {
        return h - (d.rating * 12);
   }).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) + 9;})
.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")
 
 
svg.selectAll("rect")
.filter(function (d, i) {
                    return d.ficticious == true;
                })
                .attr("stroke", 'black');