US GDP Bar Chart
How do I make an us gdp bar chart?
Made with D3.js. What is a us gdp bar chart? How do you make a us gdp bar chart? This script and codes were developed by Katie Inkblotty on 08 August 2022, Monday.
US GDP Bar Chart - Script Codes HTML Codes
<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>US GDP Bar Chart</title> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div class="chart-box"> <h1>US GDP per Quarter</h1> <div id="chart"></div>
</div> <script src='http://cdnjs.cloudflare.com/ajax/libs/d3/3.5.16/d3.min.js'></script>
<script src='http://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.2/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>
US GDP Bar Chart - Script Codes CSS Codes
body { font-family: Arial, sans-serif; background-color: #f8f8ff; color: #3B4E32;
}
.chart-box h1 { margin: 2% 0 0 1%;
}
.chart-box { border: 1px solid #70db03; overflow-x: scroll; padding: 2% 0.6%;
}
.bar { fill: #56A902; cursor: pointer;
}
.tooltip { border: 1px solid #5bb302;
}
.hidden { opacity: 0;
}
US GDP Bar Chart - Script Codes JS Codes
var dataSet;
var width,height,fontSize,barWidth,labelHeight,padding;
$.ajax({ dataType: "json", url: 'https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json'
}) .done(function(data) { dataSet = data.data; height = 200; fontSize = 14; padding = 10; barWidth = 40; width = (barWidth + padding) * dataSet.length; labelHeight = fontSize + padding; var barChart = d3.select('#chart').append('svg') .attr('width', width) .attr('height', height + labelHeight); var yScale = d3.scale.linear() .domain([0, d3.max(dataSet, function(d) { return d[1]; })]) .range([0, height - labelHeight]); function dateFormatter(d) { // '1999-04-01' example input if (d.slice(5,7) == '10') { return d.slice(5,7) + '/' + d.slice(0,4) } else { return d.slice(6,7) + '/' + d.slice(0,4); } } barChart.selectAll('rect') .data(dataSet) .enter() .append('svg:rect') .classed('bar', true) .attr({ x: function(d,i) { return barWidth * i + padding * i }, y: function(d) { return height - yScale(d[1]) }, 'font-size': fontSize, width: barWidth, height: function(d) { return yScale(d[1]) } }) .on('mouseover', function(d,i) { $(`#tooltip${i}`).removeClass('hidden'); }) .on('mouseout', function(d,i) { $(`#tooltip${i}`).addClass('hidden'); }); barChart.selectAll('text.quarter') .data(dataSet) .enter() .append('svg:text') .classed('label', true) .text(function(d) {return dateFormatter(d[0])}) .attr({ x: function(d,i) { return barWidth * i + padding * i }, y: function() { return height + labelHeight }, "font-size": 10 }); var tooltips = barChart.selectAll('text.tooltip') .data(dataSet) .enter() .append('svg:text') .classed('tooltip hidden', true) .text(function(d) { return dateFormatter(d[0]) + ': ' + 'GDP ' + d[1] }) .attr({ x: function(d,i) { if (i > dataSet.length - 4) { return ((barWidth + padding) * 272) - 25} else { return (barWidth + padding) * i}}, y: function(d) { return height - yScale(d[1]) - padding}, id: function(d, i) { return `tooltip${i}` } }); });
Developer | Katie Inkblotty |
Username | inkblotty |
Uploaded | August 08, 2022 |
Rating | 3 |
Size | 2,915 Kb |
Views | 50,600 |
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 |
Weather App | 3,881 Kb |
Random Quote Generator | 2,980 Kb |
Angular Task App | 3,169 Kb |
React Redux Task App | 3,587 Kb |
Cycling D3 Scatterplot | 4,439 Kb |
Star Wars search | 3,521 Kb |
Portfolio Clone for FreeCodeCamp | 5,223 Kb |
React Recipe Box | 13,583 Kb |
Twitch Live Channels | 4,956 Kb |
Wiki Search Clone | 4,800 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 |
Faces SVG animation | ScavengerFrontend | 2,957 Kb |
Caputre Cam with JS | KimmoCommit | 2,795 Kb |
Flat iOS 7 Safari Icon | Rss | 3,332 Kb |
Tile Animation Thing | Frxnz | 4,332 Kb |
Pomodoro Clock | Yas46 | 3,328 Kb |
Long Shadow Button | Uixcrazy | 3,550 Kb |
V.35 The Monolith Update - Hero Release Notes | Jordan | 12,045 Kb |
Simple Responsive Text | Fbrz | 2,282 Kb |
Loading animation with css | Icebob | 2,947 Kb |
NeeilTimer | Neeilan | 2,836 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!