Pink Bar Chart

A chart that was built utilizing conventional margins. This graph was built by referencing http://bl.ocks.org/mbostock/3885304 as well as http://chimera.labs.oreilly.com/books/1230000000345/ch09.html#_round_bands_are_all_the_range_these_days. I will further improve functionality as I learn more about the d3 api.

by Blake Dietz

CSS

body {
  font: 10px sans-serif;
}

.axis path,
.axis line {
  fill: none;
  stroke: #000;
  shape-rendering: crispEdges;
}

.bar {
  fill: steelblue;
}

.x.axis path {
  display: none;
}

JavaScript

//Width and height
var margin = {top: 20, right: 20, bottom: 30, left: 40};           
var width = 600 - margin.left - margin.right;
var height= 500 - margin.top  - margin.bottom;
var w = width;
var h = height;

var dataset = [
    {"val":5, "key":"a"},
    {"val":10,"key":"b"},
    {"val":13,"key":"c"},
    {"val":19,"key":"d"},
    {"val":21,"key":"e"},
    {"val":25,"key":"f"},
    {"val":22,"key":"g"},
    {"val":18,"key":"h"},
    {"val":15,"key":"i"},
    {"val":13,"key":"j"},
    {"val":11,"key":"k"},
    {"val":12,"key":"l"},
    {"val":15,"key":"m"},
    {"val":20,"key":"n"},
    {"val":18,"key":"o"},
    {"val":17,"key":"p"},
    {"val":16,"key":"q"},
    {"val":18,"key":"r"},
    {"val":23,"key":"s"},
    {"val":25,"key":"t"}
];

var xScale = d3.scale.ordinal()
    .domain(dataset.map(function (d) {return d.key; }))
    .rangeRoundBands([margin.left, width], 0.40);

var xAxis = d3.svg.axis().scale(xScale).orient("bottom");

var yScale = d3.scale.linear()
    .domain([0, d3.max(dataset, function(d) {return d.val; })])
    .range([h,0]);

var yAxis = d3.svg.axis().scale(yScale).orient("left");



//Create SVG element
var svg = d3.select("body")
    .append("svg")
    .attr("width", w + margin.right + margin.left)
    .attr("height", h + margin.top + margin.bottom);

//Create bars
svg.selectAll("rect")
    .data(dataset)
.enter().append("rect")
    .attr("x", function(d, i) {
        return xScale(d.key);
    })
    .attr("y", function(d) {
        return yScale(d.val);
    })
    .attr("width", xScale.rangeBand())
    .attr("height", function(d) {
        return h - yScale(d.val);
    })
    .attr("fill", function(d) {
        return "rgb(259, 148, " + (d.val * 14) + ")";
    })
.on("mouseover",function(){d3.select(this).transition().duration(0).attr("fill","rgb(259,148,148)")})
.on("mouseout",function(d){d3.select(this).transition().duration(500).attr("fill", function(d) {
        return "rgb(259, 148, " + (d.val * 14.8) + ")";
   ...