xxxxxxxxxx<html> <head> <meta charset="UTF-8"> <title>Barley Harvest</title> <style> h1 { font: 34px "Permanent Marker"; text-decoration: underline; color: #4b4742; margin: 0; } div { text-align: center; font-family: "Permanent Marker"; color: #666; } .y1931 { color: #97BE53; } .y1932 { color: #C5604B; } text { font: 13px "Permanent Marker"; fill: #666; } .axis text { font: 12px "Amatic SC"; fill: #666; } .axis path { display: none; } .axis line { stroke-width:1px; stroke: #666; } .tick line { opacity: 0.2; } </style> <link href='https://fonts.googleapis.com/css?family=Permanent+Marker' rel='stylesheet' type='text/css'> <link href='https://fonts.googleapis.com/css?family=Amatic+SC' rel='stylesheet' type='text/css'> <script src="https://d3js.org/d3.v3.js" charset="utf-8"></script> </head> <body> <section> <h1>Morris Goes Against the Grain</h1> <div>Change in Yield from <span class="y1931">1931</span> to <span class="y1932">1932</span></div> </section> <script> // Start by stating the margin convention var margin = {top: 10, right: 30, bottom: 2, left: 30}, width = 900 - margin.right - margin.left, height = 540 - margin.top - margin.bottom; // Set the scale ranges var xScale = d3.scale.linear() .range([0, width]); d3.csv("barley_yields.csv", function(error, data) { // create input domain of site for the y-axis // https://stackoverflow.com/questions/15125920/how-to-get-distinct-values-from-an-array-of-objects-in-javascript var flags = [], sites = [], topVarietal = ["Glabron", "Manchuria", "Peatland", "Trebi", "Velvet"], l = data.length, i; for( i=0; i<l; i++) { if( flags[data[i].site]) continue; flags[data[i].site] = true; sites.push(data[i].site); } console.log(sites); // reduce the data set to only the years Revolution focused on data = data.filter(function(d) { return topVarietal.indexOf(d.variety) != -1 && (d.year == "1931" || d.year == "1932"); }); // cleanse the data to use for arithmatic later data.forEach(function(d) { d.year = +d.year; d.yield = +d.yield; }); var nest = d3.nest() .key(function(d) { return d.site; }) .key(function(d) { return d.year; }) .rollup(function(v) { return [ d3.mean(v, function(d) { return d.yield; }) ]; }) .entries(data); // set scale domains xScale .domain([20, 55]); var xAxis = d3.svg.axis() .scale(xScale) .ticks(10) .tickSize(-height) .orient("bottom"); var yScale = d3.scale.ordinal() .domain(sites) .rangePoints([height, 0], 1); var svg = d3.select("h1").append("svg") .attr("width", width + margin.right + margin.left) .attr("height", height + margin.top + margin.bottom); var groups = svg .selectAll("g"); // Explain why I only need a select here var bar = groups.select("rect") .data(nest) .enter() .append("rect") .attr("x", function(d) { // Account for Morris starting in the opposite position of other sites return xScale(d3.min([d.values[0].values[0], d.values[1].values[0]])); }) .attr("y", function(d) { return yScale(d.key); }) .attr("width", function(d) { // Rect width cannot be negative return Math.abs(xScale(d.values[1].values[0]) - xScale(d.values[0].values[0])); }) .attr("height", "1"); var circle1931 = groups.select("circle") .data(nest) .enter() .append("circle") .attr("cx", function(d) { return xScale(d.values[0].values[0]); }) .attr("cy", function(d) { return yScale(d.key); }) .attr("r", "5") .attr("fill", "#97BE53"); var circle1932 = groups.select("circle") .data(nest) .enter() .append("circle") .attr("cx", function(d) { return xScale(d.values[1].values[0]); }) .attr("cy", function(d) { return yScale(d.key); }) .attr("r", function(d) { return Math.sqrt(d.values[1].values[0] *12/Math.PI); }) .attr("fill", "#C5604B"); // Why when my axis is placed first does text not show up? var text = groups.select("text") .data(nest) .enter() .append("text") .attr("x", function(d) { return d3.min([xScale(d.values[1].values[0]),xScale(d.values[0].values[0])]) + 15; }) //function(d) { return xScale(d.values[0].values); }) .attr("y", function(d) { return yScale(d.key); }) .style("font-family", "Amatic SC") .style("font-size", "14") .style("fill", "#666") .text(function(d) { return d.key; }); svg.append("g") .attr("class", "x axis") .attr("transform", "translate(" + margin.left + "," + height + ")") .call(xAxis); // svg.append("text") // .attr("class", "x axis") // .attr("text-anchor", "middle") // .attr("transform", "translate(" + width/2 + "," + (height + 35) + ")") // // I wish I knew how to color 1931 green and 1932 red // .text("Change in Yield from 1931 to 1932"); }); </script> </body></html> https://d3js.org/d3.v3.js