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 - 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 |
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!
Name | Size |
Food Seasons | 6,522 Kb |
Isocubes | 4,776 Kb |
A Pen by Rafael Abensur | 5,301 Kb |
D3.js Brazil Economic Underwater | 4,368 Kb |
D3.js with CSS sprites | 9,304 Kb |
React Loader | 9,370 Kb |
Tesseract experiments | 3,557 Kb |
Responsive SVG thermometer | 3,711 Kb |
Amadurou Logo Animation | 3,208 Kb |
Roundout Ribbon | 2,907 Kb |
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!
Name | Username | Size |
Rainbow Drops | Csbarnes | 2,365 Kb |
Flying Bee | Pwsm50 | 3,711 Kb |
Fullscreen Parallax | Bassta | 3,313 Kb |
Sort the Knowlege | Eprouver | 3,915 Kb |
Firefox Breakout Guide | Quincysoeliman | 2,576 Kb |
Mostly Fluid | Mccreath | 3,308 Kb |
Resume | Rottingroom | 5,483 Kb |
A Pen by Jay | Jaycode | 3,784 Kb |
My Interests | Anshusaxenaarora | 2,015 Kb |
A Pen by Gregory Potdevin | GregoryPotdevin | 1,713 Kb |
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!