Download as
Browse Code »

Commit c88332271d6db4f6e05c1953067d8d3703bab1b0

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

Modified window view template to display the charts

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