Protótipo da visualização fechada do CEVIU.
Last active
December 29, 2015 16:28
-
-
Save andrehigher/7697128 to your computer and use it in GitHub Desktop.
Protótipo da visualização fechada 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
| <html> | |
| <meta charset="utf-8"> | |
| <head> | |
| <title>PorDentro</title> | |
| <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script> | |
| <script src="http://square.github.io/crossfilter/crossfilter.v1.min.js" charset="utf-8"></script> | |
| <style type="text/css"> | |
| 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; | |
| } | |
| #vis { | |
| font: 10px sans-serif; | |
| } | |
| .axis path, | |
| .axis line { | |
| fill: none; | |
| stroke: #000; | |
| shape-rendering: crispEdges; | |
| } | |
| .circle { | |
| stroke: #000; | |
| stroke-width: 0; | |
| } | |
| .triangle { | |
| fill: steelblue; | |
| stroke: #000; | |
| stroke-width: 0; | |
| } | |
| .circle-selected, .triangle-selected { | |
| stroke: #ff4200; | |
| stroke-width: 1pt; | |
| } | |
| .brush .extent { | |
| stroke: #fff; | |
| fill-opacity: .125; | |
| shape-rendering: crispEdges; | |
| } | |
| .circle-me, .triangle-me { | |
| fill: red; | |
| stroke-width: 1pt; | |
| } | |
| .circle-woman, .triangle-woman { | |
| fill: #e377c2; | |
| fill-opacity: .6; | |
| } | |
| .circle-man, .triangle-man { | |
| fill: #1f77b4; | |
| fill-opacity: .6; | |
| } | |
| circle.hidden { | |
| fill: #ccc !important; | |
| } | |
| .container{ | |
| width: 960px; | |
| height: 540px; | |
| } | |
| .container div{ | |
| display: inline-block; | |
| } | |
| .squared { | |
| border:solid 1px #ccc; | |
| padding: 15px; | |
| } | |
| .mainVis{ | |
| width: 480px; | |
| height:300px; | |
| } | |
| #stats { | |
| width: 250px; | |
| height:62px; | |
| } | |
| </style> | |
| </head> | |
| <body> | |
| <div class="container"> | |
| <div class="squared"> | |
| <div id="vis"></div> | |
| </div> | |
| <div> | |
| <div> | |
| <div class="squared" 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> | |
| </div> | |
| <script type="text/javascript"> | |
| data = [ | |
| { gender:1, employed: 1, birthday:"1985-11-18", claimClt:3000.00, claimPjm:4500.00, claimPjh:40.00, me: 1 }, | |
| { gender:1, employed: 0, birthday:"1989-05-20", claimClt:2500.00, claimPjm:3200.00, claimPjh:30.00, me: 0 }, | |
| { gender:2, employed: 0, birthday:"1993-06-10", claimClt:1500.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 1, birthday:"1990-06-10", claimClt:2700.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 1, birthday:"1994-06-10", claimClt:1500.00, claimPjm:2300.00, claimPjh:23.00, me: 0 }, | |
| { gender:2, employed: 0, birthday:"1986-06-10", claimClt:2600.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 0, birthday:"1988-06-10", claimClt:3400.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 1, birthday:"1993-06-10", claimClt:1800.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 0, birthday:"1983-06-10", claimClt:2150.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 1, birthday:"1987-06-10", claimClt:2000.00, claimPjm:3500.00, claimPjh:35.00, me: 0 }, | |
| { gender:1, employed: 0, birthday:"1988-06-10", claimClt:1870.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 0, birthday:"1992-06-10", claimClt:3500.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:2, employed: 1, birthday:"1991-06-10", claimClt:3200.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 0, birthday:"1990-06-10", claimClt:2750.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:2, employed: 0, birthday:"1990-06-10", claimClt:2360.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:1, employed: 1, birthday:"1994-06-10", claimClt:1200.00, claimPjm:0, claimPjh:0, me: 0 }, | |
| { gender:2, employed: 1, birthday:"1980-06-10", claimClt:3950.00, claimPjm:4800.00, claimPjh:60.00, me: 0 }, | |
| { gender:1, employed: 1, birthday:"1980-06-10", claimClt:4000.00, claimPjm:6000.00, claimPjh:70.00, me: 0 } | |
| ]; | |
| function calcAge(dateString) { | |
| var birthday = +new Date(dateString); | |
| return ~~((Date.now() - birthday) / (31557600000)); | |
| } | |
| function mainVis(){ | |
| 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.employed === 1) | |
| { | |
| if (d.me) { | |
| return 'circle circle-me'; | |
| } else { | |
| if(d.gender === 1) { | |
| return 'circle circle-man'; | |
| } else { | |
| return 'circle circle-woman'; | |
| } | |
| } | |
| } | |
| }) | |
| .attr("r", function(d) { if(d.employed === 1) return 4; }) | |
| .attr("cx", function(d) { if(d.employed === 1) return xScale(calcAge(d.birthday)); }) | |
| .attr("cy", function(d) { if(d.employed === 1) return yScale(d.claimClt); }); | |
| var triangle = svg.selectAll(".triangle") | |
| .data(data) | |
| .enter().append("path") | |
| .attr("class", function(d){ | |
| if(d.employed === 0){ | |
| if (d.me) { | |
| return 'triangle triangle-me'; | |
| } else { | |
| if(d.gender === 1) { | |
| return 'triangle triangle-man'; | |
| } else { | |
| return 'triangle triangle-woman'; | |
| } | |
| } | |
| } | |
| else{ | |
| } | |
| }) | |
| .attr("d", d3.svg.symbol().type("triangle-up")) | |
| .attr("transform", function(d) { if(d.employed === 0) return "translate(" + xScale(calcAge(d.birthday)) + "," + 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; | |
| } | |
| }); | |
| triangle.classed('triangle-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); | |
| } | |
| }); | |
| 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(''); | |
| } | |
| } | |
| } | |
| function createCrossfilter(){ | |
| var cvs = crossfilter(data), | |
| all = cvs.groupAll(); | |
| console.log(cvs); | |
| console.log(all); | |
| } | |
| mainVis(); | |
| createCrossfilter(); | |
| </script> | |
| </body> | |
| </html> |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment