Old school D3 from simpler times

All examples By author By category About

naoyak

Full window Github gist

barley yield viz

Built with blockbuilder.org

<script src="https://d3js.org/d3.v4.min.js"></script>
<script src="https://d3js.org/d3-color.v1.min.js"></script>
<script src="https://d3js.org/d3-scale-chromatic.v1.min.js"></script>

<style type="text/css">
  /*css to go here*/
  svg {
    width: 600;
    height: 400;
  }
  circle {
    opacity: 0.5;
  }
</style>

<body></body>

<script>
  
  // properties
  var radius = 10;
  var duration = 1500;
  var width = 800;
  var height = 500;
  const margin = 50;
  var svg = d3.select('body').append('svg');
  svg.attr('width', width).attr('height', height);
  const startYear = 1927;
  const title = svg.append('text').text('Barley Yield by Site')
  	.attr('class', 'title').attr('font-size', 24).attr('font-family', 'Calibri')
    .attr('x', margin).attr('y', margin);
  const yearTitle = svg.append('text').text(startYear)
    .attr('class', 'year-title').attr('font-size', 36).attr('font-family', 'Calibri').attr('x', width - margin * 6).attr('y', margin).attr('fill', 'lightblue').attr('opacity', 0.8);
  const circleRad = 15;
  const scales = {
    x: d3.scaleBand().rangeRound([margin, width - margin]),
    y: d3.scaleLinear().range([height - margin, margin]),
    color: d3.scaleOrdinal(d3.schemePaired)
  };
  
  d3.csv('barleyfull.csv', (err, data) => {
    data.forEach(d => {
      d.yield = +d.yield;
      d.year = +d.year;
      d.uniqueId = d.site + '-' + d.gen;
    })
    scales.x.domain(data.map(d => d.site));
    scales.y.domain(d3.extent(data, d => d.yield));
    var year = 1927;
    var i = 0;
    svg.append('g').attr('class', 'x-labels').selectAll('text').data(scales.x.domain())
       .enter().append('text')
       .attr('class', 'site-label')
       .text(d => d)
       .attr("font-family", "sans-serif")
       .attr('x', d => scales.x(d))
       .attr("font-size", "14px")
       .attr('fill', 'gray')
       .attr('text-anchor', 'middle')
       .attr('y', d => height - margin);

setInterval(() => {
      updateViz(data, year + (i % 9), svg, scales);
      i += 1;
    }, 1000);
    
  })
  
  function updateViz(data, year, svg, scales) {
    var circles = svg.selectAll('circle')
    	.data(data.filter(d => d.year === year), d => d.uniqueId);

const exit = circles.exit()
      .transition(500)
    	.attr('r', 0).remove();
    var enter = circles.enter().append('circle')
    	.attr('r', circleRad)
      .attr('cId', d => d.uniqueId)
      .attr('cx', d => scales.x(d.site))
      .attr('cy', d => scales.y(d.yield));
    circles.merge(enter)
      .attr('fill', d => scales.color(d.gen))
    	.transition(1000)
    	.attr('cx', d => scales.x(d.site) + (Math.random() - 0.5) * 30)
    	.attr('cy', d => scales.y(d.yield));
    const yearTitle = svg.selectAll('.year-title')
      .datum(year)
      .transition(500)
      .attr('opacity', 0)
      .attr('font-size', 4)
      .text(year)
      .transition(500)
      .attr('opacity', 0.8)
      .attr('font-size', 36);
      
    
  }
</script>

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

https://d3js.org/d3-color.v1.min.js

https://d3js.org/d3-scale-chromatic.v1.min.js