JSFiddle - React, Tailwind, and code Playground
HTML
<script src="http://underscorejs.org/underscore-min.js"></script>
<div id="chart"></div>
<script type="text/JavaScript" src="http://d3js.org/d3.v2.js"></script>
CSS
.predictedGraphLabel
{
font: 10px arial;
font-weight: normal;
color: black;
}
.axis path
{
fill: none;
stroke: RGB(97,99,101);
}
.barRect
{
fill: RGB(122,184,0);
stroke-width: .5;
stroke: white;
}
JavaScript
//draw chart
var width = 400,
height = 100,
topMargin = 10;
var vis = d3.select("#chart")
.append("svg")
.attr("width",width)
.attr("height",height);
function rightRoundedRect(x, y, width, height, radius) {
return "M" + x + "," + y
+ "h" + (width - radius)
+ "a" + radius + "," + radius + " 0 0 1 " + radius + "," + radius
+ "v" + (height - 2 * radius)
+ "a" + radius + "," + radius + " 0 0 1 " + -radius + "," + radius
+ "h" + (radius - width)
+ "z";
}
var drawGraph = function(vis,w,h)
{
var x1 = 0,
x2 = w/3,
x3 = w,
y1 = topMargin,
y2 = h;
var x = d3.scale.linear().domain([0,1]).range([x2,x3]),
y = d3.scale.ordinal().domain([""]).rangeBands([y1,y2]),
yalt = d3.scale.ordinal().domain([""]).rangeBands([y1,y2]);
var rectg = vis.append("g");
var dataLabelg = vis.append("g");
var labelg = vis.append("g");
var yAxis = d3.svg.axis()
.scale(y)
.orient('left');
var yax = labelg.append('g')
.attr('transform', 'translate('+x2+',0)')
.attr('class', 'axis predictedGraphLabel')
.call(yAxis);
var yAxisAlt = d3.svg.axis()
.scale(yalt)
.orient('right');
var yaxAlt = labelg.append('g')
.attr('transform', 'translate('+x2+',0)')
.attr('class', 'axis predictedGraphLabel')
.call(yAxisAlt);
var redraw = function(data)
{
var maxx = _.reduce(data,function(a,b){ return Math.max(a,b.value); },0);
var labels = _.map(data,function(a){ return a.name; });
var values = _.map(data,function(a){ return a.value; });
x = d3.scale.linear().domain([0,maxx]).range([x2,x3]);
yalt = d3.scale.ordinal().domain(values).rangeBands([y1,y2]);
y = d3.scale.ordinal().domain(labels).rangeBands([y1,y2]);
yAxis = d3.svg.axis()
...