Visualize US GDP Data with a Bar Chart

Developer
Codoer
Size
7,811 Kb
Views
10,120
  1. Visualize US GDP Data with a Bar Chart Previews
  2. Visualize US GDP Data with a Bar Chart HTML Codes
  3. Visualize US GDP Data with a Bar Chart CSS Codes
  4. Visualize US GDP Data with a Bar Chart JS Codes

How do I make an visualize us gdp data with a bar chart?

What is a visualize us gdp data with a bar chart? How do you make a visualize us gdp data with a bar chart? This script and codes were developed by Codoer on 07 December 2022, Wednesday.

Visualize US GDP Data with a Bar Chart Previews
IQ Test

Visualize US GDP Data with a Bar Chart - Script Codes HTML Codes

<!DOCTYPE html>
<html >
<head> <meta charset="UTF-8"> <title>Visualize US GDP Data with a Bar Chart</title> <link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css'> <link rel="stylesheet" href="css/style.css">
</head>
<body> <div id='app'></div> <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.5.0/d3.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/react/15.4.2/react-dom.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.1/jquery.min.js'></script> <script src="js/index.js"></script>
</body>
</html>

Visualize US GDP Data with a Bar Chart - Script Codes CSS Codes

body { background-image: url("http://cdn.backgroundhost.com/backgrounds/subtlepatterns/green_dust_scratch.png");
}
.chart { text-align: center; margin-top: 100px;
}
.hidden { display: none;
}
.tooltip1 { width: 130px; height: auto; padding: 3px; background-color: #b2b2b2; border-radius: 10px; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4); pointer-events: none;
}
svg { background: white; box-shadow: 4px 4px 10px rgba(0, 0, 0, 0.4);
}

Visualize US GDP Data with a Bar Chart - Script Codes JS Codes

'use strict';
function _classCallCheck(instance, Constructor) { if (!(instance instanceof Constructor)) { throw new TypeError("Cannot call a class as a function"); } }
function _possibleConstructorReturn(self, call) { if (!self) { throw new ReferenceError("this hasn't been initialised - super() hasn't been called"); } return call && (typeof call === "object" || typeof call === "function") ? call : self; }
function _inherits(subClass, superClass) { if (typeof superClass !== "function" && superClass !== null) { throw new TypeError("Super expression must either be null or a function, not " + typeof superClass); } subClass.prototype = Object.create(superClass && superClass.prototype, { constructor: { value: subClass, enumerable: false, writable: true, configurable: true } }); if (superClass) Object.setPrototypeOf ? Object.setPrototypeOf(subClass, superClass) : subClass.__proto__ = superClass; }
var Bar = function (_React$Component) { _inherits(Bar, _React$Component); function Bar() { _classCallCheck(this, Bar); return _possibleConstructorReturn(this, _React$Component.apply(this, arguments)); } Bar.prototype.componentDidMount = function componentDidMount() { $.getJSON('https://raw.githubusercontent.com/c0d0er/D3-Visualize-Data-with-a-Bar-Chart/master/usgdp.json', function (data) { var info = data.data; var info1 = data; var prev = undefined; //to set up different color of gdp bar; var margin = { top: 60, right: 80, bottom: 80, left: 80 }; var w = 1000 - margin.right - margin.left; var h = 500 - margin.top - margin.bottom; var dollarSign = d3.format('$,.2f'); var months = ['January', 'February', 'March', 'April', 'May', 'June', 'July', 'August', 'September', 'October', 'November', 'December']; /*let xScale=d3.scaleLinear() .domain([0, d3.max(info, d=>d[1])]) //.range([padding, w-padding*2]); .range([padding, w-40]);*/ var yScale = d3.scaleLinear().domain([0, d3.max(info, function (d) { return d[1]; })]).range([h, 0]); var duration = 500, delay = 50; //for ease function; var minTime = new Date(info[0][0]); var maxTime = new Date(info[info.length - 1][0]); var xScale = d3.scaleTime().domain([minTime, maxTime]).range([0, w]); //console.log(xScale('')) var div = d3.select('.chart').append('div'); //setup tooltip; var svg = d3.select('.chart').append('svg').attr('width', w + margin.right + margin.left).attr('height', h + margin.top + margin.bottom) //.call(responsivefy)//set responsive d3; .append("g").attr("transform", "translate(" + margin.left + "," + margin.top + ")"); svg.selectAll('rect').data(info).enter().append('rect') //.attr('x', (d,i)=>i*(w/info.length))//without chart animation/grows to bottom; .attr('x', 0) //make chart grow to top and from left //.attr('y', (d) => yScale(d[1]))//without chart animation/grows to bottom; .attr('y', h) //make chart grows to top;//make chart grow to top and from left .attr('width', w / info.length) //.attr('height', (d)=>h-yScale(d[1]))//without chart animation; .attr('height', 0) //make chart grows to bottom; //.attr('height', 0)//make chart grow to top and from left //.attr('fill', '#2b5797') .attr('fill', function (d) { if (prev > d[1]) { prev = d[1];return '#ee1111'; } else { prev = d[1];return '#00a300'; } }).attr('stroke', '#2b5797').on('mouseover', function (d) { var year = d[0].slice(0, 4); var month = Number(d[0].slice(5, 7)) - 1; d3.select(this) //.attr('fill', '#b2b2b2'); .style('opacity', '0.3'); div.html('<div class="tooltip1"><span class="gdp">' + dollarSign(d[1]) + ' Billion</span><br><span class="year">' + year + '-' + months[month] + '</span></div>').style('display', 'inline').style("left", d3.event.clientX + 5 + "px").style("top", d3.event.clientY - 50 + "px").style('position', 'absolute').classed('hidden', false); }).on('mouseout', function () { d3.select(this).style('opacity', '1'); // .attr('fill', '#2b5797'); d3.select('.tooltip1').classed('hidden', true); }).transition().duration(function () { return duration += 25; }) //.ease(d3.easeElasticInOut)//cause height errors in console; .ease(function () { var _d; //console.log(args) var ease = (_d = d3).easeElasticInOut.apply(_d, arguments); //console.log(ease) return ease < 0 ? 0 : ease; }) //.ease(d3.easeBounceOut) .delay(function () { return delay += 3; }) //.duration(10000) //.ease(d3.easeExpOut) //.delay(500) //.attr("x", (d,i)=>i*(w/info.length))//make chart grows to bottom; .attr("x", function (d, i) { return i * (w / info.length); }) //make chart grows to top and bottom; // .attr("y", (d)=>yScale(d[1]))//make chart grows to top; .attr("y", function (d) { return yScale(d[1]); }) //make chart grow to top and from left .attr("height", function (d) { return h - yScale(d[1]); }); //make chart grows to top and bottom; //.append('svg:title')//simple tooltip //.text(d=>d[1]);//simple tooltip // gridlines in x axis function function make_x_gridlines() { return d3.axisBottom(xScale).ticks(10); } // gridlines in y axis function function make_y_gridlines() { return d3.axisLeft(yScale).ticks(6); } // add the X gridlines svg.append("g").attr("class", "grid").attr("transform", "translate(0," + h + ")").attr('opacity', 0.2).style("stroke-dasharray", "1").call(make_x_gridlines().tickSize(-h).tickSizeOuter(0).tickFormat("")); // add the Y gridlines svg.append("g").attr("class", "grid").style("stroke-dasharray", "5 5").attr('opacity', 0.2).call(make_y_gridlines().tickSize(-w).tickSizeOuter(0).tickFormat("")); svg.selectAll(".tick > line").each(function (d) { if (d.getFullYear && d.getFullYear() === 2015) { //d===2000 will delete y axis 2000 line; this.remove(); } else if (d === 18000) { this.remove(); } }); svg.append('g').attr('class', 'axis').attr('transform', 'translate(0,' + h + ')').style('font-size', '15px').call(d3.axisBottom(xScale)); svg.append("text").attr("transform", "translate(" + w / 2 + " ," + -17 + ")").style("text-anchor", "middle").attr('fill', '#2d89ef').style('font-size', '2.2em').text("Gross Domestic Product (U.S.)"); svg.append("text").attr("transform", "translate(" + w / 2 + " ," + (h + 45) + ")").style('font-size', '0.8em').style("text-anchor", "middle").text(info1.description.slice(0, info1.description.length / 2 + 61)); svg.append('a').attr('xlink:href', info1.description.slice(info1.description.length / 2 + 63, info1.description.length - 1)).attr('target', '_blank').append("text").attr("transform", "translate(" + w / 2 + " ," + (h + 60) + ")").style('font-size', '0.8em').style("text-anchor", "middle").text(info1.description.slice(info1.description.length / 2 + 61)); //.on('click', ()=>{ // window.open(info1.description.slice(info1.description.length/2+63, info1.description.length-1)) // }); var concatFormat = function concatFormat(format, suffix) { return function (d) { return d3.format(format)(d) + suffix; }; }; svg.append('g').attr('class', 'axis').attr('transform', 'translate(' + 0 + ',0)').style('font-size', '15px').call(d3.axisLeft(yScale) //.ticks(20) .tickFormat(concatFormat('$,', 'B')) //.tickFormat(d3.format('$,')) ); svg.append("text").attr("transform", "rotate(-90)").attr("y", 0).attr("x", 0).attr("dy", "1.5em").style("text-anchor", "end").text("Gross Domestic Product, USA"); /* function responsivefy(svg) {// responsive d3 var container = d3.select(svg.node().parentNode), width = parseInt(svg.style("width")), height = parseInt(svg.style("height")), aspect = width / height; svg.attr("viewBox", "0 0 " + width + " " + height) .attr("preserveAspectRatio", "xMinYMid") .call(resize); d3.select(window).on("resize." + container.attr("id"), resize); function resize() { var targetWidth = parseInt(container.style("width")); svg.attr("width", targetWidth); svg.attr("height", Math.round(targetWidth / aspect)); } } */ }); }; Bar.prototype.render = function render() { return React.createElement('div', { className: 'chart' }); }; return Bar;
}(React.Component);
ReactDOM.render(React.createElement(Bar, null), document.getElementById('app'));
Visualize US GDP Data with a Bar Chart - Script Codes
Visualize US GDP Data with a Bar Chart - Script Codes
Home Page Home
Developer Codoer
Username c0d0er
Uploaded December 07, 2022
Rating 3
Size 7,811 Kb
Views 10,120
Do you need developer help for Visualize US GDP Data with a Bar Chart?

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!

Codoer (c0d0er) Script Codes
Name
Visualize Data with a Heat Map
Jd wiki
Game of Life React
Pomodoro Clock
React Camper Leaderboard
Game of Life
Visualize Data with a Scatterplot Graph
Nikola Tesla Tribute Page
Pomodoro positions
Visualize Meteorites Map Data Across the Globe
Create amazing captions 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!