Made with d3.js
Forked from Alexis DUCERF's Pen Chart bar.
<div id="graphBar"></div> |
function graphBar() { | |
var data, height, margin, svg, width, x, xAxis, y, yAxis; | |
data = [ | |
{ | |
"name": "Louisa Spence", | |
"value": 32 | |
}, | |
{ | |
"name": "Viola Terry", | |
"value": 27 | |
}, | |
{ | |
"name": "Ola Forbes", | |
"value": 7 | |
}, | |
{ | |
"name": "Patty Gilbert", | |
"value": 38 | |
}, | |
{ | |
"name": "Norris Morris", | |
"value": 24 | |
}, | |
{ | |
"name": "Wilkins Huffman", | |
"value": 5 | |
}, | |
{ | |
"name": "Harriet Wheeler", | |
"value": 28 | |
}, | |
{ | |
"name": "Mcintosh Brewer", | |
"value": 21 | |
}, | |
{ | |
"name": "Robyn Bullock", | |
"value": 10 | |
}, | |
{ | |
"name": "Slater Chavez", | |
"value": 29 | |
} | |
]; | |
margin = { | |
top: 0, | |
right: 40, | |
bottom: 100, | |
left: 50 | |
}; | |
width = 600; | |
height = 400; | |
x = d3.scale.ordinal().domain(data.map(function(d) { | |
return d.name; | |
})).rangeRoundBands([0, width], .1); | |
y = d3.scale.linear().domain([ | |
0, d3.max(data, function(d) { | |
return d.value; | |
}) | |
]) | |
.range([height, 0]); | |
xAxis = d3.svg | |
.axis() | |
.scale(x) | |
.orient('bottom'); | |
yAxis = d3.svg | |
.axis() | |
.scale(y) | |
.orient('left'); | |
svg = d3.select('#graphBar').append('svg') | |
.attr('height', height + margin.top + margin.bottom) | |
.attr('width', width + margin.left + margin.right) | |
.append('g') | |
.attr('transform', "translate(" + margin.left + ", " + margin.top + ")"); | |
svg.append('g') | |
.attr('class', 'axis x') | |
.attr('class','bottom') | |
.attr('transform', "translate(0, " + height + ")") | |
.call(xAxis); | |
svg.append('g') | |
.attr('class', 'axis y') | |
.call(yAxis); | |
svg.selectAll('.bar') | |
.data(data) | |
.enter() | |
.append('rect') | |
.attr('fill','#81c784') | |
.attr('x', function(d) { | |
return x(d.name); | |
}) | |
.attr('y', height) | |
.attr('height', 0) | |
.attr('width', x.rangeBand()) | |
.transition() | |
.duration(1500) | |
.ease('elastic') | |
.delay(function(d, i) { | |
return i * 35; | |
}) | |
.attr('y', function(d) { | |
return y(d.value); | |
}) | |
.attr('height', function(d) { | |
return height - y(d.value); | |
}); | |
} | |
graphBar(); | |
setInterval(function(){ | |
$('svg').remove(); | |
graphBar(); | |
}, 2500); | |
<script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> | |
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script> |
@import "compass/css3"; | |
body { | |
background-color : #EDE9E6; | |
} | |
#graphBar { | |
margin: 40px; | |
.axis path, .axis line, path.domain { | |
fill: none; | |
stroke: #ababab; | |
stroke-width: 1 ; | |
} | |
.bottom text { | |
@include transform(rotate(-60deg) translateY(-10px) translateX(-10px)); | |
text-anchor : end !important; | |
font-size: 12px; | |
} | |
} |