Built with blockbuilder.org
xxxxxxxxxx<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 herevar 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-asetuksetvar 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 + ")");//Akselistovar 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ä viivasvg.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äviivatsvg.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ätekstitsvg.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 viivatsvg.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ätsvg.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 kysymyssvg.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 arvosvg.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