Skip welcome & menu and move to editor
Welcome to JS Bin
File
Add library
Share
Login or Register
Blog
Help
Load cached copy from
  • Run with JS
  • Save
  • Share
  • …
 
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>JS Bin</title>
<style type="text/css">
        div.bar {
            display: inline-block;
            width: 20px;
            height: 75px;   /* Gets overriden by D3-assigned height below */
            margin-right: 2px;
            background-image: url('http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+australia+rubber+duck+1.jpg');
            background-size: cover;
            background-repeat: no-repeat;
          }
    </style>
<script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
  
</head>
<body>
  
        <script type="text/javascript"> 
            var dataset = [ 25, 7, 5];
            var coverset=['http://4.bp.blogspot.com/-HWtqJNu3blk/UOhy_vj2I3I/AAAAAAAAhdY/U-krgiDfksw/s640/sydney+australia+rubber+duck+1.jpg', 
            'http://fora.mtv.ca/wp-content/uploads/2012/09/catsofinstagram.jpg',
'http://www.dogbreedinfo.com/images22/NorthernInuitDogWhiteThunder10Months.jpg',
            ]
            var bar = d3.select("body").selectAll("div")
                .data(dataset)
                .enter()
                .append("div")
                .attr("class", "bar")
                .style("height", function(d) {
                    var barHeight = d * 5;
                    return barHeight + "px";
                })
                .style("width", function(d) {
                    var barWidth = d * 5;
                    return barWidth + "px";
                })
               .style("background-image", function(d, i){
                    return "url(" + coverset[i] +")";
                });
​
        </script>  
</body>
</html>
Output

You can jump to the latest bin by adding /latest to your URL

Dismiss x
public
Bin info
anonymouspro
0viewers