Old school D3 from simpler times

All examples By author By category About

ruridge

Full window Github gist

Transitions (exit, enter, update)

Built with blockbuilder.org

forked from sxywu's block: Selections: Data example

forked from sxywu's block: Selections: Enter example

forked from sxywu's block: Selections: Update-Exit example

forked from sxywu's block: FEM: Exercise 2

forked from sxywu's block: FEM: Exercise 2 Starter

<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>

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