D3 Examples - BarleyDots

xxxxxxxxxx
 
<!DOCTYPE html>
<meta charset="utf-8">
​
<style type="text/css">
  /*css to go here*/
  body {
      font-family:arial;
      font-size:12px;
    }
​
  .g-chart-container {
    width: 300px;
    display: inline-block;
    margin: 10px 0;
  }
​
  .g-location {
    text-align: center;
    font-weight: bold;
    font-size:14px;
    margin: 3px 0;
  }
​
  .g-1931 {
    fill:#A9A9A9;
  }
  .g-1932 {
    fill:#FF4500;
  }
​
  .axis line {
      fill: none;
      stroke: #D3D3D3;
      shape-rendering: crispEdges;
      stroke-width: 1px;
    }
​
    .axis text {
      font-family: arial, sans-serif;
      font-size: 8px;
      pointer-events: none;
      fill: #777;
    }
​
.xtick line {
  stroke: #ccc;
  stroke-width: 1px;
  stroke-dasharray: 2px 3px;
}
​
.xtick text {
  font-family: arial;
  font-size:8px;
}
​
.domain {
      display: none;
}
​
.y.axis text {
  text-anchor: end !important;
  font-size:10px;
}
​
</style>
​
<body>
​
<div class="barley-charts-container"></div>
​
</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 allVarieties = ["Velvet", "Peatland", "Manchuria", "Wisconsin No. 38", "Trebi", "No. 462", "No. 457", "Svansota","No. 475", "Glabron"];
​
var margin = {top: 20, right: 10, bottom: 20, left: 130};
​
var width = 300 - margin.left - margin.right,
   height = 300 - margin.top - margin.bottom;
​
var xScale = d3.scale.linear()
             .range([0, width]);
​
var yScale = d3.scale.ordinal()
            .rangeBands([height, 0], 0.2)
            .domain(allVarieties);
​
//Define Y axis
var yAxis = d3.svg.axis()
    .scale(yScale)
    .tickSize(-width)
    .tickPadding(10)
    .orient("left");
​
//Define X axis
var xAxis = d3.svg.axis()
   .scale(xScale)
   .tickSize(-height)
   .orient("bottom")
   .tickValues([0,10,20,30,40,50,60]);
​
  //  d3.tsv("barley.tsv", function(error, data) {
   //
  //  if (error) return console.warn(error);
​
d3.tsv("barley.tsv", ready);
​
function ready(err, data) {
    if (err) throw "error loading data";
​
​
          //formatting numbers
   data.forEach(function(d) {
    d.yield = +d.yield;
    d.year = +d.year;
   });
​
var maxYield = d3.max(data, function(d) { return d.yield; });
​
xScale.domain([0, maxYield ]);
// makeChart("Crookston");
// makeChart("University Farm");
​
allSites = d3.set(data.map(function(d) { return d.site; })).values();
​
allSites.forEach(function(d) {
  makeChart(d);
});
​
function makeChart(site) {
  var myLocationName = site;
​
  var myLocationData = data.filter(function(d) {
      return d.site === myLocationName;
    });
​
  var chartContainer = d3.select(".barley-charts-container").append("div")
  .attr("class", "g-chart-container");
​
  var chartLocation = chartContainer.append("h5")
    .attr("class", "g-location");
​
  var chart = chartContainer.append("div")
    .attr("class", "g-chart");
​
chartLocation.text(myLocationName);
​
var svg = chart.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 + ")");
​
svg.append("g")
  .attr("class", "y axis")
  .call(yAxis);
​
  //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) + yScale.rangeBand()/2) + ")";
    });
​
  varietyGroup.append("circle")
    .attr("r", 3)
    .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>
​
    