Bar Chart with d3

_.md

[ Launch: Tributary inlet ] b58a5c3993504345fdce by ramnathv

app.css

@import url(http://fonts.googleapis.com/css?family=Source+Sans+Pro);
text.label {
  alignment-baseline: middle;
  font-family: "Source Sans Pro";
  font-size: 16px;
  text-anchor: end;
}

text.title {
  alignment-baseline: middle;
  font-family: "Source Sans Pro";
  font-size: 16px;
  text-anchor: end;
}

config.json

{"description":"Bar Chart with d3","endpoint":"","display":"svg","public":true,"require":[],"fileconfigs":{"inlet.js":{"default":true,"vim":false,"emacs":false,"fontSize":12},"app.css":{"default":true,"vim":false,"emacs":false,"fontSize":12},"_.md":{"default":true,"vim":false,"emacs":false,"fontSize":12},"config.json":{"default":true,"vim":false,"emacs":false,"fontSize":12}},"fullscreen":false,"play":false,"loop":false,"restart":false,"autoinit":true,"pause":true,"loop_type":"pingpong","bv":false,"nclones":15,"clone_opacity":0.4,"duration":3000,"ease":"linear","dt":0.01,"ajax-caching":true,"thumbnail":"http://i.imgur.com/z2pSCfY.png"}

inlet.js

var margin = {top: 117, bottom: 60, left: 83, right: 20},
  width = 630 - margin.left - margin.right
  height = 379 - margin.top - margin.bottom
  
var svg = d3.select("svg")
    .attr("width", width + margin.left + margin.right)
    .attr("height", height + margin.top + margin.bottom)
  .append("g")
    .attr("transform", "translate(" + margin.left + "," + margin.top + ")")


var xScale = d3.scale.linear().range([0, width]),
  yScale = d3.scale.ordinal().rangeRoundBands([height, 0], 0.1)


var data = [
  {x: 20, y: "China"}, 
  {x: 30, y: "India"},
  {x: 40, y: "Australia"},{x: 60, y: "Canada"}
]

xScale.domain([0, 80])
yScale.domain(["China", "India", "Australia", "Canada"])

var title = svg.append("text")
  .attr("x", 0)
  .attr("y", 0)
  .attr("dy", "-80")
  .text("Crime Rates (no. per thousand)")

var subtitle = svg.append("text")
  .attr("x", 0)
  .attr("y", 0)
  .attr("dy", "-50")
  .attr("font-size", "12px")
  .attr("fill", "#474747")
  .text("This is a subtitle")



var bars = svg.selectAll("rect")
  .data(data).enter()
  .append("g")
  
bars.append("rect")
   .attr("class", "bar")
   .attr("x", 0)
   .attr("y", function(d, i){return yScale(d.y) - yScale.rangeBand()/2})
   .attr("width", function(d, i){return xScale(d.x)})
   .attr("height", yScale.rangeBand())
   .attr("fill", "steelblue")


bars.append("text")
  .attr("class", "label")
  .attr("x", function(d){return xScale(d.x)})
  .attr("dx", "-10")
  .attr("fill", "whitesmoke")
  .attr("y", function(d, i){return yScale(d.y)})
  .text(function(d){return d.x})

bars.append("text")
  .attr("class", "label")
  .attr("x", 0)
  .attr("dx", "-7")
  .attr("y", function(d, i){return yScale(d.y)})
  .attr("fill", "#aaa")
  .text(function(d){return d.y})

d3.selectAll("rect")
  .transition()
  .duration(1000)
  .style("fill", function(d, i){
    return i === 1 ? "darkred" : "steelblue"
  })