Download as
Browse Code »

Commit c7029956fac62b23f6c665b5e5b1292b79979454

Authored by Gustavo
1 parent a59f337d
Exists in master and in 2 other branches amadeus_univasf, refactoring

Included bulletin chart to the inside view and text adjustment

Showing 1 changed file with 1118 additions and 84 deletions   Show diff stats
bulletin/templates/bulletin/view.html
  Diff comments   View file @c702995
... ... @@ -5,8 +5,13 @@
5 5  
6 6 {% block javascript%}
7 7 {{ block.super }}
  8 + <script type="text/javascript" src="{% static 'js/d3.v3.min.js' %}"></script>
8 9 {% endblock%}
9 10  
  11 +{% block style %}
  12 +<link rel="stylesheet" href="{% static 'css/estilo.css' %}">
  13 +{% endblock %}
  14 +
10 15 {% block breadcrumbs %}
11 16 {{ block.super }}
12 17 {% breadcrumb topic 'subjects:topic_view' subject.slug topic.slug %}
... ... @@ -51,101 +56,1130 @@
51 56 </div>
52 57 <div id="{{subject.slug}}" class="panel-collapse in collapse category-panel-content">
53 58 {% autoescape off %}
54   - {{ bulletin.content }}
  59 + {{ bulletin.content }}
55 60 {% endautoescape %}
56 61  
57   - <hr />
  62 + <div style="padding-left: 0px;padding-right: 0px;">
  63 + <div align="left" style="font-size:22px; color: #878787; padding-top: 0px;">Confira as suas metas</div>
  64 + <hr style="height:2px; background-color:#878787; margin-top: 5px;">
  65 + <div class="row">
  66 + <div class="col-md-4">
  67 + <div style="font-size:16px; color: #000; padding-botom: 10px;"><b>Metas Atingidas</b></div>
  68 + <div id="donut_chart" align="center"></div>
  69 + </div>
58 70  
59   - <div class="row">
60   - <div class="col-md-12">
61   - <b><h5> {% trans "Check your goals" %}:</b></h5>
62   - <table class="table table-bordered">
63   - <thead>
64   - <tr>
65   - <th style="text-align:center;vertical-align:middle" colspan="1" rowspan="2">Meta</th>
66   - <th style="text-align:center;vertical-align:middle" colspan="1" rowspan="2">Média da Turma</th>
67   - <th style="text-align:center" colspan="3">Dados Individuais</th>
68   - </tr>
69   - <tr>
70   - <th style="text-align:center">Desejada</th>
71   - <th style="text-align:center">Estabelecida</th>
72   - <th style="text-align:center">Alcançada</th>
73   - </tr>
74   - </thead>
75   - <tbody>
76   - {% for meta in metas%}
77   - <tr>
78   - <td>{{ meta.description }}</td>
79   - <td style="text-align:center">{{ meta.media }}%</td>
80   - <td style="text-align:center">{{ meta.desejada }} %</td>
81   - <td style="text-align:center">{{ meta.estabelecida }} %</td>
82   -
83   - <!-- Cor amarela -->
84   - {% if meta.alcancada < meta.desejada and meta.alcancada > meta.estabelecida %}
85   - <td style="text-align:center;background-color:#f3ff00">{{ meta.alcancada }}%</td>
86   - {% endif %}
87   -
88   - {% if meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida %}
89   - <td style="text-align:center;background-color:#f3ff00">{{ meta.alcancada }}%</td>
90   -
91   - {% endif %}
92   - <!-- Cor amarela -->
93   -
94   -
95   - <!-- Cor verde -->
96   - {% if meta.alcancada > meta.desejada and meta.alcancada > meta.estabelecida %}
97   - <td style="text-align:center;background-color:#7bdc42">{{ meta.alcancada }}%</td>
98   - {% endif %}
99   - <!-- Cor verde -->
100   -
101   - <!-- Cor vermelha -->
102   - {% if meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %}
103   - <td style="text-align:center;background-color:#ff0000">{{ meta.alcancada }}%</td>
104   -
105   - {% endif %}
106   - <!-- Cor vermelha -->
107   -
108   - </tr>
109   -
110   - {% endfor %}
111   - </tbody>
112   - </table>
113   - </div>
  71 + <div class="col-md-8">
  72 + <div style="font-size:16px; text-align:left; color: #000; padding-left: 10px; "><b>Detalhamento das metas</b></div>
  73 + <hr style="height:2px; background-color:#878787;margin-top: 5px;margin-bottom: 5px;">
  74 + <table class="table table-hover">
  75 + <thead>
  76 + <tr>
  77 + <th style="text-align:center">Descrição</th>
  78 + <th style="width:150px; text-align:center">Recomendação </br> do(a) professor(a)</th>
  79 + <th style="text-align:center">Média da turma</th>
  80 + <th style="text-align:center">Sua meta</th>
  81 + <th style="text-align:center">Seu resultado</th>
  82 + </tr>
  83 + </thead>
  84 + <tbody>
  85 + {% for meta in metas%}
  86 + <tr>
  87 + <th style="font-weight: normal;">{{ meta.description }}</th>
  88 + <th style="text-align:center;font-weight: normal;">{{ meta.desejada }} %</th>
  89 + <td style="text-align:center;font-weight: normal;">{{ meta.media }}%</td>
  90 + <th style="text-align:center; font-weight: normal;">{{ meta.estabelecida }}%</th>
  91 +
  92 +
  93 + <!-- Cor amarela -->
  94 + {% if meta.alcancada < meta.desejada and meta.alcancada > meta.estabelecida %}
  95 + <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  96 + {% endif %}
  97 +
  98 + {% if meta.alcancada > meta.desejada and meta.alcancada < meta.estabelecida %}
  99 + <th style="text-align:center;background-color:#f8b800 ; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  100 +
  101 + {% endif %}
  102 + <!-- Cor amarela -->
  103 +
  104 + <!-- Cor verde -->
  105 + {% if meta.alcancada > meta.desejada and meta.alcancada > meta.estabelecida or meta.alcancada == 100 %}
  106 + <th style="text-align:center;background-color:#00d337; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  107 + {% endif %}
  108 + <!-- Cor verde -->
  109 +
  110 + <!-- Cor vermelha -->
  111 + {% if meta.alcancada < meta.desejada and meta.alcancada < meta.estabelecida %}
  112 + <th style="text-align:center;background-color:#ff0000; text-shadow: 1px 1px 10px #000; color:#fff; font-weight: normal;">{{ meta.alcancada }}%</th>
  113 +
  114 + {% endif %}
  115 + <!-- Cor vermelha -->
  116 +
  117 +
  118 + </tr>
  119 +
  120 + {% endfor %}
  121 +
  122 +
  123 + </tbody>
  124 + </table>
  125 + <hr style="height:1px; background-color:#878787;margin-top: -20px;">
  126 + </div>
  127 + </div>
  128 + </div>
  129 + <div style="padding-left: 0px;padding-right: 0px;">
  130 + <div align="left" style="font-size:22px; color: #878787; padding-top: 25px; ">Indicadores relevantes para o seu desempenho</div>
  131 + <hr style="height:2px; background-color:#878787; margin-top: 5px;">
  132 + <div class="row" style="padding-left: 15px;" >
  133 + <table >
  134 + <tr >
  135 + <td style="background-color:#002F4B; width: 20px;"></td>
  136 + <td style="padding-left: 5px;">Seu resultado</td>
  137 + <td style="width: 20px"></td>
  138 + <td style="background-color:#009688; width: 20px;"></td>
  139 + <td style="padding-left: 5px;">Nível acima da mediana dos aprovados</td>
  140 + <td style="width: 20px"></td>
  141 + <td style="background-color:#d0cebb; width: 20px;"></td>
  142 + <td style="padding-left: 5px;">Nível abaixo da mediana dos aprovados</td>
  143 + <td style="width: 30px"></td>
  144 + </tr>
  145 + </table>
114 146 </div>
115 147  
116   - <div class="row">
117   - <div class="col-md-8 col-md-offset-2 col-sm-8 col-sm-offset-2 alert-warning bulletin-warning">
118   - <div class="col-md-2 col-sm-2">
119   - <img src="{% static 'img/warning.png' %}" class="img-responsive" />
  148 + <div class="row" style="padding-left: 10px;">
  149 + <div class="col-md-7" >
  150 + <div class="row">
  151 + <div id="bullet_chart"> </div>
  152 + </div>
  153 + </div>
  154 + <div class="col-md-5">
  155 +
  156 + <div style="font-size:16px; text-align:left; color: #000; padding-left: 20px;padding-top: 30px; ">
  157 + <b>Descrição dos indicadores</b>
  158 + </div>
  159 +
  160 + <hr style="height:2px; background-color:#878787;margin-top: 5px;margin-bottom: -1px;">
  161 +
  162 + <table class="table table-hover">
  163 + <tbody>
  164 + {% for titulo in titulos %}
  165 + <tr>
  166 + <th style="width:110px;">
  167 + Indicador 0{{forloop.counter }}:
  168 + </th>
  169 + <th style="text-align:left; font-weight: normal; padding-left:0px;">
  170 + {{titulo}}
  171 + </th>
  172 + </tr>
  173 + {% endfor %}
  174 +
  175 + </tbody>
  176 + </table>
  177 + <hr style="height:1px; background-color:#878787;margin-top: -20px;">
  178 + </div>
  179 + </div>
  180 + </div>
  181 +
  182 + <div class="form-group" style="background-color:#fff; box-shadow: 1px 1px 25px #c0beaf; margin-top: 15px;">
  183 + <div class="row">
  184 + <div class="col-md-1" align="left" style="padding-left: 25px; padding-top: 10px;">
  185 + <img src="{% static 'img/warning.png' %}" height="80" width="95"/>
120 186 </div>
121   - <div class="col-md-10 col-sm-10">
122   - <h4>{% trans 'There are obstructions to your activities?' %}</h4>
123   - <p><a data-toggle="modal" data-target="#bulletin-difficulties-modal" href="">{% trans 'Click here' %}</a> {% trans 'to communicate the difficulties that may decrease your performance.' %}</p>
  187 + <div class="col-md-11">
  188 + <div class="row">
  189 + <div align="left" style="padding-left: 25px; font-size:22px; color: #878787; padding-top: 15px;padding-bottom: 20px;">{% trans 'There are obstructions to your activities?' %}</div>
  190 + <div align="left" style="padding-left: 25px; padding-right:35px; font-size:16px;"><p><a data-toggle="modal" data-target="#bulletin-difficulties-modal" href=""><b>{% trans 'Click here' %}</b></a> {% trans 'to communicate the difficulties that may decrease your performance.' %}</p></div>
  191 + </div>
124 192 </div>
125 193 </div>
126 194 </div>
127   - </div>
  195 + </br>
  196 + <div class="modal fade" tabindex="-1" role="dialog" id="bulletin-difficulties-modal">
  197 + <div class="modal-dialog" role="document">
  198 + <div class="modal-content">
  199 + <div class="modal-header">
  200 + <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
  201 + </div>
  202 + <div class="modal-body">
  203 + <form id="bulletin-difficulties" action="" method="POST" enctype="multipart/form-data">
  204 + {% csrf_token %}
  205 + <textarea class="form-control" id="dificulties" name="difficulties" placeholder="{% trans 'Type here the dificulties that may harm your performance' %}"></textarea>
  206 + </form>
  207 + </div>
  208 + <div class="modal-footer">
  209 + <button type="button" class="btn btn-default btn-raised" data-dismiss="modal">{% trans "Close" %}</button>
  210 + <button type="submit" class="btn btn-success btn-raised erase-button" form="bulletin-difficulties">{% trans "Send" %}</button>
  211 + </div>
  212 + </div>
  213 + </div>
128 214 </div>
129 215  
130   - <div class="modal fade" tabindex="-1" role="dialog" id="bulletin-difficulties-modal">
131   - <div class="modal-dialog" role="document">
132   - <div class="modal-content">
133   - <div class="modal-header">
134   - <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
135   - <h4 class="modal-title">{% trans 'Inform difficulties' %}</h4>
136   - </div>
137   - <div class="modal-body">
138   - <form id="bulletin-difficulties" action="" method="POST" enctype="multipart/form-data">
139   - {% csrf_token %}
140 216  
141   - <textarea class="form-control" id="dificulties" name="difficulties" placeholder="{% trans 'Type here the dificulties that may harm your performance' %}"></textarea>
142   - </form>
143   - </div>
144   - <div class="modal-footer">
145   - <button type="button" class="btn btn-default btn-raised" data-dismiss="modal">{% trans "Close" %}</button>
146   - <button type="submit" class="btn btn-success btn-raised erase-button" form="bulletin-difficulties">{% trans "Send" %}</button>
147   - </div>
148   - </div>
  217 + <script type="text/javascript">
  218 + // Variável obtidas a partir do número de metas atendidas
  219 + var percent = "{{ percent }}";
  220 +
  221 +
  222 +
  223 + // Script para a geração do gráfico de metas atingidas
  224 + var ratio=percent/100;
  225 + var pie = d3.layout.pie()
  226 + .value(function(d){return d})
  227 + .sort(null);
  228 + var w=200,h=200;
  229 + var outerRadius=(w/2)-10;
  230 + var innerRadius=70;
  231 + var color = ['#d0cebb','#002F4B'];
  232 + var arc=d3.svg.arc()
  233 + .innerRadius(innerRadius)
  234 + .outerRadius(outerRadius)
  235 + .startAngle(0)
  236 + .endAngle(2*Math.PI);
  237 + var arcLine=d3.svg.arc()
  238 + .innerRadius(innerRadius)
  239 + .outerRadius(outerRadius)
  240 + .cornerRadius(20)
  241 + .startAngle(-0.05);
  242 + var svg=d3.select("#donut_chart")
  243 + .append("svg")
  244 + .attr({
  245 + width:w,
  246 + height:h,
  247 + class:'shadow'
  248 + }).append('g')
  249 + .attr({
  250 + transform:'translate('+w/2+','+h/2+')'
  251 + });
  252 + var defs = svg.append("svg:defs");
  253 + var inset_shadow = defs.append("svg:filter")
  254 + .attr("id", "inset-shadow");
  255 + inset_shadow.append("svg:feOffset")
  256 + .attr({
  257 + dx:0,
  258 + dy:0
  259 + });
  260 + inset_shadow.append("svg:feGaussianBlur")
  261 + .attr({
  262 + stdDeviation:4,
  263 + result:'offset-blur'
  264 + });
  265 + inset_shadow.append("svg:feComposite")
  266 + .attr({
  267 + operator:'out',
  268 + in:'SourceGraphic',
  269 + in2:'offset-blur',
  270 + result:'inverse'
  271 + });
  272 + inset_shadow.append("svg:feFlood")
  273 + .attr({
  274 + 'flood-color':'black',
  275 + 'flood-opacity':.6,
  276 + result:'color'
  277 + });
  278 + inset_shadow.append("svg:feComposite")
  279 + .attr({
  280 + operator:'in',
  281 + in:'color',
  282 + in2:'inverse',
  283 + result:'shadow'
  284 + });
  285 + inset_shadow.append("svg:feComposite")
  286 + .attr({
  287 + operator:'over',
  288 + in:'shadow',
  289 + in2:'SourceGraphic'
  290 + });
  291 + var pathBackground=svg.append('path')
  292 + .attr({
  293 + d:arc
  294 + })
  295 + .style({
  296 + fill:color[0],
  297 + filter:'url(#inset-shadow)'
  298 + });
  299 + var pathForeground=svg.append('path')
  300 + .datum({endAngle:0})
  301 + .attr({
  302 + d:arcLine
  303 + })
  304 + .style({
  305 + fill:color[1],
  306 + filter:'url(#inset-shadow)'
  307 + });
  308 + var circle=svg.append('circle')
  309 + .attr({
  310 + cx:0,
  311 + cy:0,
  312 + r:innerRadius
  313 + })
  314 + .style({
  315 + fill:color[0],
  316 + 'fill-opacity':.1
  317 + });
  318 + var middleCount=svg.append('text')
  319 + .datum(0)
  320 + .text(function(d){
  321 + return d+'%';
  322 + })
  323 + .attr({
  324 + class:'middleText',
  325 + 'text-anchor':'middle',
  326 + dy:12
  327 + })
  328 + .style({
  329 + fill:d3.rgb(color[1]),
  330 + 'font-size':'50px',
  331 + filter:'url(#inset-shadow)'
  332 + });
  333 + var oldValue=0;
  334 + var arcTween=function(transition, newValue,oldValue) {
  335 + transition.attrTween("d", function (d) {
  336 + var interpolate = d3.interpolate(d.endAngle, ((2*Math.PI))*(newValue/100));
  337 + var interpolateCount = d3.interpolate(oldValue, newValue);
  338 + return function (t) {
  339 + d.endAngle = interpolate(t);
  340 + middleCount.text(Math.floor(interpolateCount(t))+'%');
  341 + return arcLine(d);
  342 + };
  343 + });
  344 + };
  345 + var animate=function(){
  346 + pathForeground.transition()
  347 + .duration(1500)
  348 + .ease('cubic')
  349 + .call(arcTween,percent,oldValue);
  350 + oldValue=percent;
  351 + };
  352 + setTimeout(animate,0);
  353 +
  354 + </script>
  355 +
  356 + <script type="text/javascript">
  357 + // Script para a geração do gráfico de indicadores relevantes
  358 + var mediana1 = parseFloat("{{medianas.0}}".replace(",","."))
  359 + var mediana2 = parseFloat("{{medianas.1}}".replace(",","."))
  360 + var mediana3 = parseFloat("{{medianas.2}}".replace(",","."))
  361 + var mediana4 = parseFloat("{{medianas.3}}".replace(",","."))
  362 + var mediana5 = parseFloat("{{medianas.4}}".replace(",","."))
  363 + var mediana6 = parseFloat("{{medianas.5}}".replace(",","."))
  364 +
  365 + var maximo1 = parseFloat("{{maximos.0}}".replace(",","."))
  366 + var maximo2 = parseFloat("{{maximos.1}}".replace(",","."))
  367 + var maximo3 = parseFloat("{{maximos.2}}".replace(",","."))
  368 + var maximo4 = parseFloat("{{maximos.3}}".replace(",","."))
  369 + var maximo5 = parseFloat("{{maximos.4}}".replace(",","."))
  370 + var maximo6 = parseFloat("{{maximos.5}}".replace(",","."))
  371 +
  372 + var resultado1 = parseFloat("{{resultados.0}}".replace(",","."))
  373 + var resultado2 = parseFloat("{{resultados.1}}".replace(",","."))
  374 + var resultado3 = parseFloat("{{resultados.2}}".replace(",","."))
  375 + var resultado4 = parseFloat("{{resultados.3}}".replace(",","."))
  376 + var resultado5 = parseFloat("{{resultados.4}}".replace(",","."))
  377 + var resultado6 = parseFloat("{{resultados.5}}".replace(",","."))
  378 +
  379 +
  380 + // Variável com os dados obtidos da planilha carregada com os dados dos indicadores
  381 + var dataset = [
  382 + {valor: resultado1, mediana: mediana1, maximo: maximo1},
  383 + {valor: resultado2, mediana: mediana2, maximo: maximo2},
  384 + {valor: resultado3, mediana: mediana3, maximo: maximo3},
  385 + {valor: resultado4, mediana: mediana4, maximo: maximo4},
  386 + {valor: resultado5, mediana: mediana5, maximo: maximo5},
  387 + {valor: resultado6, mediana: mediana6, maximo: maximo6}
  388 + ];
  389 +
  390 + // Script para a geração do gráfico de indicadores relevantes
  391 +
  392 + var ind01 = [{valor: dataset[0].valor, mediana: dataset[0].mediana, maximo: dataset[0].maximo}];
  393 + var ind02 = [{valor: dataset[1].valor, mediana: dataset[1].mediana, maximo: dataset[1].maximo}];
  394 + var ind03 = [{valor: dataset[2].valor, mediana: dataset[2].mediana, maximo: dataset[2].maximo}];
  395 + var ind04 = [{valor: dataset[3].valor, mediana: dataset[3].mediana, maximo: dataset[3].maximo}];
  396 + var ind05 = [{valor: dataset[4].valor, mediana: dataset[4].mediana, maximo: dataset[4].maximo}];
  397 + var ind06 = [{valor: dataset[5].valor, mediana: dataset[5].mediana, maximo: dataset[5].maximo}];
  398 +
  399 + // Variáveis de largura e altura da área de desenho do SVG
  400 + var w = 110;
  401 + var h = 350;
  402 +
  403 + // Margens
  404 + var margin = {top: 40,bottom: 40,left: 40,right: 10};
  405 +
  406 + // Definindo a área em que o gráfico será construído dentro da área de desenho
  407 + var width = w - margin.left - margin.right;
  408 + var height = h - margin.top - margin.bottom;
  409 +
  410 + // Definindo x1 com escala ordinal
  411 + var x = d3.scale.ordinal().domain(ind01.map(function(entry){return "Indicador 01";})).rangeBands([0, width]);
  412 + var x2 = d3.scale.ordinal().domain(ind02.map(function(entry){return "Indicador 02";})).rangeBands([0, width]);
  413 + var x3 = d3.scale.ordinal().domain(ind03.map(function(entry){return "Indicador 03";})).rangeBands([0, width]);
  414 + var x4 = d3.scale.ordinal().domain(ind04.map(function(entry){return "Indicador 04";})).rangeBands([0, width]);
  415 + var x5 = d3.scale.ordinal().domain(ind05.map(function(entry){return "Indicador 05";})).rangeBands([0, width]);
  416 + var x6 = d3.scale.ordinal().domain(ind06.map(function(entry){return "Indicador 06";})).rangeBands([0, width]);
  417 +
  418 + // Definindo y com escala linear
  419 + var y = d3.scale.linear().domain([0, d3.max(ind01, function(d){return d.maximo;})]).range([height, 0]);
  420 + var y2 = d3.scale.linear().domain([0, d3.max(ind02, function(d){return d.maximo;})]).range([height, 0]);
  421 + var y3 = d3.scale.linear().domain([0, d3.max(ind03, function(d){return d.maximo;})]).range([height, 0]);
  422 + var y4 = d3.scale.linear().domain([0, d3.max(ind04, function(d){return d.maximo;})]).range([height, 0]);
  423 + var y5 = d3.scale.linear().domain([0, d3.max(ind05, function(d){return d.maximo;})]).range([height, 0]);
  424 + var y6 = d3.scale.linear().domain([0, d3.max(ind06, function(d){return d.maximo;})]).range([height, 0]);
  425 +
  426 + // Desenhando o eixo x
  427 + var xAxis = d3.svg.axis().scale(x).orient("bottom");
  428 + var xAxis2 = d3.svg.axis().scale(x2).orient("bottom");
  429 + var xAxis3 = d3.svg.axis().scale(x3).orient("bottom");
  430 + var xAxis4 = d3.svg.axis().scale(x4).orient("bottom");
  431 + var xAxis5 = d3.svg.axis().scale(x5).orient("bottom");
  432 + var xAxis6 = d3.svg.axis().scale(x6).orient("bottom");
  433 +
  434 + // Desenhando o eixo y
  435 + var yAxis = d3.svg.axis().scale(y).orient("left");
  436 + var yAxis2 = d3.svg.axis().scale(y2).orient("left");
  437 + var yAxis3 = d3.svg.axis().scale(y3).orient("left");
  438 + var yAxis4 = d3.svg.axis().scale(y4).orient("left");
  439 + var yAxis5 = d3.svg.axis().scale(y5).orient("left");
  440 + var yAxis6 = d3.svg.axis().scale(y6).orient("left");
  441 +
  442 + // Definindo linhas de grid
  443 + var yGridlines = d3.svg.axis()
  444 + .scale(y)
  445 + .tickSize(-width,0,0)
  446 + .tickFormat("")
  447 + .orient("left");
  448 +
  449 +
  450 + // Definindo o objeto SVG
  451 + var svg = d3.select("#bullet_chart").append("svg").attr("id", "bullet_chart1").attr("width", 6*w).attr("height", h);
  452 +
  453 + // Definindo um objeto SVG agrupado
  454 + var bullet_chart = svg.append("g").classed("display", true).attr("transform", "translate(" + margin.left + "," + margin.top + ")");
  455 + var bullet_chart2 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+w) + "," + margin.top + ")");
  456 + var bullet_chart3 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+2*w) + "," + margin.top + ")");
  457 + var bullet_chart4 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+3*w) + "," + margin.top + ")");
  458 + var bullet_chart5 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+4*w) + "," + margin.top + ")");
  459 + var bullet_chart6 = svg.append("g").classed("display", true).attr("transform", "translate(" + (margin.left+5*w) + "," + margin.top + ")");
  460 +
  461 + // Definindo o objeto tooltip
  462 + var tooltip = d3.select("body").append("div").attr("class", "toolTip");
  463 +
  464 +
  465 + // Função que desenha o gráfico 1
  466 + function plot1(params){
  467 + this.append("g")
  468 + .call(params.gridlines)
  469 + .classed("gridline", true)
  470 + .attr("transform", "translate(0,0)")
  471 +
  472 + // Interartividade ao passar o mouse pelas barras
  473 + this.selectAll(".maximo")
  474 + .data(params.data)
  475 + .enter()
  476 + .append("rect")
  477 + .attr('fill', '#009688')
  478 + .on("mouseout", function(d,i){
  479 + tooltip.style("display", "none");
  480 + })
  481 +
  482 + .on("mousemove", function(d){
  483 + tooltip
  484 + .style("left", d3.event.pageX - 80 + "px")
  485 + .style("top", d3.event.pageY - 110 + "px")
  486 + .style("display", "inline-block")
  487 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  488 + + "Máximo: " + (d.maximo)
  489 + + "<br>" + "Mediana: " + (d.mediana));
  490 + })
  491 + .attr("y", function(d,i){
  492 + return y(d.maximo);
  493 + })
  494 + .attr("height", function(d,i){
  495 + return height - y(d.maximo-d.mediana);
  496 + })
  497 + .attr("width", function(d){
  498 + return x.rangeBand();
  499 + })
  500 +
  501 + this.selectAll(".mediana")
  502 + .data(params.data)
  503 + .enter()
  504 + .append("rect")
  505 + .attr('fill', '#d0cebb')
  506 + .on("mouseout", function(d,i){
  507 + tooltip.style("display", "none");
  508 + })
  509 +
  510 + .on("mousemove", function(d){
  511 + tooltip
  512 + .style("left", d3.event.pageX - 80 + "px")
  513 + .style("top", d3.event.pageY - 110 + "px")
  514 + .style("display", "inline-block")
  515 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  516 + + "Máximo: " + (d.maximo)
  517 + + "<br>" + "Mediana: " + (d.mediana));
  518 + })
  519 + .attr("y", function(d,i){
  520 + return y(d.mediana);
  521 + })
  522 + .attr("height", function(d,i){
  523 + return height - y(d.mediana);
  524 + })
  525 + .attr("width", function(d){
  526 + return x.rangeBand();
  527 + })
  528 +
  529 + this.selectAll(".valor")
  530 + .data(params.data)
  531 + .enter()
  532 + .append("rect")
  533 + .attr('fill', "#002f4b")
  534 + .on("mouseover", function(d,i){
  535 + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)');
  536 + })
  537 + .on("mouseout", function(d,i){
  538 + d3.select(this).style("fill", "#002f4b");
  539 + tooltip.style("display", "none");
  540 + })
  541 +
  542 + .on("mousemove", function(d){
  543 + tooltip
  544 + .style("left", d3.event.pageX - 80 + "px")
  545 + .style("top", d3.event.pageY - 110 + "px")
  546 + .style("display", "inline-block")
  547 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  548 + + "Máximo: " + (d.maximo)
  549 + + "<br>" + "Mediana: " + (d.mediana));
  550 + })
  551 + .attr("x", 20)
  552 + .attr("width", function(d){
  553 + return x.rangeBand()-40;
  554 + })
  555 + .attr("height",function(d,i) {return y(d.maximo);})
  556 + .attr("y", function(d,i) {return height - y(d.maximo);})
  557 + .transition()
  558 + .duration(2000)
  559 + .attr("height", function(d,i) {return height - y(d.valor);})
  560 + .attr("y",function(d,i) {return y(d.valor);})
  561 +
  562 + // Eixo x
  563 + this.append("g")
  564 + .classed("x axis", true)
  565 + .attr("transform", "translate(" + 0 + "," + height + ")")
  566 + .call(params.axis.x)
  567 + .selectAll("text")
  568 + .style("text-anchor", "end")
  569 + .attr("dx", 40)
  570 + .attr("dy", 15)
  571 + .attr("transform", "translate(0,0) rotate(0)");
  572 +
  573 + // Eixo y
  574 + this.append("g")
  575 + .classed("y axis", true)
  576 + .attr("transform", "translate(0,0)")
  577 + .call(params.axis.y);
  578 + }
  579 +
  580 + // Função que desenha o gráfico 2
  581 + function plot2(params){
  582 + this.append("g")
  583 + .call(params.gridlines)
  584 + .classed("gridline", true)
  585 + .attr("transform", "translate(0,0)")
  586 +
  587 + // Interartividade ao passar o mouse pelas barras
  588 + this.selectAll(".maximo")
  589 + .data(params.data)
  590 + .enter()
  591 + .append("rect")
  592 + .attr('fill', '#009688')
  593 + .on("mouseout", function(d,i){
  594 + tooltip.style("display", "none");
  595 + })
  596 +
  597 + .on("mousemove", function(d){
  598 + tooltip
  599 + .style("left", d3.event.pageX - 80 + "px")
  600 + .style("top", d3.event.pageY - 110 + "px")
  601 + .style("display", "inline-block")
  602 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  603 + + "Máximo: " + (d.maximo)
  604 + + "<br>" + "Mediana: " + (d.mediana));
  605 + })
  606 + .attr("y2", function(d,i){
  607 + return y2(d.maximo);
  608 + })
  609 + .attr("height", function(d,i){
  610 + return height - y2(d.maximo-d.mediana);
  611 + })
  612 + .attr("width", function(d){
  613 + return x2.rangeBand();
  614 +
  615 + })
  616 +
  617 + this.selectAll(".mediana")
  618 + .data(params.data)
  619 + .enter()
  620 + .append("rect")
  621 + .attr('fill', '#d0cebb')
  622 + .on("mouseout", function(d,i){
  623 + tooltip.style("display", "none");
  624 + })
  625 + .on("mousemove", function(d){
  626 + tooltip
  627 + .style("left", d3.event.pageX - 80 + "px")
  628 + .style("top", d3.event.pageY - 110 + "px")
  629 + .style("display", "inline-block")
  630 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  631 + + "Máximo: " + (d.maximo)
  632 + + "<br>" + "Mediana: " + (d.mediana));
  633 + })
  634 + .attr("y", function(d,i){
  635 + return y2(d.mediana);
  636 + })
  637 + .attr("height", function(d,i){
  638 + return height - y2(d.mediana);
  639 + })
  640 + .attr("width", function(d){
  641 + return x2.rangeBand();
  642 + })
  643 +
  644 + this.selectAll(".valor")
  645 + .data(params.data)
  646 + .enter()
  647 + .append("rect")
  648 + .attr('fill', "#002f4b")
  649 + .on("mouseover", function(d,i){
  650 + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)');
  651 + })
  652 + .on("mouseout", function(d,i){
  653 + d3.select(this).style("fill", "#002f4b");
  654 + tooltip.style("display", "none");
  655 + })
  656 + .on("mousemove", function(d){
  657 + tooltip
  658 + .style("left", d3.event.pageX - 80 + "px")
  659 + .style("top", d3.event.pageY - 110 + "px")
  660 + .style("display", "inline-block")
  661 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  662 + + "Máximo: " + (d.maximo)
  663 + + "<br>" + "Mediana: " + (d.mediana));
  664 + })
  665 + .attr("x", 20)
  666 + .attr("width", function(d){
  667 + return x2.rangeBand()-40;
  668 + })
  669 + .attr("height",function(d,i) {return y2(d.maximo);})
  670 + .attr("y", function(d,i) {return height - y2(d.maximo);})
  671 + .transition()
  672 + .duration(2000)
  673 + .attr("height", function(d,i) {return height - y2(d.valor);})
  674 + .attr("y",function(d,i) {return y2(d.valor);})
  675 + // Eixo x
  676 + this.append("g")
  677 + .classed("x2 axis", true)
  678 + .attr("transform", "translate(" + 0 + "," + height + ")")
  679 + .call(params.axis.x)
  680 + .selectAll("text")
  681 + .style("text-anchor", "end")
  682 + .attr("dx", 40)
  683 + .attr("dy", 15)
  684 + .attr("transform", "translate(0,0) rotate(0)");
  685 +
  686 + // Eixo y
  687 + this.append("g")
  688 + .classed("y2 axis", true)
  689 + .attr("transform", "translate(0,0)")
  690 + .call(params.axis.y);
  691 + }
  692 +
  693 +
  694 + // Função que desenha o gráfico 3
  695 + function plot3(params){
  696 + this.append("g")
  697 + .call(params.gridlines)
  698 + .classed("gridline", true)
  699 + .attr("transform", "translate(0,0)")
  700 +
  701 + // Interartividade ao passar o mouse pelas barras
  702 + this.selectAll(".bar")
  703 + .data(params.data)
  704 + .enter()
  705 + .append("rect")
  706 + .attr('fill', '#009688')
  707 + .on("mouseout", function(d,i){
  708 + tooltip.style("display", "none");
  709 + })
  710 + .on("mousemove", function(d){
  711 + tooltip
  712 + .style("left", d3.event.pageX - 80 + "px")
  713 + .style("top", d3.event.pageY - 110 + "px")
  714 + .style("display", "inline-block")
  715 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  716 + + "Máximo: " + (d.maximo)
  717 + + "<br>" + "Mediana: " + (d.mediana));
  718 + })
  719 + .attr("y", function(d,i){
  720 + return y3(d.maximo);
  721 + })
  722 + .attr("height", function(d,i){
  723 + return height - y3(d.maximo-d.mediana);
  724 + })
  725 + .attr("width", function(d){
  726 + return x3.rangeBand();
  727 + })
  728 +
  729 + this.selectAll(".mediana")
  730 + .data(params.data)
  731 + .enter()
  732 + .append("rect")
  733 + .attr('fill', '#d0cebb')
  734 + .on("mouseout", function(d,i){
  735 + tooltip.style("display", "none");
  736 + })
  737 + .on("mousemove", function(d){
  738 + tooltip
  739 + .style("left", d3.event.pageX - 80 + "px")
  740 + .style("top", d3.event.pageY - 110 + "px")
  741 + .style("display", "inline-block")
  742 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  743 + + "Máximo: " + (d.maximo)
  744 + + "<br>" + "Mediana: " + (d.mediana));
  745 + })
  746 + .attr("y", function(d,i){
  747 + return y3(d.mediana);
  748 + })
  749 + .attr("height", function(d,i){
  750 + return height - y3(d.mediana);
  751 + })
  752 + .attr("width", function(d){
  753 + return x3.rangeBand();
  754 + })
  755 +
  756 + this.selectAll(".valor")
  757 + .data(params.data)
  758 + .enter()
  759 + .append("rect")
  760 + .attr('fill', "#002f4b")
  761 + .on("mouseover", function(d,i){
  762 + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)');
  763 + })
  764 + .on("mouseout", function(d,i){
  765 + d3.select(this).style("fill", "#002f4b");
  766 + tooltip.style("display", "none");
  767 + })
  768 + .on("mousemove", function(d){
  769 + tooltip
  770 + .style("left", d3.event.pageX - 80 + "px")
  771 + .style("top", d3.event.pageY - 110 + "px")
  772 + .style("display", "inline-block")
  773 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  774 + + "Máximo: " + (d.maximo)
  775 + + "<br>" + "Mediana: " + (d.mediana));
  776 + })
  777 +
  778 + .attr("x", 20)
  779 + .attr("width", function(d){
  780 + return x3.rangeBand()-40;
  781 + })
  782 + .attr("height",function(d,i) {return y3(d.maximo);})
  783 + .attr("y", function(d,i) {return height - y3(d.maximo);})
  784 + .transition()
  785 + .duration(2000)
  786 + .attr("height", function(d,i) {return height - y3(d.valor);})
  787 + .attr("y",function(d,i) {return y3(d.valor);})
  788 +
  789 + // Eixo x
  790 + this.append("g")
  791 + .classed("x3 axis", true)
  792 + .attr("transform", "translate(" + 0 + "," + height + ")")
  793 + .call(params.axis.x)
  794 + .selectAll("text")
  795 + .style("text-anchor", "end")
  796 + .attr("dx", 40)
  797 + .attr("dy", 15)
  798 + .attr("transform", "translate(0,0) rotate(0)");
  799 +
  800 + // Eixo y
  801 + this.append("g")
  802 + .classed("y3 axis", true)
  803 + .attr("transform", "translate(0,0)")
  804 + .call(params.axis.y);
  805 + }
  806 +
  807 + // Função que desenha o gráfico 4
  808 + function plot4(params){
  809 + this.append("g")
  810 + .call(params.gridlines)
  811 + .classed("gridline", true)
  812 + .attr("transform", "translate(0,0)")
  813 +
  814 + // Interartividade ao passar o mouse pelas barras
  815 + this.selectAll(".bar")
  816 + .data(params.data)
  817 + .enter()
  818 + .append("rect")
  819 + .attr('fill', '#009688')
  820 + .on("mouseout", function(d,i){
  821 + tooltip.style("display", "none");
  822 + })
  823 + .on("mousemove", function(d){
  824 + tooltip
  825 + .style("left", d3.event.pageX - 80 + "px")
  826 + .style("top", d3.event.pageY - 110 + "px")
  827 + .style("display", "inline-block")
  828 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  829 + + "Máximo: " + (d.maximo)
  830 + + "<br>" + "Mediana: " + (d.mediana));
  831 + })
  832 + .attr("y", function(d,i){
  833 + return y4(d.maximo);
  834 + })
  835 + .attr("height", function(d,i){
  836 + return height - y4(d.maximo-d.mediana);
  837 + })
  838 + .attr("width", function(d){
  839 + return x4.rangeBand();
  840 + })
  841 +
  842 + this.selectAll(".mediana")
  843 + .data(params.data)
  844 + .enter()
  845 + .append("rect")
  846 + .attr('fill', '#d0cebb')
  847 + .on("mouseout", function(d,i){
  848 + tooltip.style("display", "none");
  849 + })
  850 + .on("mousemove", function(d){
  851 + tooltip
  852 + .style("left", d3.event.pageX - 80 + "px")
  853 + .style("top", d3.event.pageY - 110 + "px")
  854 + .style("display", "inline-block")
  855 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  856 + + "Máximo: " + (d.maximo)
  857 + + "<br>" + "Mediana: " + (d.mediana));
  858 + })
  859 + .attr("y", function(d,i){
  860 + return y4(d.mediana);
  861 + })
  862 + .attr("height", function(d,i){
  863 + return height - y4(d.mediana);
  864 + })
  865 + .attr("width", function(d){
  866 + return x4.rangeBand();
  867 + })
  868 +
  869 + this.selectAll(".valor")
  870 + .data(params.data)
  871 + .enter()
  872 + .append("rect")
  873 + .attr('fill', "#002f4b")
  874 + .on("mouseover", function(d,i){
  875 + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)');
  876 + })
  877 + .on("mouseout", function(d,i){
  878 + d3.select(this).style("fill", "#002f4b");
  879 + tooltip.style("display", "none");
  880 + })
  881 +
  882 + .on("mousemove", function(d){
  883 + tooltip
  884 + .style("left", d3.event.pageX - 80 + "px")
  885 + .style("top", d3.event.pageY - 110 + "px")
  886 + .style("display", "inline-block")
  887 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  888 + + "Máximo: " + (d.maximo)
  889 + + "<br>" + "Mediana: " + (d.mediana));
  890 + })
  891 +
  892 + .attr("x", 20)
  893 + .attr("width", function(d){
  894 + return x4.rangeBand()-40;
  895 + })
  896 + .attr("height",function(d,i) {return y4(d.maximo);})
  897 + .attr("y", function(d,i) {return height - y4(d.maximo);})
  898 + .transition()
  899 + .duration(2000)
  900 + .attr("height", function(d,i) {return height - y4(d.valor);})
  901 + .attr("y",function(d,i) {return y4(d.valor);})
  902 +
  903 + // Eixo x
  904 + this.append("g")
  905 + .classed("x4 axis", true)
  906 + .attr("transform", "translate(" + 0 + "," + height + ")")
  907 + .call(params.axis.x)
  908 + .selectAll("text")
  909 + .style("text-anchor", "end")
  910 + .attr("dx", 40)
  911 + .attr("dy", 15)
  912 + .attr("transform", "translate(0,0) rotate(0)");
  913 +
  914 + // Eixo y
  915 + this.append("g")
  916 + .classed("y4 axis", true)
  917 + .attr("transform", "translate(0,0)")
  918 + .call(params.axis.y);
  919 + }
  920 +
  921 +
  922 + // Função que desenha o gráfico 5
  923 + function plot5(params){
  924 + this.append("g")
  925 + .call(params.gridlines)
  926 + .classed("gridline", true)
  927 + .attr("transform", "translate(0,0)")
  928 +
  929 + // Interartividade ao passar o mouse pelas barras
  930 + this.selectAll(".maximo")
  931 + .data(params.data)
  932 + .enter()
  933 + .append("rect")
  934 + .attr('fill', '#009688')
  935 + .on("mouseout", function(d,i){
  936 + tooltip.style("display", "none");
  937 + })
  938 +
  939 + .on("mousemove", function(d){
  940 + tooltip
  941 + .style("left", d3.event.pageX - 80 + "px")
  942 + .style("top", d3.event.pageY - 110 + "px")
  943 + .style("display", "inline-block")
  944 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  945 + + "Máximo: " + (d.maximo)
  946 + + "<br>" + "Mediana: " + (d.mediana));
  947 + })
  948 + .attr("y5", function(d,i){
  949 + return y5(d.maximo);
  950 + })
  951 + .attr("height", function(d,i){
  952 + return height - y5(d.maximo-d.mediana);
  953 + })
  954 + .attr("width", function(d){
  955 + return x5.rangeBand();
  956 + })
  957 +
  958 + this.selectAll(".mediana")
  959 + .data(params.data)
  960 + .enter()
  961 + .append("rect")
  962 + .attr('fill', '#d0cebb')
  963 + .on("mouseout", function(d,i){
  964 + tooltip.style("display", "none");
  965 + })
  966 + .on("mousemove", function(d){
  967 + tooltip
  968 + .style("left", d3.event.pageX - 80 + "px")
  969 + .style("top", d3.event.pageY - 110 + "px")
  970 + .style("display", "inline-block")
  971 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  972 + + "Máximo: " + (d.maximo)
  973 + + "<br>" + "Mediana: " + (d.mediana));
  974 + })
  975 +
  976 + .attr("y", function(d,i){
  977 + return y5(d.mediana);
  978 + })
  979 + .attr("height", function(d,i){
  980 + return height - y5(d.mediana);
  981 + })
  982 + .attr("width", function(d){
  983 + return x5.rangeBand();
  984 + })
  985 +
  986 + this.selectAll(".valor")
  987 + .data(params.data)
  988 + .enter()
  989 + .append("rect")
  990 + .attr('fill', "#002f4b")
  991 + .on("mouseover", function(d,i){
  992 + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)');
  993 + })
  994 + .on("mouseout", function(d,i){
  995 + d3.select(this).style("fill", "#002f4b");
  996 + tooltip.style("display", "none");
  997 + })
  998 + .on("mousemove", function(d){
  999 + tooltip
  1000 + .style("left", d3.event.pageX - 80 + "px")
  1001 + .style("top", d3.event.pageY - 110 + "px")
  1002 + .style("display", "inline-block")
  1003 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  1004 + + "Máximo: " + (d.maximo)
  1005 + + "<br>" + "Mediana: " + (d.mediana));
  1006 + })
  1007 +
  1008 + .attr("x", 20)
  1009 + .attr("width", function(d){
  1010 + return x5.rangeBand()-40;
  1011 + })
  1012 + .attr("height",function(d,i) {return y5(d.maximo);})
  1013 + .attr("y", function(d,i) {return height - y5(d.maximo);})
  1014 + .transition()
  1015 + .duration(2000)
  1016 + .attr("height", function(d,i) {return height - y5(d.valor);})
  1017 + .attr("y",function(d,i) {return y5(d.valor);})
  1018 +
  1019 + // Eixo x
  1020 + this.append("g")
  1021 + .classed("x5 axis", true)
  1022 + .attr("transform", "translate(" + 0 + "," + height + ")")
  1023 + .call(params.axis.x)
  1024 + .selectAll("text")
  1025 + .style("text-anchor", "end")
  1026 + .attr("dx", 40)
  1027 + .attr("dy", 15)
  1028 + .attr("transform", "translate(0,0) rotate(0)");
  1029 +
  1030 + // Eixo y
  1031 + this.append("g")
  1032 + .classed("y5 axis", true)
  1033 + .attr("transform", "translate(0,0)")
  1034 + .call(params.axis.y);
  1035 + }
  1036 +
  1037 +
  1038 + // Função que desenha o gráfico 6
  1039 + function plot6(params){
  1040 + this.append("g")
  1041 + .call(params.gridlines)
  1042 + .classed("gridline", true)
  1043 + .attr("transform", "translate(0,0)")
  1044 +
  1045 + // Interartividade ao passar o mouse pelas barras
  1046 + this.selectAll(".bar")
  1047 + .data(params.data)
  1048 + .enter()
  1049 + .append("rect")
  1050 + .attr('fill', '#009688')
  1051 + .on("mouseout", function(d,i){
  1052 + tooltip.style("display", "none");
  1053 + })
  1054 + .on("mousemove", function(d){
  1055 + tooltip
  1056 + .style("left", d3.event.pageX - 80 + "px")
  1057 + .style("top", d3.event.pageY - 110 + "px")
  1058 + .style("display", "inline-block")
  1059 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  1060 + + "Máximo: " + (d.maximo)
  1061 + + "<br>" + "Mediana: " + (d.mediana));
  1062 + })
  1063 + .attr("y", function(d,i){
  1064 + return y6(d.maximo);
  1065 + })
  1066 + .attr("height", function(d,i){
  1067 + return height - y6(d.maximo-d.mediana);
  1068 + })
  1069 + .attr("width", function(d){
  1070 + return x4.rangeBand();
  1071 + })
  1072 +
  1073 + this.selectAll(".mediana")
  1074 + .data(params.data)
  1075 + .enter()
  1076 + .append("rect")
  1077 + .attr('fill', '#d0cebb')
  1078 + .on("mouseout", function(d,i){
  1079 + tooltip.style("display", "none");
  1080 + })
  1081 + .on("mousemove", function(d){
  1082 + tooltip
  1083 + .style("left", d3.event.pageX - 80 + "px")
  1084 + .style("top", d3.event.pageY - 110 + "px")
  1085 + .style("display", "inline-block")
  1086 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  1087 + + "Máximo: " + (d.maximo)
  1088 + + "<br>" + "Mediana: " + (d.mediana));
  1089 + })
  1090 + .attr("y", function(d,i){
  1091 + return y6(d.mediana);
  1092 + })
  1093 + .attr("height", function(d,i){
  1094 + return height - y6(d.mediana);
  1095 + })
  1096 + .attr("width", function(d){
  1097 + return x6.rangeBand();
  1098 + })
  1099 +
  1100 + this.selectAll(".valor")
  1101 + .data(params.data)
  1102 + .enter()
  1103 + .append("rect")
  1104 + .attr('fill', "#002f4b")
  1105 + .on("mouseover", function(d,i){
  1106 + d3.select(this).style("fill", 'rgba(0, 0, 0, 0.5)');
  1107 + })
  1108 + .on("mouseout", function(d,i){
  1109 + d3.select(this).style("fill", "#002f4b");
  1110 + tooltip.style("display", "none");
  1111 + })
  1112 + .on("mousemove", function(d){
  1113 + tooltip
  1114 + .style("left", d3.event.pageX - 80 + "px")
  1115 + .style("top", d3.event.pageY - 110 + "px")
  1116 + .style("display", "inline-block")
  1117 + .html("<b>Seu resultado: </b>"+ "<b>" + (d.valor) + "</b>" + "<br>" + "<br>"
  1118 + + "Máximo: " + (d.maximo)
  1119 + + "<br>" + "Mediana: " + (d.mediana));
  1120 + })
  1121 +
  1122 + .attr("x", 20 )
  1123 + .attr("width", function(d){
  1124 + return x6.rangeBand()-40;
  1125 + })
  1126 + .attr("height",function(d,i) {return y6(d.maximo);})
  1127 + .attr("y", function(d,i) {return height - y6(d.maximo);})
  1128 + .transition()
  1129 + .duration(2000)
  1130 + .attr("height", function(d,i) {return height - y6(d.valor);})
  1131 + .attr("y",function(d,i) {return y6(d.valor);})
  1132 +
  1133 + // Eixo x
  1134 + this.append("g")
  1135 + .classed("x6 axis", true)
  1136 + .attr("transform", "translate(" + 0 + "," + height + ")")
  1137 + .call(params.axis.x)
  1138 + .selectAll("text")
  1139 + .style("text-anchor", "end")
  1140 + .attr("dx", 40)
  1141 + .attr("dy", 15)
  1142 + .attr("transform", "translate(0,0) rotate(0)");
  1143 +
  1144 + // Eixo y
  1145 + this.append("g")
  1146 + .classed("y6 axis", true)
  1147 + .attr("transform", "translate(0,0)")
  1148 + .call(params.axis.y);
  1149 + }
  1150 +
  1151 + // Chamada às funções
  1152 +
  1153 + plot1.call(bullet_chart, {
  1154 + data: ind01,
  1155 + axis:{x: xAxis,y: yAxis},
  1156 + gridlines: yGridlines});
  1157 +
  1158 + plot2.call(bullet_chart2, {
  1159 + data: ind02,
  1160 + axis:{x: xAxis2,y: yAxis2},
  1161 + gridlines: yGridlines});
  1162 +
  1163 + plot3.call(bullet_chart3, {
  1164 + data: ind03,
  1165 + axis:{x: xAxis3,y: yAxis3},
  1166 + gridlines: yGridlines});
  1167 +
  1168 + plot4.call(bullet_chart4, {
  1169 + data: ind04,
  1170 + axis:{x: xAxis4,y: yAxis4},
  1171 + gridlines: yGridlines});
  1172 +
  1173 + plot5.call(bullet_chart5, {
  1174 + data: ind05,
  1175 + axis:{x: xAxis5,y: yAxis5},
  1176 + gridlines: yGridlines});
  1177 +
  1178 + plot6.call(bullet_chart6, {
  1179 + data: ind06,
  1180 + axis:{x: xAxis6,y: yAxis6},
  1181 + gridlines: yGridlines});
  1182 +
  1183 + </script>
149 1184 </div>
150   - </div>
151 1185 {% endblock %}
... ...