[Unlisted] Practice Time

Example from d3 in Motion online course using the Iris data set.

forked from thulse's block: [Unlisted] D3 Course Practice

<!DOCTYPE html>
<html>
  <head>
  <meta charset="utf-8">
  <meta name ="viewport" content="width=device-width">
    <script src="https://d3js.org/d3.v4.min.js"></script>
    <title>Basic Scatter Plot </title>
  <style>
    .tick {
      font-size: 24pt;}
    .axis-label{
      fill: black;
      font-size: 30pt;
      font-family:sans-serif;
    }
    
    }
    </style>
  </head>
<body>
  <svg width="960" height="500"></svg>  
  <script>
    const xValue = d=> d.sepalLength;
    const xLabel = 'Sepal Length';
    const yValue = d=> d.petalLength;
    const yLabel = 'Petal Length';
    const	margin = {
      left: 120,
      right: 30,
      top: 20, 
      bottom: 140
    };
    
    const svg = d3.select('svg');
    const width = svg.attr('width');
    const height = svg.attr('height');
    const innerWidth = width - margin.left - margin.right;
    const innerHeight = height - margin.top - margin.bottom;
    
 
    const g = svg.append('g')
    	.attr('transform', `translate(${margin.left}, ${margin.top})`);
  	const xAxisG = g.append('g')
    	.attr('transform', `translate(0, ${innerHeight})`);
    const yAxisG = g.append('g');
   
    xAxisG.append('text')
    	.attr('class', 'axis-label')
      .attr('x', innerWidth/2)
    	.attr('y',100)
      .text(xLabel);
    
    yAxisG.append('text')
    	.attr('class', 'axis-label')
      .attr('x', -innerHeight/2)
    	.attr('y',-50)
      .attr('transform', `rotate(-90)`)
      .style('text-anchor','middle')
      .text(yLabel);
    
    
    const xScale = d3.scaleLinear();
    const yScale = d3.scaleLinear();
    
    const xAxis = d3.axisBottom()
        .scale(xScale)
    		.tickPadding(20)
    		.tickSize(-innerHeight);
    const yAxis = d3.axisLeft()
        .scale(yScale)
    		.ticks(5)
    		.tickPadding(20)
    		.tickSize(-innerWidth);
    
    const row = d =>{
      d.petalLength = +d.petalLength;
      d.petalWidth= +d.petalWidth;
      d.sepalLength= +d.sepalLength;
      d.sepalWidth= +d.sepalWidth;
      return d;
    };
    
    d3.csv('iriscsv.csv', row, data => {
      
      xScale
      	.domain(d3.extent(data, xValue))        
      	.range([0,innerWidth])
      	.nice();
      
     yScale
          .domain(d3.extent(data, yValue))
          .range([innerHeight, 0])
          .nice();
      
      g.selectAll('circle').data(data)
      	.enter().append('circle')
      		.attr('cx', d => xScale(xValue(d)))
      		.attr('cy', d => yScale(yValue(d)))
      		.attr('r', 8);   
      
      xAxisG.call(xAxis);
      yAxisG.call(yAxis);
    });
  </script>
</body>
</html>

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