Inline Demographic Split

<!DOCTYPE html>
<meta charset="utf-8">

<body>
	<p>Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. Efficiently unleash cross-media <span class="gen-container"></span> information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
	<p>Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
	<p>Completely synergize resource sucking relationships via premier niche markets. Professionally cultivate one-to-one customer <span class="gen-container"></span> service <span class="gen-container"></span> with robust ideas. Dynamically innovate resource-leveling customer service for state of the art customer service. Efficiently unleash cross-media information without cross-media value. Quickly maximize timely deliverables for real-time schemas. Dramatically maintain clicks-and-mortar solutions without functional solutions.</p>
</body>

var margin = {top: 5, right: 10, bottom: 1, left: 10};
	var width = 72 - margin.left - margin.right,
			height = 12 - margin.top - margin.bottom;

var genderData = [
		{
			"male": 0.40,
			"female": 0.60
		},
		{
			"male": 0.80,
			"female": 0.20
		},
		{
			"male": 0.50,
			"female": 0.50
		}
	];
	//console.log(genderData);

var xScale = d3.scale.linear()
		.range([0, width])
		.domain([0, 1]);
	//console.log(xScale(genderData[0].male));

var genContainer = d3.select("body").selectAll("span.gen-container")
		.append('svg')
		.attr('class', 'gen-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 genBar = d3.selectAll('svg.gen-svg g');
	genBar.data(genderData).enter();

genBar.append('rect')
  	.attr('class', 'genRectFemale')
  	.attr('x', 0)
  	.attr('y', 0)
  	.attr('width', width)
  	.attr('height', height);
  genBar.append('rect')
  	.attr('class', 'genRectMale')
  	.attr('x', 0)
  	.attr('y', 0)
  	.attr('height', height)
  	.attr("width", function (d) { return xScale(d.male); });
  genBar.append('text')
  	.attr('class', 'genRectMale genLabel')
  	.attr('x', -10)
  	.attr('y', height)
  	.text("M");
  genBar.append('text')
  	.attr('class', 'genRectFemale genLabel')
  	.attr('x', width+3)
  	.attr('y', height)
  	.text("F");
  genBar.append("line")
  	.attr('class', 'genLine')
  	.attr("x1", function (d) { return xScale(d.male); })
  	.attr("y1", 0)
  	.attr("x2", function (d) { return xScale(d.male); })
  	.attr("y2", height);

</script>

https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js