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>
    <title>Layered Bar Chart</title>
    <script src="http://d3js.org/d3.v3.min.js" charset="utf-8"></script>
</head>
<body>
<script>
var dataArray = [10, 20, 40, 60];
​
var canvas = d3.select("body")
    .append("svg")
        .attr("width", 500).attr("height", 500);
​
var bars = canvas.selectAll("rect")
    .data(dataArray)
    .enter()
    .append("rect")
        .attr('class', 'base')
        .attr("width", function(d){
            return d * 10;
        })
        .attr("height", 30)
        .attr("y", function(d, i){
            return i * 35;
        })
        .attr("fill", "blue");
        //.attr("fill-width", "green");
        
/*
canvas.append("text")
    .text(function(d){
        return d;
    }).attr;
*/
​
var dataArray1 = [5, 10, 20, 30];
​
var bars1 = canvas.selectAll("rect.addon")
    .data(dataArray1)
    .enter()
    .append("rect")
        .attr('class', 'addon')
        .attr("width", function(d){
            return d * 7;
        })
        .attr("height", 20)
        .attr("y", function(d, i){
            return (i*35) + 5;
        })
        .attr("fill", "red");
        //.attr("fill-width", "black");
​
</script>
</body>
</html>
Output

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

Dismiss x
public
Bin info
antojurkovicpro
0viewers