Skip to content

Instantly share code, notes, and snippets.

@waseemnawaz
Created October 5, 2020 18:59
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save waseemnawaz/0bb7e517aca75ece44e7bdaf30a55faf to your computer and use it in GitHub Desktop.
Save waseemnawaz/0bb7e517aca75ece44e7bdaf30a55faf to your computer and use it in GitHub Desktop.
//the data
var data = [];
for(var i = 0; i < 20; i++){
var randomNumber = Math.floor(Math.random()*25)
data.push(randomNumber)
//console.log(data)
}
console.log(data)
//var data = [6,20,21,14,2,30,7,16,25,5,11,28,10,26,9];
//create the svg
var chart_height = 400
var chart_width = 800
var padding = 50
var svg = d3.select('#chart')
.append('svg')
.attr('width', chart_width)
.attr('height', chart_height)
.attr('fill', 'white')
//.append('svg')
//create the scales
var x_scale = d3.scaleBand()
.domain(d3.range(data.length))
.rangeRound([padding, chart_width - padding])
.paddingInner(0.05)
var y_scale = d3.scaleLinear()
.domain([d3.min(data, function(d){
return d
}), d3.max(data, function(d){
return d
})])
.rangeRound([100, chart_height - 100])
//create the rectangles
svg.selectAll('rect')
.data(data)
.enter()
.append('rect')
.attr('x', function(d, i){
return x_scale(i)
})
.attr('y', function(d){
return chart_height - y_scale(d)
})
.attr('height', function(d){
return y_scale(d)
})
.attr('width', x_scale.bandwidth())
.attr('fill', 'magenta')
//mouseevent
d3.select('button').on('click', function(){
data = [];
for(var i = 0; i < 20; i++){
var randomNumber = Math.floor(Math.random()*25)
data.push(randomNumber)
//console.log(data)
}
x_scale.domain(d3.range(data.length))
svg.selectAll('rect')
.data(data)
.transition()
.ease(d3.easeElasticOut)
.duration(1000)
.delay(function(d, i){
return i/data.length * 1000
})
.attr('y', function(d){
return chart_height - y_scale(d)
})
.attr('height', function(d){
return y_scale(d)
})
.attr('fill', function(d){
//return "rgb(0, 0, " + Math.round(d * 10) + ")";
return "rgb(" + Math.round(d * 25) + ", 0, " + Math.round(d * 15) + ")";
})
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>D3 Bar Chart</title>
<link rel="stylesheet" type="text/css" href="style.css">
</head>
<body>
<div id="chart"></div>
<hr>
<button type="button">Update</button>
<script src="https://d3js.org/d3.v5.js"></script>
<script src="app1.js"></script>
</body>
</html>
#chart{
width: 800px;
height: 400px;
background-color: #f7f7f7;
margin: 25px auto;
}
.bar{
display: inline-block;
width: 25px;
height: 300px;
background-color: #7ED26D;
margin-right: 5px;
}
button{
display: block;
margin: 0 auto;
}
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment