Palkkikuvio

<!DOCTYPE html>
<head>
  <meta charset="utf-8">
  <script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js"></script>
  <style>
.axis path,
.axis line {
  fill: none;
  stroke: #d3d3d3;
  shape-rendering: crispEdges;
}

.axis text  {
  font-family: sans-serif;
  font-size: 12px;
}

</style>
</head>

<body>
  <script>//Input the data here

var dataset = [
{
	question: "Which do you prefer",
	republicans: 10,
	democrats: 30,

}, {
	question: "Which do you agree",
	republicans: 50,
	democrats: 80,

}, {
	question: "What are you thinking of",
	republicans: 60,
	democrats: 65,

} , {
	question: "What is the color of",
	republicans: 15,
	democrats: 25,

}

];

//SVG tausta-asetukset

var margin = {top: 30, right: 20, bottom: 30, left: 30},
	w = 600 - margin.left - margin.right
	h = 500 - margin.top - margin.bottom;

var padding = 20;

var qArea = 170;

var lineWidth = 10;
var circleR = 5;

var democratsColor = "#82A7BF";
var republicansColor = "#E48073";

var axisPlacement = dataset.length * 42;

var axisLineHeight = -170;

var svg = d3.select("body")
	.append("svg")
	.attr("width", w + margin.left + margin.right)
	.attr("height", h + margin.top + margin.bottom )
	.append("g")
	.attr("transform", "translate(" + margin.left + "," + margin.top + ")");

//Akselisto

var xScale = d3.scale.linear()
	.domain([0, 100])
	.range([qArea, w - qArea]);

var xAxis = d3.svg.axis()
	.scale(xScale)
	.orient("bottom")
	.ticks(10)
	.tickSize(axisLineHeight,0,0);

svg.append("g")
	.attr("class", "x axis")
	.attr("transform", "translate(0," + axisPlacement + ")")
	.call(xAxis);

//Piirrä viiva

svg.selectAll("#myLines")
	.data(dataset)
	.enter()
	.append("line")
	.attr("x1", function(d) { return xScale(d.republicans); })
	.attr("x2", function(d) { return xScale(d.democrats); })
	.attr("y1", function(d, i) { return padding + i * 40; })
	.attr("y2", function(d, i) { return padding + i * 40; })
	.attr("stroke", "#DDD9C7")
	.attr("stroke-width", lineWidth);

//Piirrä selittäjäviivat

svg.selectAll("#labelLineDemocrats")
	.data(dataset)
	.enter()
	.append("line")
	.attr("x1", function(d, i) { 
		if (i < 1) {
			return xScale(d.democrats);
		}
		else { return -40; }
	})
	.attr("x2", function(d, i) { 
		if (i < 1) {
			return xScale(d.democrats);
		}
		else { return -40; }
	})
	.attr("y1", function(d,i) { return padding; })
	.attr("y2", function(d,i) { return -10; })
	.attr("stroke", "black")
	.attr("stroke-width", "1px")

svg.selectAll("#labelLineRepublicans")
	.data(dataset)
	.enter()
	.append("line")
	.attr("x1", function(d, i) { 
		if (i < 1) {
			return xScale(d.republicans);
		}
		else { return -40; }
	})
	.attr("x2", function(d, i) { 
		if (i < 1) {
			return xScale(d.republicans);
		}
		else { return -40; }
	})
	.attr("y1", function(d,i) { return padding; })
	.attr("y2", function(d,i) { return -10; })
	.attr("stroke", "black")
	.attr("stroke-width", "1px")

//Piirrä selittäjätekstit

svg.selectAll("#labelDemocrats")
	.data(dataset)
	.enter()
	.append("text")
	.text("Democrats")
	.attr("x", function(d, i) { 
		if (i < 1) {
			return xScale(d.democrats)-10;
		}
		else { return -90; }})
	.attr("y", function(d,i) { return -15; })
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", democratsColor)
	.attr("font-weight", "bold");

svg.selectAll("#labelDemocrats")
	.data(dataset)
	.enter()
	.append("text")
	.text("Republicans")
	.attr("x", function(d, i) { 
		if (i < 1) {
			return xScale(d.republicans)-50;
		}
		else { return -100; }})
	.attr("y", function(d,i) { return -15; })
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", republicansColor)
	.attr("font-weight", "bold");

//Piirrä kysymysten väliset viivat

svg.selectAll("#qLines")
	.data(dataset)
	.enter()
	.append("line")
	.attr("x1", padding)
	.attr("x2", w - qArea)
	.attr("y1", function(d,i) { return 17 + padding + i * 40; })
	.attr("y2", function(d,i) { return 17 + padding + i * 40; })
	.attr("stroke", "#d3d3d3")
	.attr("stroke-width", "1px")
	.attr("stroke-dasharray", "2,2");

//Piirrä ympyrät

svg.selectAll("#democrats")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return xScale(d.democrats); })
	.attr("cy", function(d,i) { return padding + i * 40; })
	.attr("r", circleR)
	.attr("fill", democratsColor)
	.attr("stroke", "black")
	.attr("stroke-width", 2);

svg.selectAll("#republicans")
	.data(dataset)
	.enter()
	.append("circle")
	.attr("cx", function(d) { return xScale(d.republicans); })
	.attr("cy", function(d,i) { return padding + i * 40; })
	.attr("r", circleR)
	.attr("fill", republicansColor)
	.attr("stroke", "black")
	.attr("stroke-width", 2);

//Kirjoita kysymys

svg.selectAll("#question")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) { return d.question; })
	.attr("x", function(d) { return padding; })
	.attr("y", function(d,i) { return padding + i * 40; })
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", "black");

//Kirjoita numeron arvo

svg.selectAll("#democratsLabel")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) { return d.democrats; })
	.attr("x", function(d) { return xScale(d.democrats) + 10; })
	.attr("y", function(d,i) { return padding + 3 + i * 40; })
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", democratsColor);

svg.selectAll("#republicansLabel")
	.data(dataset)
	.enter()
	.append("text")
	.text(function(d) { return d.republicans; })
	.attr("x", function(d) { return xScale(d.republicans) - 20; })
	.attr("y", function(d,i) { return padding + 3 + i * 40; })
	.attr("font-family", "sans-serif")
	.attr("font-size", "11px")
	.attr("fill", republicansColor);

</script>
</body>

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