xxxxxxxxxx<meta charset="utf-8"><style type="text/css"> /*css to go here*/ body { font-family:arial; font-size:12px; } svg { border: 1px solid #ccc; }.domain { fill:none;}.xtick line { stroke: #D3D3D3; stroke-width: 1px; stroke-dasharray: 3,2;}.g-1931 { fill:#DCDCDC;}.g-1932 { fill:#FF4500;}</style><body> <h1>Barley</h1><p>Crop yield by variety and year</p></body><script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script><script> //JS to go here var margin = {top: 20, right: 30, bottom: 30, left: 120}; var width = 350 - margin.left - margin.right, height = 400 - margin.top - margin.bottom; var svg = d3.select("body").append("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 xScale = d3.scale.linear() // .domain([10, 70]) .range([0, width]); var yScale = d3.scale.ordinal() .rangeBands([height, 0],1) .domain(["Velvet", "Peatland", "Manchuria", "Wisconsin No. 38", "Trebi", "No. 462", "No. 457", "Svansota","No. 475", "Glabron"]); var yAxis = d3.svg.axis() .scale(yScale) .orient("left"); d3.tsv("barley.tsv", function(error, data) { if (error) return console.warn(error); //formatting numbers data.forEach(function(d) { d.yield = +d.yield; d.year = +d.year; });var myLocationData = data.filter(function(d) { return d.site === "Grand Rapids";}); var maxYield = d3.max(data, function(d) { return d.yield; }); xScale.domain([0, maxYield ]); svg.append("g") .call(yAxis); //Define X axis var xAxis = d3.svg.axis() .scale(xScale) .orient("bottom") .tickValues([0,10,20,30,40,50,60,70]); //Create X axis svg.append("g") .attr("transform", "translate(0," + height + ")") .attr("class", "xtick") .call(xAxis); var varietyGroup = svg.selectAll(".g-variety-group") .data(myLocationData) .enter() .append("g") .attr("class", "g-variety-group") .attr("transform", function(d) { return "translate(" + xScale(d.yield) + "," + yScale(d.variety) + ")"; }); varietyGroup.append("circle") .attr("r", 4) .attr("class", function(d) { return "g-" + d.year; }); //Legend svg.append("circle") .attr("r", 4) .attr("transform", "translate(50,0)") .attr("class", "g-1931"); svg.append("text") .attr("x", 55) .attr("y", 4) .attr("font-size", 10) .text("1931"); svg.append("circle") .attr("r", 4) .attr("transform", "translate(2,0)") .attr("class", "g-1932"); svg.append("text") .attr("x", 7) .attr("y", 4) .attr("font-size", 10) .text("1932");d3.selectAll(".tick line") .attr("y2",-height+margin.top); // varietyGroup.append("text") // .text(function(d) { return d.variety; }); // var maxX = d3.max(data, function(d) { return d.x; }); console.log(data); // console.log("max", maxX);})</script> https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js