D3.js Basic Vertical Bar Chart

d3basics1.js

// simple array
var data = [8, 12, 15, 30, 43];

d3basics2.js

// variables for chart width and height
var w = 20,
    h = 50;

d3basics3.js

var chart = d3.select(".charts").append("svg")
    .attr("class", "chart")
    .attr("width", w * data.length)
    .attr("height", h);

d3basics4.js

var x = d3.scale.linear()
    .domain([0, 1])
    .range([0, w]);
     
var y = d3.scale.linear()
    .domain([0, 50])
    .rangeRound([0, h]); //rangeRound is used for antialiasing

d3basics5.js

// x and y are the lower-left position of the bar
// width is the width of the bar
// height is the height of the bar
// for crisp edges use -.5 (antialiasing)
chart.selectAll("rect")
    .data(data)
  .enter().append("rect")
    .attr("x", function(d, i) { return x(i) - .5; })
    .attr("y", function(d) { return h - y(d) - .5; })
    .attr("width", w)
    .attr("height", function(d) { return y(d); } );

d3basics6.js

// horizontal line for the x-axis
chart.append("line")
     .attr("x1", 0)
     .attr("x2", w * data.length)
     .attr("y1", h - .5)
     .attr("y2", h - .5)
     .style("stroke", "#000");