no_sirve

index.html

<div id="graphBar"></div>

no_sirve.markdown

no_sirve

Made with d3.js

Forked from Alexis DUCERF's Pen Chart bar.

A Pen by rcardo on CodePen.

License.

script.js

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);

scripts

<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>

style.css

@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;
    }
}