D3.js tutorial • Bar Chart

Based on the http://mbostock.github.com/d3/tutorial/bar-1.html

  // 1. Data
  var data = [4, 8, 16, 18]
  
  // 2. Setup
  var chart = d3.select("#chart")
  
  // 3. Bars
  var bar = chart.selectAll("div").data(data)
  bar.enter().append("div").style("width", function(d,i) { return d * 10 + 'px' }).text(function(d) {return d})
  
  // 4. Scale
  chart.selectAll("div").remove()
  var bar = chart.selectAll("div").data(data)
  var x = d3.scale.linear().domain([0, d3.max(data)]).range(["0px", "500px"])
  bar.enter().append("div").style("width", function(d,i) { return x(d) }).text(function(d) {return d })
  
  // 4. Scatterplot
  d3.select("#chart").remove()
  var chart = d3.select("header").append("svg").attr("id", "chart").style("height", 80)
  var circle = chart.selectAll("circle").data(data)
  circle.enter().append("circle").attr("r", "5px").attr("cy", 40).attr("cx", function(d) { return d * 5 })