D3 Examples - Barley Dot Plots

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
<script src="https://cdnjs.cloudflare.com/ajax/libs/d3/3.5.5/d3.min.js" charset="utf-8"></script>
<style type="text/css">
​
  body {
    font-family: arial, sans;
    width: 800px;
    margin: 10px auto;
  }
​
  .axis text {
    font-size: 12px;
    fill: #777;
  }
  .axis path {
    display: none;
  }
  .axis line {
    stroke-width:1px;
    stroke: #ccc;
    /*stroke-dasharray: 2px 2px;*/
  }
  .x.axis line {
    stroke-width:1px;
    stroke: #ccc;
    stroke-dasharray: 2px 2px;
  }
  .yearOne {
    fill: white;
    stroke-width:2px;
    stroke: #F438CA;
  }
  .yearTwo {
    fill: #F438CA;
    stroke-width:2px;
    stroke: #F438CA;
  }
​
  .siteNames {
    margin: 0;
/*    display: inline-block;*/
    font-size: 16px;
  }
​
  div {
    display: inline-block;
  }
​
.tooltip {
  position: absolute;
  text-align: center;
  width: 60px;
  height: 12px;
  padding: 8px;
  margin-top: -20px;
  font: 10px sans-serif;
  background: #ddd;
  pointer-events: none;
}
}
</style>
<body>
<h2>Barley Yield Experiment</h2>
<p>The chart below shows the yields for several different varieties of barley planted at each of six different sites in Minnesota in the years 1931 and 1932. </p>
​
</body>
<script>
​
var margin = {top: 20, right: 20, bottom: 20, left: 110};
var width = 400 - margin.left - margin.right,
   height = 200 - margin.top - margin.bottom;
var xScale = d3.scale.linear()
   .range([0, width]);
var yScale = d3.scale.ordinal()
   .rangePoints([height, 0]);
var xAxis = d3.svg.axis()
   .scale(xScale)
   .tickSize(-height)
   .tickPadding(8)
   .orient("top");
var yAxis = d3.svg.axis()
   .scale(yScale)
   .tickSize(-width)
   .tickPadding(8)
   .orient("left")
​
​
d3.tsv("barley.tsv", ready)
 function ready(error, data) {
  if (error) return console.warn(error);
​
// coerce yields to be integers
  data.forEach(function(d){d.yield = +d.yield})
  var nestedSiteData = d3.nest()
    .key(function(d) { return d.site})
    .sortKeys(d3.ascending)
    .entries(data)
  
​
  var divContainer = d3.select("body")
    .selectAll("div")
    .data(nestedSiteData)
  .enter().append("div");
​
divContainer.append("p")
  .attr("class","siteNames")
  .text(function(d) { return d.key })
​
//make svg for the chart and append "g", 
var svg = divContainer.append("svg") //append svg to div
   .attr("width", width + margin.left + margin.right) //set witdh to width minus margins and move the starting point to
   .attr("height", height + margin.top + margin.bottom) //set height to height minus margins and move starting point over by the top and left margins
 .append("g") //append "g" tag for the chart area (inner square, minus label space)
   .attr("transform", "translate(" + margin.left + "," + margin.top + ")"); //move starting point over by left and top margins (saves room for y-axis labels)
​
​
  //set they yScale domain (a category axis) data.map pulls in the original data not the nested data
  yScale.domain(d3.set(data.map(function(d){return d.variety})).values())
  //set the xScale using d3.extent which takes the original data and returns an array of the min and max of the yield values
  // xScale.domain(d3.extent(data, function(d){return d.yield}))
  xScale.domain([0,70])
​
​
  svg.append("g")
    .attr("class","y axis")
    .call(yAxis);
​
 svg.append("g")
    .attr("class","x axis")
    .call(xAxis);
​
​
​
var lines = svg.selectAll('.connectingLines')
    .data(function(d){return d3.nest(d.values).key(function(v){return v.variety}).entries(d.values)}) 
    .enter().append('line')
    .attr('class', 'connectingLines')
    .attr('x1', function(d){return xScale(d.values[0].yield)}) 
    .attr('x2', function(d){return xScale(d.values[1].yield)})
    .attr('y1', function(d){return yScale(d.key)})
    .attr('y2', function(d){return yScale(d.key)})
//help writing a conditional here to color the circles if y1 < y2
    .style('stroke', '#F438CA')
    .style('stroke-width', '3px')
​
​
var yieldCircles = svg.selectAll(".yieldCircles")
  .data(function(d){return d.values})
  .enter().append('circle')
    .attr("cx", function(d){return xScale(d.yield);})
    .attr("cy", function(d){return yScale(d.variety);})
    .attr("class", function(d){if (d.year === "1931"){
        return "yearOne";
      } else {
        return "yearTwo";
      }})
    .attr("r",4)
//help writing a conditional here to color the circles if y1 < y2
    .on("mouseover", mouseover)
    .on("mouseout", mouseout);
​
var div = d3.select("body").append("div")
    .attr("class", "tooltip")
    .style("display", "none");
​
function mouseover() {
  d3.select(this)
    .attr("r", 6)
    
}
​
function mouseout() {
  d3.select(this).attr("r", 4);
}
​
​
​
​
​
​
}
</script>
    