Old school D3 from simpler times

All examples By author By category About

oliviac12

Full window Github gist

Metis Class 3 Starter Block

Built with blockbuilder.org

<!doctype html>
<script src="https://d3js.org/d3.v4.min.js"></script>

<style type="text/css">
  /*css to go here*/
  svg {
    border:1px solid #f0f;
    text{
      font-size: 14px
  }
}
</style>

<body>

</body>

<script>
  // properties
  var margin = {top: 20, right: 20, bottom: 20, left: 80};
  var width = 800 - margin.left - margin.right;
  var height = 600 - margin.top - margin.bottom;
var yscale = d3.scalePoint();
var xscale = d3.scaleLinear();
var radius = d3.scaleSqrt();
var color = d3.scaleOrdinal(d3.schemeCategory20b);
  d3.csv('barleyfull.csv', function(err, response) {
    if (err) {
      console.log(err);
      return;
    }
    response.forEach(function(d) {
      // is this what we wanted to do?
      d.yield = +d.yield;
      d.year = +d.year;
    });
    var nested = d3.nest()
      .key(function(d){return d.site;})
      .key(function(d){return d.gen;})
      // .key(function(d){return d.year})
      .entries(response);
   yscale
    .range([0, height])
    .domain(
      nested[3].values.map(function(d) {return d.key;}))
    .round(true);
  xscale
    .range([0, width])
    .domain(
      [1927, 1936]
    );
  radius
    .range([0, 15])
    .domain([0,
      d3.max(response ,function(d) {return d.yield })
    ]);
  var yaxis = d3.axisLeft()
    .scale(yscale);
  var xaxis = d3.axisBottom()
    .tickFormat(function(d) {return d ;})
    .scale(xscale);
  var chart = d3.select("body")
    .append("div")
    .datum(nested[3]); // add data to the chart
    chart.append("h2")
      .text(
        function(d) {return d.key;} // already know what data we have
      )
      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")
        .call(yaxis);
        svg.append("g")
          .attr("transform", "translate(0," + height + ")")
          .call(xaxis);
    var gens =  svg.selectAll("g.sites")
        .data(function(d){return d.values;})
        .enter().append("g")
        .attr("class", function(d) { return d.key;})
        .attr("transform", function(d) {
          return "translate(0," + yscale(d.key) + ")"
        });
      gens.selectAll("circle")
        .data(function(d){ return d.values;})
        .enter().append("circle")
        .attr("r", function(d) {
          console.log(d)
          return radius(d.yield)})
        .attr("cy", 0)
        .attr("cx", function(d) { return xscale(d.year)})
        .attr("fill", function(d) { return color(d.gen)})
    /*
    d3.select("body")
      .append("pre")
      .text(
        JSON.stringify(nest.entries(response), undefined, 2)
      );
*/
console.log(nested);
});
</script>

https://d3js.org/d3.v4.min.js