Dashboard-in-Shiny-Apps/bar_plot.js at master · harsimran59/Dashboard-in-Shiny-Apps · GitHub

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
// !preview r2d3 data= data.frame(label = c("Austin Bergstrom Intl", "Chicago Ohare Intl", "Dallas Fort Worth Intl", "Eagle Co Rgnl", "Fort Lauderdale Hollywood Intl", "General Edward Lawrence Logan Intl"), y = c(365, 1455, 7257,  103,  182,  274), x = c("GPT", "GPT", "GPT","GPT","GPT","GPT"))

var layer_left      = 0.35;
    layer_left_text = 0.01;
    layer_top       = 0.1;
    layer_height    = 0.85;
    layer_width     = 0.55;

var col_left_text   = width * layer_left_text;

function svg_height() {return parseInt(svg.style('height'))}
function svg_width()  {return parseInt(svg.style('width'))}

function col_top()  {return svg_height() * layer_top; }
function col_left() {return svg_width()  * layer_left;}

function actual_max() {return d3.max(data, function (d) {return d.y; }); }
function col_width()  {return (svg_width() / actual_max()) * layer_width; }
function col_heigth() {return svg_height() / data.length * layer_height; }

var bars = svg.selectAll('rect').data(data);

bars.enter().append('rect')
    .attr('width', function(d) { return d.y * col_width(); })
    .attr('height',col_heigth() * 0.9)
    .attr('y', function(d, i) { return i * col_heigth() + col_top(); })
    .attr('x', col_left())
    .attr('fill', '#c4154f')
    .attr('opacity', function(d) { return d.y / (actual_max()*0.6 ); })
    .attr('tip', function(d) { return (d.y * col_width()) + col_left(); })
    .attr("d", function(d) { return d.x; })
    .on("click", function(){
      Shiny.setInputValue(
        "bar_clicked",
        d3.select(this).attr("d"),
        {priority: "event"}
      );
    })
    .on("mouseover", function(){
        d3.select(this)
          .attr('fill', '#ffb14e');
    })
    .on("mouseout", function(){
        d3.select(this)
          .attr('fill', '#c4154f');
    });

bars.exit().remove();

bars.transition()
  .duration(500)
    .attr('width', function(d) { return d.y * col_width(); })
    .attr('height',col_heigth() * 0.9)
    .attr('y', function(d, i) { return i * col_heigth() + col_top(); })
    .attr('x', col_left())
    .attr('opacity', function(d) { return d.y / (actual_max()*0.6 ); })
    .attr('tip', function(d) { return (d.y * col_width()) + col_left(); });

// Identity labels

var txt = svg.selectAll('text').data(data);

txt.enter().append('text')
      .attr('x', col_left_text)
      .attr('y', function(d, i) { return i * col_heigth() + (col_heigth() / 2) + col_top(); })
      .text(function(d) {return d.label; })
      .style('font-size', '14px')
      .style('font-weight', 'bold')
      .style('font-family', 'sans-serif');

txt.exit().remove();

txt.transition()
  .duration(1000)
      .attr('x', col_left_text)
      .attr('y', function(d, i) { return i * col_heigth() + (col_heigth() / 2) + col_top(); })
      .attr("d", function(d) { return d.x; })
      .style('font-size', '14px')
      .style('font-weight', 'bold')
      .style('font-family', 'sans-serif')
      .text(function(d) {return d.label; });

// Numeric labels

var totals = svg.selectAll().data(data);

totals.enter().append('text')
      .attr('x', function(d) { return ((d.y * col_width()) + col_left()) * 1.01; })
      .attr('y', function(d, i) { return i * col_heigth() + (col_heigth() / 2) + col_top(); })
      .style('font-size', '14px')
      .style('font-weight', 'bold')
      .style('font-family', 'sans-serif')
      .text(function(d) {return d.y; });

totals.exit().remove();

totals.transition()
  .duration(1000)
      .attr('x', function(d) { return ((d.y * col_width()) + col_left()) * 1.01; })
      .attr('y', function(d, i) { return i * col_heigth() + (col_heigth() / 2) + col_top(); })
      .attr("d", function(d) { return d.x; })
      .text(function(d) {return d.y; });

// Title

// svg.append('text')
//  .attr('x', svg_width() * 0.01)
//  .attr('y', svg_height() * 0.05)
//  .style('font-size', '18px')
//  .style('font-family', 'sans-serif')
//  .text('Top 10 Destination Airports');

// Sub-title

svg.append('text')
  .attr('x', svg_width() * 0.99)
  .attr('y', svg_height() * 0.05)
  .attr('text-anchor', 'end')
  .style('font-size', '16px')
  .style('font-family', 'sans-serif')
  .text('Click bar to zoom into monthly; click "ALL" on tab to reset!');