D3.js with CSS sprites
How do I make an d3.js with css sprites?
This graph shows the growth of Brazil's tax burden over the years. What is a d3.js with css sprites? How do you make a d3.js with css sprites? This script and codes were developed by Rafael Abensur on 12 September 2022, Monday.
D3.js with CSS sprites Previews
D3.js with CSS sprites - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>D3.js with CSS sprites</title> <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css"> <link rel='stylesheet prefetch' href='css/9a5ecf2380448bc1a0825a3cb.css'> <link rel="stylesheet" href="css/style.css">
</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='https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
D3.js with CSS sprites - Script Codes CSS Codes
.tax-burden { max-width: 768px; margin: 0 auto; position: relative; padding: 0 1rem; &__data { display: none !important; } &__title { text-align: center; font-family: $font; font-size: 2rem; } &__info { position: absolute; top: 6.5rem; left: 1rem; width: 25rem; display: flex; flex-direction: row; flex-wrap: wrap; align-items: flex-start; } &__thumbnail { flex: 0 9rem; height: 10rem; border: 2px solid white; 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; } &__info-aside { flex: 1; } &__year { background: $blue; font-family: $roboto; font-size: 1.25rem; color: #fff; padding: 5px 10px; border-radius: 2px; position: absolute; bottom: 5px; left: -2px; } &__name { font-size: 1.15rem; font-family: $font-medium; color: $gray-90; border-bottom: 1px solid #e5e5e5; text-overflow: ellipsis; white-space: nowrap; overflow: hidden; padding: 0.5rem; } &__percentage { padding: 0.5rem; font-size: 1.25rem; font-family: $font; color: $gray-70; } &__percentage-number { color: $blue; font-family: $roboto; font-weight: bold; font-size: 1.875rem; margin-right: 0.5rem; } &__svg-wrapper { min-height: 300px;
// border: 1px solid $gray-20; } &__caption { display: block; text-align: center; font-size: 1rem; font-family: $roboto; font-style: italic; font-size: 1.25rem; color: $gray-70; margin: 1rem 0; } &__line { fill: transparent; stroke-width: 1px; } &__overlay { fill: none; pointer-events: all; } &__focus { display: none; line { stroke: $purple; shape-rendering: crispEdges; } } &__focus-circle { fill: none; stroke: $blue; } &__focus-x, &__focus-y { stroke: #27bdbe; stroke-dasharray: 3 3; opacity: 0.5; } &__axis { path, line { fill: none; stroke: $gray-50; shape-rendering: crispEdges; } text { font-family: $roboto; font-size: 1rem; fill: $gray-90; } }
}
.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; }D3.js with CSS sprites - Script Codes JS Codes
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();
| Developer | Rafael Abensur |
| Username | abensur |
| Uploaded | September 12, 2022 |
| Rating | 3.5 |
| Size | 9,304 Kb |
| Views | 26,312 |
Do you need developer help for D3.js with CSS sprites?
Find the perfect freelance services for your business! Fiverr's mission is to change how the world works together. Fiverr connects businesses with freelancers offering digital services in 500+ categories. Find Developer!
Rafael Abensur (abensur) Script Codes
| Name | Size |
| Roundout Ribbon | 2,907 Kb |
| Pocker Mortys dataviz | 13,940 Kb |
| Responsive SVG thermometer | 3,711 Kb |
| Chart tooltip example | 2,757 Kb |
| Isocubes | 4,776 Kb |
| Tesseract experiments | 3,557 Kb |
| A Pen by Rafael Abensur | 5,301 Kb |
| Food Seasons | 6,522 Kb |
| Algorithm practice | 5,620 Kb |
| New Pen Template | 1,233 Kb |
Create amazing sales emails with AI!
Jasper is the AI Content Generator that helps you and your team break through creative blocks to create amazing, original content 10X faster. Discover all the ways the Jasper AI Content Platform can help streamline your creative workflows. Start For Free!
Similar Scripts & Codes
| Name | Username | Size |
| Find The Penguin | Lelder | 2,212 Kb |
| Animated Logo | Shakdaniel | 2,672 Kb |
| React TODO | Enieste | 3,320 Kb |
| Sticky menu on scroll | Senff | 2,869 Kb |
| Ripples in water | Nobitagit | 2,704 Kb |
| Css or Czz.. | Judag | 4,111 Kb |
| Material design buttons | Fischaela | 4,381 Kb |
| Polo, the flying squirrel | Agbales | 2,445 Kb |
| E-mail Template | SoloMDFK | 4,871 Kb |
| Border image | JohnRiordan | 2,120 Kb |
Do you want hide your ip address?
Surf anonymously, prevent hackers from acquiring your IP address, send anonymous email, and encrypt your Internet connection. High speed, ultra secure, and easy to use. Instant setup. Hide Your IP Now!