U.S. Gross Domestic Product of the United States

Developer
Bob Sutton
Size
3,085 Kb
Views
36,432
  1. U.S. Gross Domestic Product of the United States Previews
  2. U.S. Gross Domestic Product of the United States HTML Codes
  3. U.S. Gross Domestic Product of the United States CSS Codes
  4. U.S. Gross Domestic Product of the United States JS Codes

How do I make an u.s. gross domestic product of the united states?

A vertical bar graph that makes use of D3.js to plot the GDP of the United States from 1947 to 2015.. What is a u.s. gross domestic product of the united states? How do you make a u.s. gross domestic product of the united states? This script and codes were developed by Bob Sutton on 11 September 2022, Sunday.

U.S. Gross Domestic Product of the United States Previews
IQ Test

U.S. Gross Domestic Product of the United States - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>U.S. Gross Domestic Product of the United States</title> <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Open+Sans'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <h3 style="text-align: center">Gross Domestic Product of the United States</h3>
<div id="graph"> <svg></svg> <p id="source-info"></p>
</div> <script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js'></script>
<script src='https://d3js.org/d3.v3.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

U.S. Gross Domestic Product of the United States - Script Codes CSS Codes

body
{ background-color: #eeffe6;
}
.axis path, .axis line
{ fill: none; stroke: black; shape-rendering: crispEdges;
}
.axis text
{ font-family: sans-serif; font-size: 11px;
}
rect:hover
{ fill: cyan;
}
#source-info
{ text-align: center;
}
#graph
{ margin-left: auto; margin-right: auto; width: 1000px;
}
h3, p, svg
{ font-family: Open Sans
}
h3
{ margin-top: 20px;
}

U.S. Gross Domestic Product of the United States - Script Codes JS Codes

$.ajax(
{ url: "https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json", method: "GET", dataType: "json", crossDomain: true, success: onSuccess, error: onError
});
function onError(xhr)
{ console.log("Error occurred"); console.log(JSON.stringify(xhr));
}
var months = ["Jan", "Feb", "Mar", "Apr", "May", "Jun", "Jul", "Aug", "Sep", "Oct", "Nov", "Dec"];
function dataEntry2Tooltip(entry)
{ // Parse date var a = entry[0].split("-"); var date = months[a[1] - 1] + " " + Number(a[0]); if (entry[1] < 1000) var gdp = " -- $" + entry[1] + " billion"; else { var s = "" + entry[1]; var ndx = s.indexOf("."); if (ndx < 0) ndx = s.length - 3; else ndx -= 3; s = s.replace(".", ""); s = s.substring(0, ndx) + "." + s.substring(ndx); var gdp = "$" + s + " trillion"; } return date + " - " + gdp;
}
function onSuccess(json)
{ var data; var xScale, yScale; var width = 900; var height = 500; var barPadding = 1; var topPadding = 25; var xAxisOffset = 50; var yAxisOffset = 75; data = json.data; xScale = d3.scale.linear() .domain([0, data.length]) .range([0, width]); var yScale = d3.scale.linear() .domain([0, d3.max(data, function(d) { return d[1]; })]) .range([height, 0]); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); var xAxisScale = d3.scale.linear() .domain([d3.min(data, function(d) { return Number(d[0].split("-")[0]); }), d3.max(data, function(d) { return Number(d[0].split("-")[0]); } ) ]) .range([0, width]); var xAxis = d3.svg.axis() .scale(xAxisScale) .orient("bottom") .tickFormat(d3.format("4d")); var svg = d3.select("svg") .attr("width", width + yAxisOffset) .attr("height", height + xAxisOffset * 2); svg.selectAll("rect") .data(data) .enter() .append("rect") .attr("stroke", "black") .attr("fill", "blue") .attr("x", function(d, i) { return xScale(i) + yAxisOffset; }) .attr("y", function(d) { return yScale(d[1]) + topPadding; }) .attr("width", xScale(1) - barPadding) .attr("height", function(d) { return height - yScale(d[1]); }) .append("title") .text(dataEntry2Tooltip); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + yAxisOffset + ", " + (height + topPadding + 5) + ")") .call(xAxis); svg.append("g") .attr("class", "axis") .attr("transform", "translate(" + yAxisOffset + ", " + topPadding +")") .call(yAxis) .append("text") .attr("transform", "rotate(-90)") .attr("y", 10) .attr("dy", "0.71em") .style("text-anchor", "end") .text("GDP (in billions of $)"); $("#source-info").html(json.description.replace("\n", "<br />"));
}
U.S. Gross Domestic Product of the United States - Script Codes
U.S. Gross Domestic Product of the United States - Script Codes
Home Page Home
Developer Bob Sutton
Username anischyros
Uploaded September 11, 2022
Rating 3
Size 3,085 Kb
Views 36,432
Do you need developer help for U.S. Gross Domestic Product of the United States?

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!

Bob Sutton (anischyros) Script Codes
Name
The Game of Life
The Mark Twain Random Quote Machine
Git Markup Language Editor
The Recipe Engine
Winston Churchill
Contiguity Graph of Countries
Life in a Dungeon
Pomodoro Clock
Worldwide Meteor Strikes Map
FreeCodeCamp Leader Board
Create amazing art & images 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!