xxxxxxxxxx<!-- A modified example from Scott Murray's Knight d3 course. --><html lang="en"> <head> <meta charset="utf-8"> <title>Formatting Ticks</title> <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js"></script> <style type="text/css"> @import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,600,700); body { background-color: white; font-family: "Open Sans", Helvetica, Arial, sans-serif; } h1 { font-size: 24px; color: rgba(30,30,30,0.7); margin: 0; } p { font-size: 14px; margin: 10px 0 0 0; } svg { background-color: white; margin-top: 45px; } /*circle.dots { fill: steelblue; }*/ circle:hover { /*stroke-width: 12;*/ fill: rgba(30,30,30,0.4); } .axis path, .axis line { fill: none; stroke: rgba(30,30,30,0.5); stroke-dasharray: 10,10; shape-rendering: crispEdges; } .axis text { font-family: "Opens Sans", sans-serif; font-size: 13px; } .label { font-family: "Opens Sans", sans-serif; font-size: 15px; font-weight: 600; fill: rgba(30,30,30,0.7); } </style> </head> <body> <h1>Life Satisfaction</h1> <p>Better Life Index “Life Satisfaction” scores vs. years in education. Source: <a href="https://stats.oecd.org/Index.aspx?DataSetCode=BLI">OECD</a>, 2014</p> <script type="text/javascript"> // Scott is "cheating" and not using the full pattern for margins. // It is better to use the object style with margin.top, margin.right, etc. var width = 700; var height = 450; var margin = {top: 20, right: 20, bottom: 80, left: 90}; //Top, right, bottom, left // redo this with an object for the margin settings: var margin = {top...} var dotRadius = 7; // fix this to a nice value. // fill in the margin values here. var xScale = d3.scale.linear() .range([ margin.left, width - margin.right - margin.left ]); // top to bottom: var yScale = d3.scale.linear() .range([ height - margin.bottom, margin.top ]); // Custom tick count if you want it. // Create your axes here. var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .ticks(4); // fix this to a good number of ticks for your scale later. var yAxis = d3.svg.axis() .scale(yScale) .orient("left") .ticks(4); var svg = d3.select("body") .append("svg") .attr("width", width) .attr("height", height); /*d3.csv("betterlifeindex.csv", function(data) { // look at the data file and pick 2 columns to contrast with each other. xScale.domain( d3.extent(data, function(d) { return +d.yearsInEducation; // pick a data value to plot on x axis })); yScale.domain( d3.extent(data, function(d) { return +d.lifeSatisfaction; // pick a data value to plot on x axis }));*/ d3.csv("betterlifeindex.csv", function(data) { // look at the data file and pick 2 columns to contrast with each other. xScale.domain([13, d3.max(data, function(d) { return +d.yearsInEducation; })]); yScale.domain([4, d3.max(data, function(d) { return +d.lifeSatisfaction; })]); var circles = svg.selectAll("circle") .data(data) .enter() .append("circle") circles.attr("class", "dots") // fill in the rest of the data, enter, append here. // add a class to the circles - ".dots". // Circles in SVG have cx, cy, and r attributes. x location, y location, radius. circles.attr("cx", function(d) { return xScale(+d.yearsInEducation); // return the value to use for your x scale here }) .attr("cy", function(d) { return yScale(+d.lifeSatisfaction); // return the value to use for your y scale here }) .attr("r", dotRadius) // you might want to increase your dotRadius .attr("fill", function(d) { if (d.country === "Israel") { return "rgba(247,106,109,0.9)"; } else { return "rgba(106,172,247,0.8)"; } }) // add a fill rule with a special case for one of the countries .append("title") .text(function(d) { return "People in " + d.country + " has an average number of " + d.yearsInEducation + " years in education. Their life satisfaction's level is " + d.lifeSatisfaction; // fill in a text string here for your cheap tooltip }); // fix these translates so they use your margin and height width as needed svg.append("g") .attr("class", "x axis") .attr("transform", "translate(0," + (height - margin.bottom) + ")") .call(xAxis);// fill in the name of your yaxis function here). svg.append("g") .attr("class", "y axis") .attr("transform", "translate(" + (margin.left) + ",0)") .call(yAxis);// fill in the name of your yaxis function here). svg.append("text") .attr("class", "x label") .attr("transform", "translate(" + (margin.left + width / 3) + " ," + (height / 1.4 + margin.bottom) + ")") .style("text-anchor", "middle") .attr("dy", "26") .text("Years in Education"); svg.append("text") .attr("class", "y label") .attr("transform", "translate(" + (margin.right + width / 9) + " ," + (height / 2.8 + margin.top) + ") rotate(-90)") .style("text-anchor", "middle") .attr("dy", "-60") .text("Life satisfaction"); }); </script> </body></html> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.6/d3.min.js