index.html
<!DOCTYPE html>
<meta charset="utf-8">
<style type="text/css">
body {
font-family: 'Georgia', serif;
font-size: 16px;
line-height: 2;
width: 720px;
margin: 40px auto;
}
h1 {
font-size: 48px;
}
.genRectFemale {
fill: #ee8b68;
}
.genRectMale {
fill: #c094c1;
}
.genLabel {
font-family: "Arial", sans-serif;
font-size: 9px;
font-weight: bold;
}
.genLine {
stroke: #fff;
stroke-width: 1.5;
}
</style>
<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>
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script>
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
}
];
var xScale = d3.scale.linear()
.range([0, width])
.domain([0, 1]);
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>