xxxxxxxxxx<html lang="en"> <head> <meta charset="utf-8"> <title>D3 scales and axes + beauty</title> <script type="text/javascript" src="https://d3js.org/d3.v3.js"></script> <style type="text/css"> body { background-color: white; font-family: helvetica, calibri, arial, sans-serif; font-size: 11px; } svg { background-color: #cccccc; } h1 { font-family: Helvetica, Calibri, Arial, sans-serif; font-size: 24px; color: #666666; margin:0; } h3 { font-family: Helvetica, Calibri, Arial, sans-serif; font-size: 16px; color: #666666; margin:0; } line:hover { stroke: #666666; } .axis path, .axis line { fill: none; stroke: black; shape-rendering: crispEdges; } .axis text { font-family: sans-serif; font-size: 11px; } .y.axis path, .y.axis line{opacity: 0;} #container { width: 660px; height: 1500px; margin: 0; padding: 0; border: 1px solid #7f8c8d; } #wrapper { width: 650px; height: 1460px; margin: 0; padding: 10px; } #gr { width:500px; padding: none; margin: none; margin-top: 0px; margin-right: 10px; margin-bottom: 10px; height: 1400px; float: left; } #rightdiv{ width: 140px; padding-top: 0px; padding-left: 0px; /*padding-right: 10px;*/ padding-bottom: 0px; margin: none; margin-top: 0px; margin-bottom: 0px; height: 100px; float: right; text-align: left; } #header { text-align: left; font-family: helvetica, calibri, arial, sans-serif; text-decoration: bold; padding-left: 10px; padding-bottom: 0px; padding-top: 10px; width: 500px; background-color: #ffffff; color: #000000; } #source { width: 500px; height: 50px; padding-left: 0px; font-family: helvetica, calibri, arial, sans-serif; font-size:10px; color: #95a5a6 float: right; } .arrow { stroke: #000; stroke-width: 1px; shape-rendering: geometricPrecision; } .regsel { stroke: yellow; stroke-width: 2px; shape-rendering: geometricPrecision; } </style> </head> <body> <div id="container"> <div id="header"> <h1>RUSSIAN "SAT" RESULTS BY REGION</h1> <h3>The percentage of students who scored maximum points in 2013</h3> </div> <div id="wrapper"> <div id="gr"> <script type="text/javascript"> var margin = {top: 10, right: 20, bottom: 10, left:180}; //Margin convention https://bl.ocks.org/mbostock/3019563 var w = 500 - margin.left - margin.right; var h = 1400 - margin.top - margin.bottom; var svg = d3.select("#gr") .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+")"); var xScaleAllP = d3.scale.linear() .range([0,w]); var yScale = d3.scale.ordinal() .rangeRoundBands([0,h],0.1); var xAxis = d3.svg.axis() .scale(xScaleAllP) .orient("top"); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); d3.csv("EGE2013_SUM_SHORT.csv", function(data) { data.sort(function(a, b) { return d3.descending(+a.StoBallPercent, +b.StoBallPercent);}) xScaleAllP.domain([d3.min(data,function(d){return +d.StoBallPercent;}),d3.max(data, function(d){return +d.StoBallPercent;})]); yScale.domain(data.map(function(d){return d.Reg_name_eng;})); svg.append("rect") .attr("fill","yellow") .attr("x", 0) .attr("y", 0) .attr("width",w) .attr("height",h/data.length*7) .attr("fill-opacity", 0.25) .attr("transform","translate(0,"+margin.top+")"); svg.selectAll("line") .data(data) .enter() .append("g") .attr("transform","translate("+0+","+7+")") .append("line") .attr("x1", 0) .attr("y1",function(d) {return yScale(d.Reg_name_eng);}) .attr("x2",function(d) {return xScaleAllP(d.StoBallPercent);}) .attr("y2",function(d) {return yScale(d.Reg_name_eng);}) .attr("stroke","#999999") .attr("stroke-width",14) .append("title") .text(function(d) { return d.Reg_name_eng + "'s percent of students with maximun ball is " + d.StoBallPercent +"%";}); svg.append("g") .attr("class", "x axis") .attr("transform","translate(0,"+margin.top+")") .call(xAxis); svg.append("g") .attr("class", "y axis") .call(yAxis); svg.append("line") .attr("class", "arrow") .attr("stroke-opacity", 0.5) .attr("x1", 0) .attr("x2", -margin.right-25) .attr("y1", margin.top) .attr("y2", h/data.length*7/2) .attr("transform","translate("+(w+margin.right) + "," + (margin.top)+")"); }); </script> </div> <div id="rightdiv"> <p></br><b>To investigate:</b></br> Why these so different Russian regions are leaders in making perfect students?</p> </div> <div id="source"> <p>SOURCE: <a href="https://www.ege.edu.ru/ru/main/satistics-ege/"> Unified State Examination official website </a> (in Russian), 2013</p> </div> </div> </body></html> Modified http://d3js.org/d3.v3.js to a secure url
https://d3js.org/d3.v3.js