function(data) {
var margin = { top: 50, right: 20, bottom: 30, left: 40 }, width = 400, height = 400, svgWidth = width + margin.right + margin.left, svgHeight = height + margin.top + margin.bottom; var svg = d3.select("body").append("svg") .attr('viewBox', "0 -10 " +svgWidth+ " " +svgHeight+ "") .attr("width", svgWidth) .attr("height", svgHeight) .style("font-family", "Arial") .style("font-size", "14px") .style("fill", "none") .style("background-color", "#ffffff") .append('g') .attr('transform', 'translate(' +margin.left+ ',' +margin.top+ ')') .style("fill", "none"); var paddedExtent = function(data, pad) { return [ d3.min(data, function(d) { return d.value-pad; }), d3.max(data, function(d) { return d.value+pad; }) ] } // Axis Scales var x = d3.scale .linear() .domain(paddedExtent(data, 1)) .range([0, width]) .nice(); var y = d3.scale .ordinal() .domain(data.map(function(d) { return d.name; })) .rangeRoundBands([0, height], 0.2); // Axes var xAxis = d3.svg .axis() .scale(x) .orient('bottom') .tickSize(-height); var yAxis = d3.svg .axis() .scale(y) .orient('right') .ticks(data.length); svg.selectAll('.bar') .data(data) .enter().append('rect') .attr('class', 'bar') .attr('x', 0) .attr('y', function(d) { return y(d.name); }) .attr('width', function(d) { return x(d.value); }) .attr('height', y.rangeBand()) .style('fill', '#428bca') .style('opacity', '0.3') ; svg.selectAll('label') .attr('fill-opacity', '0.3') var xAxisElement = svg.append('g') .attr('class', 'x axis') .attr('transform', "translate(0," +height+ ")") .style("fill", "none") .call(xAxis); var yAxisElement = svg.append('g') .attr('class', 'y axis') .style("fill", "none") .call(yAxis); xAxisElement.selectAll('line') .style('fill', 'none') .style('stroke', 'black') .style('stroke-width', '1px') .style('stroke-opacity', 0.1) .style('shape-rendering', 'geometricPrecision'); xAxisElement.selectAll('text') .style('fill', '#333333'); yAxisElement.selectAll('text') .style('fill', '#333333');
}