<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>
