Created
December 31, 2013 15:39
-
-
Save andrehigher/8198547 to your computer and use it in GitHub Desktop.
Protótipo da visualização aberta do CEVIU
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <html lang="pt_BR"> | |
| <head> | |
| <title>Protótipo - Vizzual</title> | |
| <meta charset="utf-8"> | |
| <style type="text/css"> | |
| @import url(https://fonts.googleapis.com/css?family=Cardo); | |
| @import url(https://fonts.googleapis.com/css?family=PT+Serif+Caption); | |
| #wrap { | |
| width: 500px; | |
| padding: 30px; | |
| } | |
| h1 { | |
| font-family: "PT Serif Caption", serif; | |
| font-size: 30px; | |
| } | |
| .description { | |
| font-family: "Cardo"; | |
| } | |
| img { | |
| border: 1px solid rgb(150, 150, 150); | |
| border-radius: 2px; | |
| } | |
| #stats { | |
| background-color: rgb(246, 246, 246); | |
| border-radius: 4px; | |
| padding: 15px; | |
| margin-top: 20px; | |
| } | |
| ul { | |
| list-style-type: none; | |
| font-family: "PT Serif Caption", serif; | |
| font-size: 12px; | |
| } | |
| ul li { | |
| padding-bottom: 4px; | |
| } | |
| ul li strong { | |
| display: inline-block; | |
| width: 150px; | |
| } | |
| #vis { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .circle { | |
| stroke: #000; | |
| stroke-width: 0; | |
| } | |
| .circle-selected { | |
| stroke: #ff4200; | |
| stroke-width: 1pt; | |
| } | |
| .brush .extent { | |
| stroke: #fff; | |
| fill-opacity: .125; | |
| shape-rendering: crispEdges; | |
| } | |
| .circle-me { | |
| fill: red; | |
| stroke-width: 1pt; | |
| } | |
| .circle-woman { | |
| fill: #e377c2; | |
| fill-opacity: .6; | |
| } | |
| .circle-man { | |
| fill: #1f77b4; | |
| fill-opacity: .6; | |
| } | |
| circle.hidden { | |
| fill: #ccc !important; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div id="wrap"> | |
| <h1>Pretensão Salarial x Idade</h1> | |
| <p class="description"> | |
| Clique e arraste no gráfico para explorar o perfil dos candidatos à vaga <i>lorem ipsum</i> com relação a pretensão salarial, idade e sexo. | |
| </p> | |
| <p class="description"> | |
| <img src="https://s3-sa-east-1.amazonaws.com/gists/1/tutorial.png" alt="Tutorial"> | |
| </p> | |
| <p class="description"> | |
| A sua posição é indicada por um círculo vermelho, como esse: <svg width="20" height="10"><circle class="circle circle-me" r="4" cx="5" cy="5"></circle></svg> | |
| </p> | |
| <div id="vis"></div> | |
| <div id="stats"> | |
| <ul> | |
| <li><strong>Selecionados:</strong> <span id="total"></span></li> | |
| <li><strong>Média R$:</strong> <span id="mean"></span></li> | |
| <li><strong>Média Idade:</strong> <span id="mean-age"></span></li> | |
| </ul> | |
| </div> | |
| </div> | |
| <script src="https://s3-sa-east-1.amazonaws.com/gists/d3.v3.min.js" charset="utf-8"></script> | |
| <script> | |
| // Dummy data | |
| data = [ | |
| { gender:1, birthday:"1985-11-18", claimClt:3000.00, claimPjm:0, claimPjh:0, me: 1 }, | |
| { gender:1, birthday:"1989-05-20", claimClt:2500.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:2, birthday:"1993-06-10", claimClt:1500.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1990-06-10", claimClt:2700.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1994-06-10", claimClt:1500.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:2, birthday:"1986-06-10", claimClt:2600.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1988-06-10", claimClt:3400.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1993-06-10", claimClt:1800.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1983-06-10", claimClt:2150.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1987-06-10", claimClt:2000.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1988-06-10", claimClt:1870.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1992-06-10", claimClt:3500.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:2, birthday:"1991-06-10", claimClt:3200.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1990-06-10", claimClt:2750.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:2, birthday:"1990-06-10", claimClt:2360.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1994-06-10", claimClt:1200.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:2, birthday:"1980-06-10", claimClt:3950.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, birthday:"1980-06-10", claimClt:4000.00, claimPjm:0, claimPjh:0, me: 0 } | |
| ]; | |
| function calcAge(dateString) { | |
| var birthday = +new Date(dateString); | |
| return ~~((Date.now() - birthday) / (31557600000)); | |
| } | |
| var margin = { top: 10, bottom: 20, left: 45, right: 10 }, | |
| width = 400, // estudo sobre a tela de usuário do ceviu. o tamanho máximo é 925px | |
| height = 250; // estudo sobre a tela de usuário do ceviu. o tamanho máximo é 510px | |
| var svg = d3.select('#vis').append('svg') | |
| .attr('width', width + margin.left + margin.right) | |
| .attr('height', height + margin.top + margin.bottom) | |
| .append('g') | |
| .attr('transform', 'translate(' + margin.left + ',' + margin.top + ')'); | |
| var xScale = d3.scale.linear() | |
| .domain([ 15, d3.max(data, function(d) { return calcAge(d.birthday) + 6; }) ]) | |
| .range([ 0, width ]); | |
| var yScale = d3.scale.linear() | |
| .domain([ d3.max(data, function(d) { return d.claimClt + 1000; }), 0 ]) // colocando 20.000 como limite (estudar de colocar o limite) | |
| .range([ 0, height ]); | |
| var xAxis = d3.svg.axis().scale(xScale).orient('bottom').ticks(5), | |
| yAxis = d3.svg.axis().scale(yScale).orient('left').ticks(5); | |
| svg.append('g') | |
| .attr('class', 'x axis') | |
| .attr('transform', 'translate(0,' + height + ')') | |
| .call(xAxis) | |
| .append('text') | |
| .attr('class', 'label') | |
| .attr('x', width) | |
| .attr('y', -6) | |
| .style('text-anchor', 'end') | |
| .text('Idade (anos)'); | |
| svg.append('g') | |
| .attr('class', 'y axis') | |
| .call(yAxis) | |
| .append('text') | |
| .attr('class', 'label') | |
| .attr('transform', 'rotate(-90)') | |
| .attr('y', 6) | |
| .attr('dy', '.71em') | |
| .style('text-anchor', 'end') | |
| .text('Pretensão Salarial (R$)'); | |
| var circle = svg.selectAll(".circle") | |
| .data(data) | |
| .enter().append("circle") | |
| .attr("class", function(d) { | |
| if (d.me) { | |
| return 'circle circle-me'; | |
| } else { | |
| if(d.gender === 1) { | |
| return 'circle circle-man'; | |
| } else { | |
| return 'circle circle-woman'; | |
| } | |
| } | |
| }) | |
| .attr("r", 4) | |
| .attr("cx", function(d) { return xScale(calcAge(d.birthday)); }) | |
| .attr("cy", function(d) { return yScale(d.claimClt); }); | |
| var brush = d3.svg.brush() | |
| .x(xScale) | |
| .y(yScale) | |
| .on("brush", brushmove); | |
| svg.append("g") | |
| .attr("class", "brush") | |
| .call(brush); | |
| var brushCell; | |
| function brushmove() { | |
| var extent = brush.extent(); | |
| var x1 = extent[0][0], | |
| y1 = extent[0][1], | |
| x2 = extent[1][0], | |
| y2 = extent[1][1]; | |
| circle.classed('circle-selected', function(d) { | |
| var x = calcAge(d.birthday); | |
| var y = d.claimClt; | |
| if (x >= x1 && x <=x2 && y >= y1 && y <= y2) { | |
| return true; | |
| } else { | |
| return false; | |
| } | |
| }); | |
| var stats = []; | |
| circle.each(function(d) { | |
| if (this.classList.contains('circle-selected')) { | |
| stats.push(d); | |
| } | |
| }); | |
| console.log( "stats", stats ); | |
| updateStats(stats); | |
| } | |
| function updateStats(data) { | |
| var n = data.length; // Número de participantes selecionados. | |
| var cltTotal = 0, | |
| ageTotal = 0; | |
| data.forEach(function(o) { | |
| cltTotal = cltTotal + o.claimClt; | |
| ageTotal = ageTotal + calcAge(o.birthday); | |
| }); | |
| var cltMean = 'R$ ' + d3.round(cltTotal / n, 2); | |
| var ageMean = d3.round(ageTotal / n, 2) + ' anos'; | |
| if (n) { | |
| d3.select('#stats #total').text(n); | |
| d3.select('#stats #mean').text(cltMean); | |
| d3.select('#stats #mean-age').text(ageMean); | |
| } else { | |
| d3.select('#stats #total').text(''); | |
| d3.select('#stats #mean').text(''); | |
| d3.select('#stats #mean-age').text(''); | |
| } | |
| } | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment