D3 Examples - D3: Binding Data

xxxxxxxxxx
 
<!DOCTYPE html>
<html lang='en'>
    <head>
        <meta charset='utf-8'>
        <title>Issues</title>
        <script type='text/javascript' src='https://d3js.org/d3.v3.js'></script>
        <style type='text/css'>
        body {
                color: #FFFFFF;
                font-family: 'Open Sans',Helvetica,arial,sans-serif;
                line-height: 42px;
        }
        h1 {
                font-weight: 600;
                text-transform: uppercase;
        }
        h1 a {
            color: #36435A;
            text-decoration: none;
​
        }
        h1 a:hover {
            text-decoration: underline;
        }
        header {
            width: 100%;
            color: #36435A;
        }
        hr {
            border: 2px solid #36435A;
        }
        .standout a {
            color: #36435A;
            font-size: 32px;
            font-weight: 600;
            text-decoration: none;
        }
        .standout a:hover {
            text-decoration: underline;
        }   
        svg {
            background: #FFFFFF;
        }
        </style>
    </head>
    <body>
        <header>
        <h1>open issues</h1>
        <p>from the top 150 data visualization repos on <span class='standout'><a href='https://gitub.com'>GitHub</a></span> (data accessed March 2015)</p>
        <hr>
        </header>
                
        <script type='text/javascript'>
        var width = '100%';
        var height = 7000;
        var svg = d3.select('body')
        .append('svg')
        .attr('width', width)
        .attr('height', height);
        
        d3.csv('github-api-visualization-cleaned.csv', function(data) {
                        
        data.sort(function(a,b){
         return d3.descending(+a.open_issues_count,+b.open_issues_count);
        });
        
        svg.selectAll('rect')
        .data(data.filter(function(d){return+d.open_issues_count >=1;}))
        .enter()
        .append('rect')
        .attr('width',0)
        .attr("fill","#fff")
        .transition()
        .duration(2000)
        .attr('x',0)
        .attr('y',function(d,i){
            return i*50;
        })
        .attr('width',function(d){
            return d.open_issues_count*5;
        })
        .attr('height',20)
        .attr('fill','#3A96B7');
        
        svg.selectAll('text')
        .data(data.filter(function(d){return+d.open_issues_count >=1;}))
        .enter()
        .append('text')
        .text(function(d) {
                return d.name + ' (' + d.open_issues_count + ' open issues)';
        })
        .attr('fill','#36435A')
        .attr('x',0)
        .attr('y', function(d,i) {
        return i*50+35;
        });
           
        });
    </script>
    </body>
</html>
​
​
    