"analitic"
Bootstrap 3.0.0 Snippet by evarevirus

<link href="//netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css"> <script src="//netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script> <script src="//code.jquery.com/jquery-1.11.1.min.js"></script> <!------ Include the above in your HEAD tag ----------> <!DOCTYPE html><html lang='en' class=''> <head><script src='//production-assets.codepen.io/assets/editor/live/console_runner-079c09a0e3b9ff743e39ee2d5637b9216b3545af0de366d4b9aad9dc87e26bfd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/events_runner-73716630c22bbc8cff4bd0f07b135f00a0bdc5d14629260c3ec49e5606f98fdd.js'></script><script src='//production-assets.codepen.io/assets/editor/live/css_live_reload_init-2c0dc5167d60a5af3ee189d570b1835129687ea2a61bee3513dee3a50c115a77.js'></script><meta charset='UTF-8'><meta name="robots" content="noindex"><link rel="shortcut icon" type="image/x-icon" href="//production-assets.codepen.io/assets/favicon/favicon-8ea04875e70c4b0bb41da869e81236e54394d63638a1ef12fa558a4a835f1164.ico" /><link rel="mask-icon" type="" href="//production-assets.codepen.io/assets/favicon/logo-pin-f2d2b6d2c61838f7e76325261b7195c27224080bc099486ddd6dccb469b8e8e6.svg" color="#111" /><link rel="canonical" href="https://codepen.io/abensur/pen/KdCiE?depth=everything&order=popularity&page=35&q=thumbnail&show_forks=false" /> <link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css'> <style class="cp-pen-styles">@import url(https://fonts.googleapis.com/css?family=Roboto:400,300); html { font-size: 10px; font-family: 'Roboto', sans-serif; -webkit-font-smoothing: subpixel-antialiased; -webkit-box-sizing: border-box; box-sizing: border-box; } html * { -webkit-box-sizing: inherit; box-sizing: inherit; } @font-face { font-family: 'dincomp-bold'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bold.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bold.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bold.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bold.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bold.svg#dincomp-boldregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'dincomp-bold-italic'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bolditalic.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bolditalic.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bolditalic.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bolditalic.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-bolditalic.svg#dincomp-bolditaregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'dincomp-italic'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-italic.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-italic.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-italic.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-italic.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-italic.svg#dincomp-itaregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'dincomp-light'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-light.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-light.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-light.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-light.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-light.svg#dincomp-lightregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'dincomp-light-italic'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-lightitalic.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-lightitalic.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-lightitalic.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-lightitalic.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-lightitalic.svg#dincomp-lightitaregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'dincomp-medium'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-medium.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-medium.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-medium.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-medium.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-medium.svg#dincomp-mediumregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'dincomp-medium-italic'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-mediumitalic.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-mediumitalic.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-mediumitalic.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-mediumitalic.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp-mediumitalic.svg#dincomp-mediumitaregular") format("svg"); font-weight: normal; font-style: normal; } @font-face { font-family: 'dincomp'; src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp.eot"); src: url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp.eot?#iefix") format("embedded-opentype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp.woff") format("woff"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp.ttf") format("truetype"), url("https://s3-us-west-2.amazonaws.com/s.cdpn.io/223946/dincomp.svg#dincompregular") format("svg"); font-weight: normal; font-style: normal; } .din { font-family: "dincomp"; } .din--italic { font-family: "dincomp-italic"; } .din-light { font-family: "dincomp-light"; } .din-light--italic { font-family: "dincomp-light-italic"; } .din-medium { font-family: "dincomp-medium"; } .din-medium--italic { font-family: "dincomp-medium-italic"; } .din-bold { font-family: "dincomp-bold"; } .din-bold--italic { font-family: "dincomp-bold-italic"; } .roboto { font-family: "Roboto"; } /* Assets Layout */ .codepen-h1, .codepen-h2 { font-family: "dincomp"; text-align: center; } .codepen-assets-table { margin: 0 auto; } .codepen-assets-table th, .codepen-assets-table td { padding: 8px; border: 1px solid #bdbdbd; } .codepen-assets-table--cores { margin: 0 auto; } .codepen-assets-table--cores th, .codepen-assets-table--cores td { padding: 5px; line-height: 50px; border: 2px solid #fff; font-family: "dincomp"; text-align: center; } .blue-10 { background: #eafbfb; } .blue-20 { background: #b7f0f0; } .blue-30 { background: #95e9e9; } .blue-40 { background: #6be0e1; } .blue { background: #27bdbe; } .blue-60 { background: #1f9898; } .blue-70 { background: #197a7b; } .blue-80 { background: #135d5d; } .blue-90 { background: #0c3b3b; } .green-10 { background: #e6faf4; } .green-20 { background: #ccf5e9; } .green-30 { background: #a2ecd7; } .green-40 { background: #6fe2c1; } .green { background: #2bd2a3; } .green-60 { background: #24ae87; } .green-70 { background: #1d9070; } .green-80 { background: #177259; } .green-90 { background: #10503e; } .purple-10 { background: #ddd2df; } .purple-20 { background: #b9a3bd; } .purple-30 { background: #9979a0; } .purple-40 { background: #7c5d83; } .purple { background: #5c4561; } .purple-60 { background: #443348; } .purple-70 { background: #302433; } .purple-80 { background: #281e2a; } .purple-90 { background: #1c151e; } .pink-10 { background: #fcf2f7; } .pink-20 { background: #f3c9d3; } .pink-30 { background: #eca7ca; } .pink-40 { background: #e071a9; } .pink { background: #d5408b; } .pink-60 { background: #c02a76; } .pink-70 { background: #a32464; } .pink-80 { background: #861d52; } .pink-90 { background: #5c1438; } .red-10 { background: #fdedec; } .red-20 { background: #fbcccb; } .red-30 { background: #f79e9c; } .red-40 { background: #f37977; } .red { background: #f05350; } .red-60 { background: #ec2b27; } .red-70 { background: #d31612; } .red-80 { background: #a9110e; } .red-90 { background: #840e0b; } .gray-10 { background: #fafafa; } .gray-20 { background: #ededed; } .gray-30 { background: #e0e0e0; } .gray-40 { background: #d1d1d1; } .gray-50 { background: #bdbdbd; } .gray-60 { background: #a1a1a1; } .gray-70 { background: #949494; } .gray-80 { background: #717171; } .gray-90 { background: #595959; } .tax-burden { max-width: 768px; margin: 0 auto; position: relative; padding: 0 1rem; } .tax-burden__data { display: none !important; } .tax-burden__title { text-align: center; font-family: "dincomp"; font-size: 2rem; } .tax-burden__info { position: absolute; top: 6.5rem; left: 1rem; width: 25rem; display: -webkit-box; display: -ms-flexbox; display: flex; -webkit-box-orient: horizontal; -webkit-box-direction: normal; -ms-flex-direction: row; flex-direction: row; -ms-flex-wrap: wrap; flex-wrap: wrap; -webkit-box-align: start; -ms-flex-align: start; align-items: flex-start; } .tax-burden__thumbnail { -webkit-box-flex: 0; -ms-flex: 0 9rem; flex: 0 9rem; height: 10rem; border: 2px solid white; -webkit-box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15); box-shadow: 0 1px 1px 0 rgba(0, 0, 0, 0.15); background-image: url(//assets-comparacaodefundos.s3-sa-east-1.amazonaws.com/img/blog/sprite-presidentes.png); background-repeat: no-repeat; position: relative; } .tax-burden__info-aside { -webkit-box-flex: 1; -ms-flex: 1; flex: 1; } .tax-burden__year { background: #27bdbe; font-family: "Roboto"; font-size: 1.25rem; color: #fff; padding: 5px 10px; border-radius: 2px; position: absolute; bottom: 5px; left: -2px; } .tax-burden__name { font-size: 1.15rem; font-family: "dincomp-medium"; color: #595959; border-bottom: 1px solid #e5e5e5; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0.5rem; } .tax-burden__percentage { padding: 0.5rem; font-size: 1.25rem; font-family: "dincomp"; color: #949494; } .tax-burden__percentage-number { color: #27bdbe; font-family: "Roboto"; font-weight: bold; font-size: 1.875rem; margin-right: 0.5rem; } .tax-burden__svg-wrapper { min-height: 300px; } .tax-burden__caption { display: block; text-align: center; font-size: 1rem; font-family: "Roboto"; font-style: italic; font-size: 1.25rem; color: #949494; margin: 1rem 0; } .tax-burden__line { fill: transparent; stroke-width: 1px; } .tax-burden__overlay { fill: none; pointer-events: all; } .tax-burden__focus { display: none; } .tax-burden__focus line { stroke: #5c4561; shape-rendering: crispEdges; } .tax-burden__focus-circle { fill: none; stroke: #27bdbe; } .tax-burden__focus-x, .tax-burden__focus-y { stroke: #27bdbe; stroke-dasharray: 3 3; opacity: 0.5; } .tax-burden__axis path, .tax-burden__axis line { fill: none; stroke: #bdbdbd; shape-rendering: crispEdges; } .tax-burden__axis text { font-family: "Roboto"; font-size: 1rem; fill: #595959; } .hcb { background-position: 0 0; } .acs { background-position: -90px 0; } .dr { background-position: -180px 0; } .eg { background-position: -270px 0; } .ed { background-position: -360px 0; } .egm { background-position: -450px 0; } .fc { background-position: -540px 0; } .fhc { background-position: -630px 0; } .gv { background-position: -720px 0; } .if { background-position: -810px 0; } .jd { background-position: -900px 0; } .jg { background-position: -990px 0; } .jk { background-position: -1080px 0; } .jq { background-position: -1170px 0; } .jf { background-position: -1260px 0; } .js { background-position: -1350px 0; } .lils { background-position: -1440px 0; } .nr { background-position: -1530px 0; } </style></head><body> <div class="tax-burden"> <h2 class="tax-burden__title">Gráfico interativo: carga tributária entre 1947 e 2014</h2> <div class="tax-burden__info"> <div class="tax-burden__thumbnail jd" id="thumbnail"> <span class="tax-burden__year" id="year">2014</span> </div> <div class="tax-burden__info-aside"> <div class="tax-burden__name"><span id="name">Emílio Garrastazu Médici</span></div> <div class="tax-burden__percentage"> <span class="tax-burden__percentage-number" id="percentage">0%</span> do PIB </div> </div> </div> <div class="tax-burden__svg-wrapper" id="taxBurden"></div> <span class="tax-burden__caption">Deslize o cursor pela linha do gráfico para navegar pelos dados.</span> </div> <pre class="tax-burden__data" id="data"> Ano,Carga,Presidente,Classe 1947,13.8,"Eurico Gaspar Dutra",ed 1948,14,"Eurico Gaspar Dutra",ed 1949,14.4,"Eurico Gaspar Dutra",ed 1950,14.4,"Eurico Gaspar Dutra",ed 1951,15.7,"Getúlio Vargas",gv 1952,15.4,"Getúlio Vargas",gv 1953,15.2,"Getúlio Vargas",gv 1954,15.8,"Getúlio Vargas",gv 1955,15.1,"Nereu Ramos",nr 1956,16.4,"Juscelino Kubitschek",jk 1957,16.7,"Juscelino Kubitschek",jk 1958,18.7,"Juscelino Kubitschek",jk 1959,17.9,"Juscelino Kubitschek",jk 1960,17.4,"Juscelino Kubitschek",jk 1961,16.4,"Jânio Quadros",jq 1962,15.8,"João Goulart",jg 1963,16.1,"João Goulart",jg 1964,17,"Humberto Castelo Branco",hcb 1965,18.8,"Humberto Castelo Branco",hcb 1966,20.6,"Humberto Castelo Branco",hcb 1967,20.2,"Artur da Costa e Silva",acs 1968,23,"Artur da Costa e Silva",acs 1969,24.6,"Artur da Costa e Silva",acs 1970,26,"Emílio Garrastazu Médici",egm 1971,25.3,"Emílio Garrastazu Médici",egm 1972,26,"Emílio Garrastazu Médici",egm 1973,25.1,"Emílio Garrastazu Médici",egm 1974,25.1,"Emílio Garrastazu Médici",egm 1975,25.2,"Ernesto Geisel",eg 1976,25.1,"Ernesto Geisel",eg 1977,25.6,"Ernesto Geisel",eg 1978,25.7,"Ernesto Geisel",eg 1979,24.7,"João Figueiredo",jf 1980,24.4,"João Figueiredo",jf 1981,25.1,"João Figueiredo",jf 1982,26.2,"João Figueiredo",jf 1983,26.8,"João Figueiredo",jf 1984,24.2,"João Figueiredo",jf 1985,23.8,"José Sarney",js 1986,26.5,"José Sarney",js 1987,24.2,"José Sarney",js 1988,23.3,"José Sarney",js 1989,23.7,"Fernando Collor",fc 1990,29.6,"Fernando Collor",fc 1991,24.4,"Fernando Collor",fc 1992,25,"Fernando Collor",fc 1993,25.3,"Itamar Franco",if 1994,27.9,"Itamar Franco",if 1995,28.4,"Fernando Henrique Cardoso",fhc 1996,28.6,"Fernando Henrique Cardoso",fhc 1997,28.6,"Fernando Henrique Cardoso",fhc 1998,29.3,"Fernando Henrique Cardoso",fhc 1999,31.1,"Fernando Henrique Cardoso",fhc 2000,30.4,"Fernando Henrique Cardoso",fhc 2001,31.9,"Fernando Henrique Cardoso",fhc 2002,32.4,"Fernando Henrique Cardoso",fhc 2003,31.9,"Luiz Inácio Lula da Silva",lils 2004,32.8,"Luiz Inácio Lula da Silva",lils 2005,33.8,"Luiz Inácio Lula da Silva",lils 2006,34.1,"Luiz Inácio Lula da Silva",lils 2007,34.7,"Luiz Inácio Lula da Silva",lils 2008,34.9,"Luiz Inácio Lula da Silva",lils 2009,33.7,"Luiz Inácio Lula da Silva",lils 2010,33.76,"Luiz Inácio Lula da Silva",lils 2011,34.91,"Dilma Rousseff",dr 2012,34.61,"Dilma Rousseff",dr 2013,35.04,"Dilma Rousseff",dr 2014,35.42,"Dilma Rousseff",dr </pre> <script src='//production-assets.codepen.io/assets/common/stopExecutionOnTimeout-b2a7b3fe212eaa732349046d8416e00a9dec26eb7fd347590fbced3ab38af52e.js'></script><script src='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script> <script >var taxBurden = { nodes: { year: document.querySelector('#year'), name: document.querySelector('#name'), thumbnail: document.querySelector('#thumbnail'), percentage: document.querySelector('#percentage'), container: document.querySelector('#taxBurden'), data: document.querySelector('#data') }, config: { w: 0, h: 0, m: 20, x: d3.time.scale().domain([new Date(1947,1,1), new Date(2014,1,1)]), y: d3.scale.linear().domain([13.8, 40]), data: null }, components: { axis: d3.svg.axis().orient("bottom").outerTickSize(0), line: d3.svg.line().interpolate("step-after") .x(function (d) { return taxBurden.config.x(d.Ano); }) .y(function (d) { return taxBurden.config.y(d.Carga); }) }, formatDate: d3.time.format("%Y"), parseDate: d3.time.format("%Y").parse, bisectDate: d3.bisector(function (d) { return d.Ano; }).left, init: function () { var resizeTimer; window.onresize = function () { clearTimeout(resizeTimer); resizeTimer = setTimeout(this.update.bind(this), 100); }.bind(this); this.setMeasures(); this.setData(); this.plot(); }, setData: function () { this.config.data = d3.csv.parse(this.nodes.data.innerHTML); this.config.data.forEach(function(d) { d.Ano = this.parseDate(d.Ano); d.Carga = +d.Carga; d.Presidente = d.Presidente; d.Classe = d.Classe; }.bind(this)); }, setMeasures: function () { this.config.w = this.nodes.container.offsetWidth; this.config.h = this.nodes.container.offsetHeight; this.config.x = this.config.x.range([0, this.config.w]); this.config.y = this.config.y.range([this.config.h - this.config.m, 0]); this.components.axis = this.components.axis.scale(this.config.x); }, update: function () { this.setMeasures(); d3.select(this.nodes.container).select('svg') .attr({ width: this.config.w }); d3.select('.tax-burden__axis') .transition() .call(this.components.axis); d3.select('.tax-burden__overlay') .attr({ height: this.config.h, width: this.config.w }); d3.select('.tax-burden__line') .attr('d', '') .attr('d', this.components.line); }, plot: function () { var svg = d3.select(this.nodes.container) .append('svg') .attr({ height: this.config.h, width: this.config.w }); svg.append('g') .attr({ class: 'tax-burden__axis', transform: ['translate(0,', this.config.h - this.config.m ,')'].join('') }) .call(this.components.axis); var linearGradient = svg.append('defs') .append('linearGradient') .attr('id', 'gradient'); linearGradient .append("stop") .attr("stop-color", "#008000"); linearGradient .append("stop") .attr("offset", "100%") .attr("stop-color", "#c83a22"); var path = svg.append('path') .datum(this.config.data) .attr({ class: 'tax-burden__line', d: this.components.line, stroke: 'url(#gradient)' }); var totalLength = path.node().getTotalLength(); path.attr({ 'stroke-dasharray': [totalLength, totalLength].join(','), 'stroke-dashoffset': totalLength }) .transition().duration(3000).ease('linear') .attr('stroke-dashoffset', 0); var focus = svg.append('g') .attr('class', 'tax-burden__focus'); focus.append('line') .attr({ class: 'tax-burden__focus-x', y1: this.config.h - 20, y2: 0 }); focus.append('circle') .attr({ class: 'tax-burden__focus-circle', r: 4 }); svg.append('rect') .attr({ class: 'tax-burden__overlay', width: this.config.w, height: this.config.h }) .on({ mouseover: function() { focus.style('display', 'initial'); }, mouseout: function() { focus.style('display', 'none'); }, mousemove: taxBurden.mousemove }); }, mousemove: function () { var self = taxBurden, x0 = self.config.x.invert(d3.mouse(this)[0]), i = self.bisectDate(taxBurden.config.data, x0, 1), d0 = self.config.data[i - 1], d1 = self.config.data[i], d = x0 - d0.Ano > d1.Ano - x0 ? d1 : d0, focus = d3.select('.tax-burden__focus'); focus.select("circle") .attr("transform", ['translate(', self.config.x(d.Ano), ',', self.config.y(d.Carga), ')'].join('')); focus.select(".tax-burden__focus-x") .attr({ transform: ['translate(', self.config.x(d.Ano), ',0)'].join(''), y2: self.config.y(d.Carga) }); focus.select(".tax-burden__focus-y") .attr({ transform: ['translate(0,', self.config.y(d.Carga), ')'].join(''), x2: self.config.x(d.Ano) }) self.nodes.year.innerHTML = self.formatDate(d.Ano); self.nodes.name.innerHTML = d.Presidente; self.nodes.percentage.innerHTML = d.Carga + '%'; self.nodes.thumbnail.className = 'tax-burden__thumbnail '+ d.Classe; } }; taxBurden.init(); //# sourceURL=pen.js </script> </body></html>

Related: See More


Questions / Comments: