D3 Examples - SlopegraphDRAFT

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
​
 body {
   font-family: arial, sans;
   font-size: 11px;
}
​
svg {
 border: none;
}
​
.right-align{
    text-align: right;
}
​
.left-align{
    text-align: left;
}
​
.axis line,
.axis path {
    fill: none;
    stroke: #d3d3d3;
    shape-rendering: crispEdges;
}
​
.xaxis text {
   font-weight: bold;
}
​
.d3-tip {
  line-height: 1;
  padding: 5px;
  background: white;
  color: black;
  text-align:right;
}
​
h2{
   margin-bottom:-.5em;
}
​
</style>
​
<body>
​
</body>
​
<h2>Waseca barley yields</h2>
<p><strong>1931–1932</strong></p>
​
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<script src="https://labratrevenge.com/d3-tip/javascripts/d3.tip.v0.6.3.js"></script>
​
<script type="text/javascript">
​
var margin = {top: 20, right: 100, bottom: 30, left: 100};
​
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()
   .range([0,width]);
​
var yScale = d3.scale.linear()
   .range([height,0]);
​
var xAxis = d3.svg.axis()
   .scale(xScale)
   .orient("bottom")
   .ticks(1)
   .tickSize(0)
   .tickFormat(d3.format("d"));
​
var y2Axis = d3.svg.axis()
   .scale(yScale)
   .orient("right")
   .ticks(0)
   .tickSize(0);
​
var y1Axis = d3.svg.axis()
   .scale(yScale)
   .orient("left")
   .ticks(0)
   .tickSize(0);  
​
//tooltips
var tip = d3.tip()
   .attr('class', 'd3-tip')
   .offset([14, 72])
   .html(function(d) {
    return "<strong>" + d.variety + "</strong>: " + d3.round(d.yield, 1);
  })   
​
svg.call(tip);   
​
d3.csv("barley.csv", ready);
​
function ready(error, data) {
 if (error) return console.warn(error);
​
data.forEach(function(d) {
 d.year = d.year;
 d.yield = +d.yield;
});
​
//update domains based on extrema, which has pluses and minuses
xScale.domain(d3.extent(data, function(d) { return d.year; }));
yScale.domain(d3.extent(data, function(d) { return d.yield; }));
​
svg.append("g")
   .attr("class", "xaxis")
   .attr("transform", "translate(0," + height + ")")
   .call(xAxis);
​
svg.append("g")
   .attr("class", "y2 axis")
   .attr("transform", "translate(" + width + ",0)")
   .call(y2Axis);
​
svg.append("g")
   .attr("class", "y1 axis")
   .call(y1Axis);  
​
//move axis text
d3.selectAll(".xaxis text")
   .attr("transform", function(d) {
             return "translate(0," + this.getBBox().height + ")";
         });  
​
//circles
var circleGroup = svg.selectAll(".circle-group")
   .data(data)
   .enter()
   .append("g")
   .attr("class", "circle-group")
   .attr("transform", function(d) { return "translate(" + xScale(d.year) + "," + yScale(d.yield) + ")"; });
​
circleGroup.append("circle")
   .attr("r", 3.5)
   .attr("fill", function(d){
      if (d.variety === "Wisconsin No. 38"){
         return "orange"
      }
      else {
         return "gray"
      }
   })
   .attr("opacity", .8)
   .on('mouseover', tip.show)
   .on('mouseout', tip.hide);
​
//labels
circleGroup.append("text")
   .text(function(d) { return d.variety; })
   .attr("dx", function(d){
        if (d.year === "1931"){
            return -92;
        }
        else {
            return 5;
        }
   })
   .attr("dy", 3)
   .attr("class", function(d){
        if (d.year === "1931"){
            return "right-align";
        }
        else {
            return "left-align";
        }    
   });
​
//lines
var slopeGroup = svg.selectAll(".slopeGroup") 
    .data(data)
    .enter()
    .append("g")
    .attr("class", "slope-group")
    .attr({
      x1: function(d){return "translate(" + margin.left + ")"},
      x2: function(d){return "translate(" + width + ")"},
      y1: function(d){return yScale(d.yield)},
      y2: function(d){return yScale(d.yield)}
   });   
​
​
slopeGroup.append("line")
   .attr("stroke", "black")
   .attr("stroke-width", 2);    
​
​
 }
</script>
    