Old school D3 from simpler times

All examples By author By category About

jerryorta-dev

Full window Github gist

FEM: Exercise 2 Starter

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: 600;
  }
  circle {
    opacity: 0.5;
  }
</style>

<body></body>

<script>
  // properties
  var radius = 10;
  var duration = 1500;
  var width = 800;
  var height = 600;
  var svg = d3.select('body').append('svg');
  // scales
  var xScale = d3.scaleBand()
    .rangeRound([0, width]);
  var yScale = d3.scaleLinear()
    .range([height, 0]);
  var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
  
  function update(data, year) {
   
  }
  
  d3.csv('barleyfull.csv', function(err, response) {
    response.forEach(function(d) {
      // convert yield and year from string to int
      d.year = +d.year;
      d.yield = +d.yield;
      // use gen and site as the unique key for each datum
      d.key = d.site + ':' + d.gen;
    });
    
    var startYear = 1927;
    var numYears = 9;
    var index = 0;
//     setInterval(() => {
//       update(response, startYear + (index % numYears));
//       index += 1;
//     }, 1000)
  });
</script>

xxxxxxxxxx
 
<script src="https://d3js.org/d3.v4.min.js"></script>
​
<style type="text/css">
  /*css to go here*/
  svg {
    width: 800;
    height: 600;
  }
  circle {
    opacity: 0.5;
  }
</style>
​
<body></body>
​
<script>
  // properties
  var radius = 10;
  var duration = 1500;
  var width = 800;
  var height = 600;
  var svg = d3.select('body').append('svg');
  // scales
  var xScale = d3.scaleBand()
    .rangeRound([0, width]);
  var yScale = d3.scaleLinear()
    .range([height, 0]);
  var colorScale = d3.scaleOrdinal(d3.schemeCategory10);
  
  function update(data, year) {
   
  }
  
  d3.csv('barleyfull.csv', function(err, response) {
    response.forEach(function(d) {
      // convert yield and year from string to int
      d.year = +d.year;
      d.yield = +d.yield;
      // use gen and site as the unique key for each datum
      d.key = d.site + ':' + d.gen;
    });
    
    var startYear = 1927;
    var numYears = 9;
    var index = 0;
//     setInterval(() => {
//       update(response, startYear + (index % numYears));
//       index += 1;
//     }, 1000)
  });
</script>
    

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