D3 - Simple bar

by rajeshpillai

HTML

<script src="http://d3js.org/d3.v3.min.js"></script>

CSS

div.chart{
font-family:sans-serif;
font-size:0.7em;
}

div.bar {
background-color:DarkRed;
color:white;
height:3em;
line-height:3em;
padding-right:1em;
margin-bottom:2px;
text-align:right;
}

div.label {
    height:3em;
    line-height:3em;
    padding-right:1em;
    margin-bottom:2px;
    float:left;
    width:20em;
    text-align:right;
}

JavaScript

var data = [
    {
    "name": "Product 1",
    "sales": "37"
    },
     {
    "name": "Product 2",
         "sales": "3"
    },
     {
    "name": "Product 3",
         "sales": "400"
    },
     {
    "name": "Product 4",
         "sales": "25"
    }
];


draw(data);

var maxWidth = 600;

function draw(data) {
d3.select("body")
    .append("div")
    .attr("class","chart")
    .selectAll(".bar")
    .data(data)
    .enter()
    .append("div")
    .attr("class","bar")
    .style("width", function(d){return d.sales + "px"})
    .style("outline", "1px solid black")
    .text(function(d){return Math.round(d.sales)});
}

d3.selectAll("div.line")
.append("div")
.attr("class","label")
.text(function(d){return d.name});