Bar Graph

In this example below you will see how to do a Bar Graph with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by Cylthus, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright Cylthus ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Bar Graph</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  <h1>GDP Over Time</h1>
  <script src='https://cdnjs.cloudflare.com/ajax/libs/d3/4.9.1/d3.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

/*Downloaded from https://www.codeseek.co/Cylthus/bar-graph-brXYaZ */
@import url('https://fonts.googleapis.com/css?family=Open+Sans');
svg{
	background-color:white;
	transform:scaleY(-1);
	border-radius:30px;
}
body{
	width:100%;
	height:100%;
	margin:0px;
	display:flex;
	flex-direction:column;
	align-items:center;
	justify-content:center;
	background-color:lightgreen;
}
.tip{
	background-color:white;
	padding:10px;
	border-radius:15px;
	border:3px solid grey;
	font-family:Open Sans;
	font-size:12px;
	
	
}
h1{
	color:white;
	font-family:Open Sans;
}

/*Downloaded from https://www.codeseek.co/Cylthus/bar-graph-brXYaZ */
var dates = [];
var amount = [];
var scaleToSize = d3.scaleLinear().domain([0,19000]).range([0,400]);
d3.json("https://raw.githubusercontent.com/FreeCodeCamp/ProjectReferenceData/master/GDP-data.json",(data)=>{
	for(var i = 0; i < data.data.length;i++){
		dates.push(data.data[i][0]);
		amount.push(data.data[i][1]);
	}
	var graph = canvas.selectAll("rect")
			.data(amount)
			.enter()
				.append("rect").attr("class","bar")
				.attr("fill","#90EE90")
				.attr("width",3)
				.attr("height",(d)=>{return scaleToSize(d)})
				.attr("x",(d,i)=>{
					return i*2+50;
				})
	.attr("y",50)

	d3.selectAll(".bar")
        .on("mouseover", function() {
            d3.select(this)
            	.attr("fill", "#c1f4c1");
		tooltip.style("display", null);
		
        })
        .on("mouseout", function(d, i) {
            d3.select(this).attr("fill","lightgreen");
		tooltip.style("display", "none");
        }) 

.on("mousemove", function(d,i) {
		tooltip.select("div").html("<strong>Date:</strong> " + dates[i] + "<br/><strong>Amount:</strong> " + amount[i])
    .style("position", "fixed").style("display","relative")
    .style("left", (d3.event.pageX+28) + "px")
    .style("top", (d3.event.pageY - 28) + "px")

});

var tooltip = d3.select("body").append("div")
  .attr("class", "tooltip").style("display","none");


tooltip.append("div").attr("class","tip")
  .attr("x", 15)
  .attr("dy", "1.2em")
  .style("text-anchor", "middle")
  .attr("font-size", "1.5em")
  .attr("font-weight", "bold");

});

var canvas = d3.select("body")
						.append("svg")
						.attr("width",650)
						.attr("height",450)
						.attr("viewBox","0 0 700 500")
						.attr("preserveAspectRatio","xMidYMid meet");
;

Comments