D3 Examples - Transitions (exit, enter, update)

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
  /*css to go here*/
  svg {
    width: 800;
    height: 800;
  }
  circle {
    opacity: 0.5;
  }
</style>
​
<body></body>
​
<script>
  // properties
  var radius = 10;
  var duration = 1500;
  var tick = 2500;
  var width = 800;
  var height = 600;
  var padding = {top: 20, left: 20, right: 20, bottom: 20};
  var svg = d3.select('body')
    .append('svg')
    .attr('width', width)
    .attr('height', height)
  
  // setup scales for x and y
  var xScale = d3.scaleBand()
    .range([padding.left, width - padding.right])
    .align([1])
  
  var yScale = d3.scaleLinear()
    .range([height - padding.bottom, padding.top])
  
  var colorScale = d3.scaleOrdinal(d3.schemeCategory20)
  
  function update(data, year) {
    var t = d3.transition()
        .duration(duration)
    
    // filtered data for year
    data = data.filter(row => row.year === year)
    
    // data
    var dots = svg.selectAll('circle')
            .data(data, row => row.key)
    
    // exit
    dots.exit().transition(t)
      .attr('r', 0)
      .remove()
    
    // enter
    var enter = dots.enter().append('circle')
        .attr('fill', row => colorScale(row.gen))
        .attr('cx', row => xScale(row.site) + xScale.bandwidth() / 2)
        .attr('cy', row => yScale(row.yield))
        .attr('r', 0);
    
    // enter & update
    dots = enter.merge(dots)
      .transition(t)
      .attr('cy', row => yScale(row.yield))
      .attr('r', radius);
    
  }
  
  // load dataset
  d3.csv('barleyfull.csv', (error, data) => {
    
    // clean data
    data.forEach(row => {
      row.year = +row.year
      row.yield = +row.yield
      row.key = `${row.gen}:${row.site}`
    })
    
    // setup x domain and y max
    var xDomain = data.map(row => row.site)
​
    var yMax = d3.max(data.map(row => row.yield))
    
    // add domains to x and y scales
    xScale.domain(xDomain)
        console.log(xScale('StPaul'))
    
    yScale.domain([0, yMax])
    
    // draw x and y axis
    var xAxis = d3.axisBottom()
        .scale(xScale)
        var yAxis = d3.axisLeft()
        .scale(yScale)
    
    svg.append('g')
        .attr('transform', `translate(0, ${height - padding.bottom})`)
        .call(xAxis)
    
    svg.append('g')
        .attr('transform', `translate(${padding.left}, 0)`)
        .call(yAxis)
    
    // draw dotplot
    var year = 1927
    var i = 0
    setInterval(() => {
        update(data, year + i%10)
      i++
    }, tick)
  })
</script>
​
    