D3 Bar Chart - Poverty Rate - FINAL
How do I make an d3 bar chart - poverty rate - final?
Grows both front and back bars onload -- then click button and front bars shrink, revealing back bars -- tooltips on hover -- YEAH!. What is a d3 bar chart - poverty rate - final? How do you make a d3 bar chart - poverty rate - final? This script and codes were developed by Shannon Range on 16 October 2022, Sunday.
D3 Bar Chart - Poverty Rate - FINAL Previews
D3 Bar Chart - Poverty Rate - FINAL - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>d3 Bar Chart - Poverty Rate - FINAL</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <script src="https://d3js.org/d3.v3.min.js"></script>
<div class="content"></div>
<div id="taxes-transfers-container"> <div><h3>Can governments change the child poverty rate?</h3> <p>Compare the rates in the following countries with and without goverment transfers and tax breaks.</p></div> <div id="button1" class="button">WITH<br/><span>Transfers and Taxes</span></div> <div id="button2"class="button">WITHOUT<br/><span>Transfers and Taxes</span></div>
</div>
<div id="taxes-transfers-tooltip" class="hidden"> <p><span id="value">100</span></p>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>D3 Bar Chart - Poverty Rate - FINAL - Script Codes CSS Codes
#taxes-transfers-container {font-family:helvetica, sans-serif; text-align:center; width:588px;}
svg {position:absolute;} /*-- !IMPORTANT */
.front_svg {z-index:1;}
.back_svg {z-index:0;}
.button {width:150px; margin:2% 7%}
.button span {font-weight:400; font-size:0.8em;}
#taxes-transfers-tooltip { position: absolute; z-index:10; width: 200px; height: auto; padding: 10px; background-color: white; -webkit-border-radius: 10px; -moz-border-radius: 10px; border-radius: 10px; -webkit-box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); -mox-box-shadow: 4px 4px 4px 10px rgba(0, 0, 0, 0.4); box-shadow: 4px 4px 10px rbga(0, 0, 0, 0.4); pointer-events: none;
}
#taxes-transfers-tooltip.hidden { opacity: 0;
}
#taxes-transfers-tooltip p { margin: 0; font-family: sans-serif; font-size: 16px; line-height: 20px;
}
.back_rect {opacity:0.5;}
/*--------------------- BUTTON STYLING ---------- */
#taxes-transfers-container .button { -moz-box-shadow:inset 0px 1px 3px 0px #91b8b3; -webkit-box-shadow:inset 0px 1px 3px 0px #91b8b3; box-shadow:inset 0px 1px 3px 0px #91b8b3; background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #768d87), color-stop(1, #6c7c7c)); background:-moz-linear-gradient(top, #768d87 5%, #6c7c7c 100%); background:-webkit-linear-gradient(top, #768d87 5%, #6c7c7c 100%); background:-o-linear-gradient(top, #768d87 5%, #6c7c7c 100%); background:-ms-linear-gradient(top, #768d87 5%, #6c7c7c 100%); background:linear-gradient(to bottom, #768d87 5%, #6c7c7c 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#768d87', endColorstr='#6c7c7c',GradientType=0); background-color:#768d87; -moz-border-radius:14px; -webkit-border-radius:14px; border-radius:14px; border:1px solid #566963; display:inline-block; cursor:pointer; color:#ffffff; font-family:arial; font-size:15px; font-weight:bold; padding:11px 23px; text-decoration:none; text-shadow:0px -1px 0px #2b665e;
}
#taxes-transfers-container .button:hover { background:-webkit-gradient(linear, left top, left bottom, color-stop(0.05, #6c7c7c), color-stop(1, #768d87)); background:-moz-linear-gradient(top, #6c7c7c 5%, #768d87 100%); background:-webkit-linear-gradient(top, #6c7c7c 5%, #768d87 100%); background:-o-linear-gradient(top, #6c7c7c 5%, #768d87 100%); background:-ms-linear-gradient(top, #6c7c7c 5%, #768d87 100%); background:linear-gradient(to bottom, #6c7c7c 5%, #768d87 100%); filter:progid:DXImageTransform.Microsoft.gradient(startColorstr='#6c7c7c', endColorstr='#768d87',GradientType=0); background-color:#6c7c7c;
}
#taxes-transfers-container .button:active { position:relative; top:1px;
}
D3 Bar Chart - Poverty Rate - FINAL - Script Codes JS Codes
var margin = {top:50,right:50,bottom:50,left:100}
//Width and height var w = 588 - margin.left - margin.right var h = 666 - margin.top - margin.bottom var pedroia = [
{"rate":40, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":33, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":31, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":25, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":25, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":20, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":19, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":18, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":17, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":17, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":16, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":16, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":13, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":11, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."}
];
var xScale = d3.scale.linear() .domain([0, d3.max(pedroia, function(d) { return d.rate;})]) //.domain([0,50])//([0, d3.max(data)]) .range([0, w]);
var yScale = d3.scale.ordinal() .domain(d3.range(0,pedroia.length)) .rangeRoundBands([0, h], 0.1, 0);
var colors = d3.scale.linear() .domain([0,d3.max(pedroia)]) .range(["#ff9900","#990000"]);
///////////////////////////////////////////////////
//HERE WE DRAW THE BACK SET OF BARS WHEN THE PAGE LOADS
var svg = d3.select("div.content") .append("svg") .style('background','#ddd') .attr('class','back_svg') .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom) .append('g') .attr('transform','translate('+ margin.left+','+ margin.top +')');
var drawBackBars = svg.selectAll("rect") .data(pedroia) .enter() .append("rect") .attr('class','back_rect') .attr("x", 0) .attr("width", 0) .attr("height", yScale.rangeBand()) .attr("y", function(d,i) {return yScale(i);}) .attr("fill", '#888');
//.on("mouseover", function (d) {
// d3.select("#taxes-transfers-tooltip")
// .style("left", d3.event.pageX + "px")
// .style("top", d3.event.pageY + "px")
// .style("opacity", 1)
// .select("#value")
// .text(d.country);
// .on("mouseout", function () { // Hide the tooltip
// d3.select("#taxes-transfers-tooltip")
// .style("opacity", 0);;
//});
drawBackBars.transition().delay(100).duration(2000) .attr("width", function(d) {return xScale(d.rate);}) .attr("x", 0)
/////////////////////////////////////////////////////////
//HERE WE DRAW THE FRONT SET OF BARS WHEN THE PAGE LOADS ///////////////////////////////
var svg = d3.select("body") .append("svg")
// .style('background','#FFFAD6') .attr('class','front_svg') .attr("width", w + margin.left + margin.right) .attr("height", h + margin.top + margin.bottom) .append('g') .attr('transform','translate('+ margin.left+','+ margin.top +')');
var drawFrontBars = svg.selectAll("rect") .data(pedroia) .enter() .append("rect") .attr('class','front_rect') .attr("x", 0) .attr("width", 0) .attr("height", yScale.rangeBand()) .attr("y", function(d,i) {return yScale(i);}) .attr("fill", "#990000") .on("mouseover", function (d) { d3.select("#taxes-transfers-tooltip").transition().duration(400) .style("left", d3.event.pageX + 50 + "px") .style("top", d3.event.pageY - 50 + "px") .style("opacity", 1) .select("#value") .text(d.tooltip); d3.select(this).transition().duration(250) .style('opacity',.5);
}) .on("mouseout", function () { // Hide the tooltip d3.select("#taxes-transfers-tooltip") .style("opacity", 0); d3.select(this).transition().duration(300) .style('opacity',1);
});
drawFrontBars.transition().delay(100).duration(2000) .attr("width", function(d) {return xScale(d.rate);}) .attr("x", 0); //Create labels
var drawFrontLabels = svg.selectAll("text") .data(pedroia) .enter() .append("text") .text(function(d) {return d.rate;}) .attr('opacity',0) .attr("text-anchor", "end") .attr("y", function(d, i) {return yScale(i) + (yScale.rangeBand() / 2) + 4;}) .attr("x", function(d) {return xScale(d.rate) - 12;}) .attr("font-family", "sans-serif") .attr("font-size", "1em") .attr("fill", "#fff");
drawFrontLabels.transition().delay(1500).duration(500) .attr('opacity',1);
/////////////////////////////////////////////////////////
//REDRAW (SHRINK) FRONT BARS TO REVEAL BACK BARS ////////////////////////////////
d3.select('#button1').on('click', function() { var pedroia = [
{"rate":8.4, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":12.1, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":25.5, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":13.3, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":23.1, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":14.7, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":8.8, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":17.2, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":7.4, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":8.5, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":15.9, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":14.9, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":7.3, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":6.1, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."}
]; svg.selectAll(".front_rect") .data(pedroia) .transition().delay(0).duration(1000).ease('cubic-in-out') .attr("x", 0) .attr("width", function(d) {return xScale(d.rate);}) .attr("fill", "#990000")
//Create labels
var redrawFrontLabels = svg.selectAll("text") .data(pedroia) .text(function(d) {return d.rate;}) .attr('opacity',0) .attr("text-anchor", "end") .attr("y", function(d, i) {return yScale(i) + (yScale.rangeBand() / 2) + 4;}) .attr("x", function(d) {return xScale(d.rate) - 12;}) .attr("font-family", "sans-serif") .attr("font-size", "1em") .attr("fill", "#fff");
redrawFrontLabels.transition().delay(500).duration(500) .attr('opacity',1);
});
//REDRAW (GROW) FRONT BARS TO RE-HIDE BACK BARS///////////////////////////////
d3.select('#button2').on('click', function() { var pedroia = [
{"rate":40, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":33, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":31, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":25, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":25, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":20, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":19, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":18, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":17, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":17, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":16, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":16, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":13, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."},
{"rate":11, "tooltip":"While having more the 40% of their children born into poverty, Ireland uses taxes and transfers to bring that number down to 8.9%."}
]; svg.selectAll(".front_rect") .data(pedroia) .transition().delay(0).duration(1000).ease('cubic-in-out') .attr("x", 0) .attr("width", function(d) {return xScale(d.rate);}) .attr("fill", "#990000")
//Create labels
var redrawFrontLabels = svg.selectAll("text") .data(pedroia) .text(function(d) {return d.rate;}) .attr('opacity',0) .attr("text-anchor", "end") .attr("y", function(d, i) {return yScale(i) + (yScale.rangeBand() / 2) + 4;}) .attr("x", function(d) {return xScale(d.rate) - 12;}) .attr("font-family", "sans-serif") .attr("font-size", "1em") .attr("fill", "#fff");
redrawFrontLabels.transition().delay(500).duration(500) .attr('opacity',1);
});
// HORIZONTAL AXIS WITH TICKS AND NUMBERS
var hAxis = d3.svg.axis() .scale(xScale) .orient('top') .ticks(10);
var hGuide = d3.select('svg') .append('g') .attr('class','hAxis_group') hAxis(hGuide) hGuide.attr('transform','translate('+ margin.left+','+ margin.top +')') hGuide.selectAll('path') .style({fill:'none',stroke:'#990000', 'stroke-width':1}) hGuide.selectAll('text') .style({fill:'#990000', 'font-family':'Helvetica, sans-serif', 'font-size':'0.8em'})
// VERTICAL AXIS WITH TICKS AND NUMBERS
var vAxis = d3.svg.axis() .scale(yScale) .orient('left') .tickFormat( function(index) { var labels = ["Ireland","UK","Romania","Canada","United States","Portugal","France","Spain","Czech Republic","Germany","Italy","Japan","Sweden","Netherlands"]; return labels[index]; });
var vGuide = d3.select('svg') .append('g') .attr('class','vAxis_group') vAxis(vGuide) vGuide.attr('transform','translate('+ margin.left+','+ margin.top +')') vGuide.selectAll('path') .style({fill:'none',stroke:'#990000', 'stroke-width':1}) vGuide.selectAll('text') .style({fill:'#990000', 'font-family':'Helvetica, sans-serif', 'font-size':'0.8em'})
| Developer | Shannon Range |
| Username | silentkrange |
| Uploaded | October 16, 2022 |
| Rating | 3 |
| Size | 4,617 Kb |
| Views | 24,288 |
Do you need developer help for D3 Bar Chart - Poverty Rate - FINAL?
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!
Shannon Range (silentkrange) Script Codes
| Name | Size |
| Dropdown menu with image change on hover | 2,747 Kb |
| A Pen by Shannon Range | 1,865 Kb |
| Count up with commas | 4,999 Kb |
| D3 Productivity-Wage Gap bar chart | 3,647 Kb |
| D3 again - | 3,264 Kb |
| SVG line graph | 3,645 Kb |
| Animated bar charts in sequence | 2,195 Kb |
| Ask New Questions | 3,041 Kb |
| Ammap3 - US heat map | 3,177 Kb |
| Animated line graph with HighCharts | 2,113 Kb |
Create amazing web content 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 |
| A Pen by Bryan | Brydave | 2,286 Kb |
| Compare resources on mobile sites | Gyusza | 3,226 Kb |
| Siema - add pagination to prototype | Pawelgrzybek | 2,575 Kb |
| Simple, flat contact form | Zeaklous | 2,719 Kb |
| RPG Style Text Dialogue | Odylic | 2,635 Kb |
| Fullscreen Parallax | Bassta | 3,313 Kb |
| A Bouncy Menu Toggle | Billyysea | 4,563 Kb |
| Progressively reveal dots on a Bezier curve | GreenSock | 2,489 Kb |
| Pagepilling.js | Blossk | 6,554 Kb |
| NT Tribute | Skybutterfly | 2,850 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!